Results 1 to 9 of 9

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

  1. #1

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

    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
    PowerPoster
    Join Date
    Nov 2017
    Posts
    3,116

    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,034

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

    How do you account for all those differences?
    Blake

  4. #4
    PowerPoster
    Join Date
    Nov 2017
    Posts
    3,116

    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
    Smooth Moperator techgnome's Avatar
    Join Date
    May 2002
    Posts
    34,532

    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??? *

  6. #6

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

    Hey
    Because HTML was designed for an environment common to different platforms (e.g., Windows, Mac OS X, the X Window System) and configurations unique to each user, a web page will not look the same on all computers. When designing your pages, keep in mind that users will have set different browser window sizes and may even have configured their browsers to have different font, text, link, and background characteristics. If your page looks correct only with a certain window width and particular font, reconsider its layout.
    < advertising removed by moderator >

  7. #7
    Banned
    Join Date
    Jan 2021
    Location
    USA
    Posts
    25

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

    It is because HTML was designed in a way to give a common environment to different platforms (e.g., Windows, Mac OS X, the X Window System) and configurations unique to each user. A web page will not look the same on all computers. Remember that browsers can interpret HTML differently.

  8. #8

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

    do you use the same browser to render the html page? and also the browser render configuration can be different from computer to computer ,so it would be normal to have this effect...

  9. #9
    MS SQL Powerposter szlamany's Avatar
    Join Date
    Mar 2004
    Location
    Connecticut
    Posts
    18,263

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

    This needs to be debugged on the machine with the issue - debuggers in browsers do a really nice job of giving you details of how the CSS gets applied to each element in the DOM.

    *** Read the sticky in the DB forum about how to get your question answered quickly!! ***

    Please remember to rate posts! Rate any post you find helpful - even in old threads! Use the link to the left - "Rate this Post".

    Some Informative Links:
    [ SQL Rules to Live By ] [ Reserved SQL keywords ] [ When to use INDEX HINTS! ] [ Passing Multi-item Parameters to STORED PROCEDURES ]
    [ Solution to non-domain Windows Authentication ] [ Crazy things we do to shrink log files ] [ SQL 2005 Features ] [ Loading Pictures from DB ]

    MS MVP 2006, 2007, 2008

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