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>
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.
Re: Why do web pages render differently on different computers?
How do you account for all those differences?
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.
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
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.
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.
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...https://www.vbforums.com/images/ieimages/2021/07/11.jpg
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.
