Results 1 to 5 of 5

Thread: Why do web pages render differently on different computers?

  1. #1

    Thread Starter
    PowerPoster
    Join Date
    Jan 2004
    Location
    Southern California
    Posts
    5,001

    Why do web pages render differently on different computers?

    Hi,

    I know my title seems pretty easy to answer, none the less, the page that I'm working on seems to defy all odds. I have a very simple web page that contains different sections. The section in particular is a "BIO" section. I'm using Bootstrap and the main <DIV> has a single class of "row". When I view the page in multiple browsers from my laptop, it renders perfectly every time. However, on the clients computer, it's not even close. The settings on my clients computer is identical to mine as far as screen resolutions and font-size. Any idea what I might be missing. I know this is a long-shot with just this little bit of info. I have included the "BIO" section as well as all CSS Rules for it below. Obviously, the wording has been changed to Lorum Ipsum.

    Code:
    #div-biography {
        width: 80%;
        color: #444;
        height: 100vh;
        text-align: center;
        margin-top: 200px;
        margin-left: auto;
        margin-right: auto;
        padding-top: 50px;
        border: 1px solid transparent;
        letter-spacing: 0.04em;
        font-family: 'Arial Narrow', 'Roboto Condensed';
    }
    
    #div-biography img {
        float: left; 
        width: auto; 
        height: 270px; 
        margin-top: 50px; 
        margin-bottom: 0; 
        margin-left: 40px; 
        margin-right: 40px; 
        border-radius: 50%;
    }
    
    #div-biography p {
        width: 80%;
        height: 30%;
        font-size: 20px;
        text-align: justify;
        margin-top: 200px;
        margin-right: auto;
        margin-bottom: 160px;
        margin-left: auto;
        width: 90%; 
        line-height: 1.4em;
        padding-right: 20px;
    }
    
    #div-biography #bar1 {
        width: 100%;
        margin-top: 25px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: -140px;
        background-color: #fab649;
    }
    
    #bar2 {
        width: 100%;
        margin-top: -120px;
        margin-left: auto;
        margin-right: auto;
        background-color: #fab649;
        border: 1px solid red;
    }
    
    table {
        margin: auto auto;
    }
    
    .text {
        text-align: justify;
        width: 80%;
        height: 30%;
        font-size: 20px;
        text-align: justify;
        margin: 40px auto;
        padding-top: 40px;
        width: 90%;
        line-height: 1.4em;
        padding-right: 20px;
    }
    
    .textalign {
        margin-top: 0;
    }
    Code:
                <div id="div-biography" class="row">
                    <table border="0" style="width: 89%">
                        <tr>
                            <td colspan="2" style="font-size: 30px">BIOGRAPHY</td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <hr id="bar1">
                            </td>
                        </tr>
                        <tr>
                            <td><img src="images/davidbranson.JPG"></td>
                            <td><p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <br><br><br><br><br><br>
                                <hr id="bar2">
                            </td>
                        </tr>
                    </table>
                </div>
    Blake

  2. #2
    Frenzied Member
    Join Date
    Nov 2017
    Posts
    1,236

    Re: Why do web pages render differently on different computers?

    Browser default font/size could differ.
    Browser zoom settings could differ.
    Browser add-ins could differ.
    Browser version could differ.
    "Viewable" browser window size could differ based on toolbar space taken up on top or sides.
    DPI settings could differ.
    Accessibility options could differ.

    There's probably a ton of other possibilities that I'm not thinking of.

    Good luck.

  3. #3

    Thread Starter
    PowerPoster
    Join Date
    Jan 2004
    Location
    Southern California
    Posts
    5,001

    Re: Why do web pages render differently on different computers?

    How do you account for all those differences?
    Blake

  4. #4
    Frenzied Member
    Join Date
    Nov 2017
    Posts
    1,236

    Re: Why do web pages render differently on different computers?

    If, what you are asking above, is how do you ensure that, regardless of operating system, monitor resolution, DPI, browser, or any other possible setting that can impact how websites are rendered, how do you design a website so that it will look exactly, imperceptibly, and absolutely pixel-by-pixel identical across them all?

    Simple answer: You can't.

    There are things you can do to make it so it will look "right" in the vast majority of cases, and there are no shortage of Google search results when trying to find such information.

    I'm unable to assist further with this. Good luck.

  5. #5
    PowerPoster techgnome's Avatar
    Join Date
    May 2002
    Posts
    33,065

    Re: Why do web pages render differently on different computers?

    The short answer: you can't.
    The longer answer: you develop against a known set of circumstances and settings.

    I work on a system that's utilized by the VA. The standards by which I have to develop against are a known quantity. To ensure this, I have a VM that's configured appropriately that can be used to test the sites on to make sure they are hitting their points. Fortunately 9 times out of 10 they do with out incident since we used the VA's standards right from the beginning. That 10th time we didn't and that's the time when it had to be reworked because two shades of red were used... one was right and the other wasn't.

    -tg
    * I don't respond to private (PM) requests for help. It's not conducive to the general learning of others.*
    * I also don't respond to friend requests. Save a few bits and don't bother. I'll just end up rejecting anyways.*
    * How to get EFFECTIVE help: The Hitchhiker's Guide to Getting Help at VBF - Removing eels from your hovercraft *
    * How to Use Parameters * Create Disconnected ADO Recordset Clones * Set your VB6 ActiveX Compatibility * Get rid of those pesky VB Line Numbers * I swear I saved my data, where'd it run off to??? *

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width