Do websites look the same in all browsers?

Thee Alex · 2nd May 2008, 01:27 PM

Do websites need to look exactly the same in every browser?

I tried it with a load of different browsers, both on Mac and PC.....

First up, my MacBook (I didn't bother with a Seamonkey shot, as the rendering was the same as the other Mozilla based browsers)

Note: the IE6 shot was the Windows version running under CrossOver - not sure if the disastrously poor rendering was down to poor emulation or (I suspect) a crappy browser.

Then I noticed the 'snapshot' preview on LJ rendered it differently again -

...while the NetNewsWire browser seems to have more in common with Shiira and Safari -

A couple of XP shots show the font rendering differently (these are from Gord and a reader of my LJ)-

Finally I opened it in Vista with both Firefox and IE7 -

Anyone care to share their versions, and set-ups? Would be especially interested in seeing a Safari/PC combo and whatever comes up in Linux.

RiseAgainst · 2nd May 2008, 01:38 PM

wouldn't it be dependant on the font type?

you can locally install a font with the same name, that is completely different, which isn't really the browser's fault.

Thee Alex · 2nd May 2008, 01:45 PM

Here's the html -

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Do websites need to look exactly the same in every browser?</title>
<style type="text/css" media="screen, projection">
body {
margin: 0;
padding: 10em;
font: small Baskerville, Georgia, serif;
background: #dfd5c5 url(tile.gif);
}
h1 {
margin: 0;
padding: 0 0 70px 0;
font-size: 1400%;
line-height: 1em;
font-weight: normal;
text-align: center;
text-shadow: 3px 3px 4px #a0937f;
white-space: nowrap;
color: #48433d;
background: url(flourish.png) no-repeat 50% 100%;
}
</style>
</head>

<body>

<h1><em>NO!</em></h1>

</body>
</html>

Thee Alex · 2nd May 2008, 01:47 PM

Oh, and notice that the Shiira, Safari and NetNewsWire browsers all render the text with a shadow.

RiseAgainst · 2nd May 2008, 03:29 PM

im not 100% sure of this, but could i not install the font Arial say onto my machine under the name Baskerville using a ttf editor?

AlanG · 2nd May 2008, 03:58 PM

I've taken Safari on WinXP but I am just away to leave work and it's too large to attach, will sort at home if no one else has

Rebelius · 2nd May 2008, 08:49 PM

They all look the same to me except the IE6 one, and I'm sure there's an update for transparencies in .png images.

Thee Alex · 3rd May 2008, 11:21 AM

Quote:

Originally Posted by Rebelius

They all look the same to me except the IE6 one, and I'm sure there's an update for transparencies in .png images.

The Shiira, NetNewsWire and Safari ones have a drop shadow on the letters, and all the IE versions are rendering the text off centre.

From looking at these it seems that Safari and Shiira render more pleasingly than the others.

humndislocation · 3rd May 2008, 01:06 PM

It's reasonable for the text to be rendered in a different font, if it can't find the requested font on the system.

That's why there are multiple fonts specified in this style declaration
font: small Baskerville, Georgia, serif;

If it can't find the first one, it'll fall back to the next one in the list. If it can't find Small Baskerville or Georgia, it'll fall back to whatever the default serif font is.

Another important thing to be aware of, is that depending on the contents (or abscence of the DOCTYPE entries at the top of the document, Firefox might render the content in "quirks mode", or "almost standard" mode, which renders the page in a non-standard way, to deal with older pages that were written to specifically cater for the quirks of older browsers.

As for the drop shadow, I did a bit of googling, and it looks like firefox doesn't fully support it yet.

As for IE, IE has always been a horrible browser, most likely due to Microsoft's habit of supporting a standard, then changing or adding things to their version, so that competing software that follows the standard fucks up when it tries to read files that use their non-standard extensions.

Thee Alex · 3rd May 2008, 01:27 PM

Overall it's an interesting little game showing how websites render differently in different browsers.

^_mincher_^ · 6th May 2008, 04:29 AM

Try throwing in some <div> tags with some CSS styling applied and theres a good chance things will get really wonky. Especially when using things like 'float:left' or 'display:inline' in your CSS.

RealR · 6th May 2008, 08:11 AM

There are dramatical differences when dealing with form objects and as mentioned, div tags and CSS stylings etc. When I get home I'll take a few screenshots of a site or something to demonstrate. Opera, IE, Safari and Firefox all look considerably different. Some is down to default font handling mind.

RiseAgainst · 6th May 2008, 09:03 AM

Quote:

Originally Posted by Thee Alex

Overall it's an interesting little game showing how websites render differently in different browsers.

it can be the same with any code with a different compiler. not just HTML.

2nd May 2008, 01:27 PM	#1 (permalink)
Thee Alex Senior Member Join Date: Sep 2001 Location: Solihull, West Midlands Posts: 3,615 Band: Thee Moths, Wülfstabber, Explosions and Screaming, Catface, DJ Wrong Homer, Señor Citizen, Thee Infinite Golden Universe, Sports, WRRRMS, former member of Lipsick!	Do websites look the same in all browsers? Do websites need to look exactly the same in every browser? I tried it with a load of different browsers, both on Mac and PC..... First up, my MacBook (I didn't bother with a Seamonkey shot, as the rendering was the same as the other Mozilla based browsers) Note: the IE6 shot was the Windows version running under CrossOver - not sure if the disastrously poor rendering was down to poor emulation or (I suspect) a crappy browser. Then I noticed the 'snapshot' preview on LJ rendered it differently again - ...while the NetNewsWire browser seems to have more in common with Shiira and Safari - A couple of XP shots show the font rendering differently (these are from Gord and a reader of my LJ)- Finally I opened it in Vista with both Firefox and IE7 - Anyone care to share their versions, and set-ups? Would be especially interested in seeing a Safari/PC combo and whatever comes up in Linux.

2nd May 2008, 03:58 PM	#6 (permalink)
AlanG ModSword +5 of Editing Join Date: Mar 2002 Location: Dundee Posts: 3,254	I've taken Safari on WinXP but I am just away to leave work and it's too large to attach, will sort at home if no one else has __________________ Ernie Ross - "I'm not a rent-a-quote MP" 10 Sep 04 Ernie Ross being a rent-a-quote MP 23 Jul 04

3rd May 2008, 01:06 PM	#9 (permalink)
humndislocation Hardcore is serious guys Join Date: Mar 2003 Location: Dundee Posts: 5,718 Band: Blasphemous Necrorapist	It's reasonable for the text to be rendered in a different font, if it can't find the requested font on the system. That's why there are multiple fonts specified in this style declaration font: small Baskerville, Georgia, serif; If it can't find the first one, it'll fall back to the next one in the list. If it can't find Small Baskerville or Georgia, it'll fall back to whatever the default serif font is. Another important thing to be aware of, is that depending on the contents (or abscence of the DOCTYPE entries at the top of the document, Firefox might render the content in "quirks mode", or "almost standard" mode, which renders the page in a non-standard way, to deal with older pages that were written to specifically cater for the quirks of older browsers. As for the drop shadow, I did a bit of googling, and it looks like firefox doesn't fully support it yet. As for IE, IE has always been a horrible browser, most likely due to Microsoft's habit of supporting a standard, then changing or adding things to their version, so that competing software that follows the standard fucks up when it tries to read files that use their non-standard extensions. Last edited by humndislocation : 3rd May 2008 at 01:08 PM.

2nd May 2008, 01:38 PM	#2 (permalink)
RiseAgainst Senior Member Join Date: Aug 2004 Location: Work id presume Posts: 2,492 Band: Cheat To Win	wouldn't it be dependant on the font type? you can locally install a font with the same name, that is completely different, which isn't really the browser's fault.

2nd May 2008, 01:45 PM	#3 (permalink)
Thee Alex Senior Member Join Date: Sep 2001 Location: Solihull, West Midlands Posts: 3,615 Band: Thee Moths, Wülfstabber, Explosions and Screaming, Catface, DJ Wrong Homer, Señor Citizen, Thee Infinite Golden Universe, Sports, WRRRMS, former member of Lipsick!	Here's the html - <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Do websites need to look exactly the same in every browser?</title> <style type="text/css" media="screen, projection"> body { margin: 0; padding: 10em; font: small Baskerville, Georgia, serif; background: #dfd5c5 url(tile.gif); } h1 { margin: 0; padding: 0 0 70px 0; font-size: 1400%; line-height: 1em; font-weight: normal; text-align: center; text-shadow: 3px 3px 4px #a0937f; white-space: nowrap; color: #48433d; background: url(flourish.png) no-repeat 50% 100%; } </style> </head> <body> <h1><em>NO!</em></h1> </body> </html>

2nd May 2008, 01:47 PM	#4 (permalink)
Thee Alex Senior Member Join Date: Sep 2001 Location: Solihull, West Midlands Posts: 3,615 Band: Thee Moths, Wülfstabber, Explosions and Screaming, Catface, DJ Wrong Homer, Señor Citizen, Thee Infinite Golden Universe, Sports, WRRRMS, former member of Lipsick!	Oh, and notice that the Shiira, Safari and NetNewsWire browsers all render the text with a shadow.

2nd May 2008, 03:29 PM	#5 (permalink)
RiseAgainst Senior Member Join Date: Aug 2004 Location: Work id presume Posts: 2,492 Band: Cheat To Win	im not 100% sure of this, but could i not install the font Arial say onto my machine under the name Baskerville using a ttf editor?

2nd May 2008, 08:49 PM	#7 (permalink)
Rebelius Senior Member Join Date: Aug 2002 Location: Edinburgh Posts: 7,088	They all look the same to me except the IE6 one, and I'm sure there's an update for transparencies in .png images.

3rd May 2008, 01:27 PM	#10 (permalink)
Thee Alex Senior Member Join Date: Sep 2001 Location: Solihull, West Midlands Posts: 3,615 Band: Thee Moths, Wülfstabber, Explosions and Screaming, Catface, DJ Wrong Homer, Señor Citizen, Thee Infinite Golden Universe, Sports, WRRRMS, former member of Lipsick!	Overall it's an interesting little game showing how websites render differently in different browsers.

6th May 2008, 04:29 AM	#11 (permalink)
^_mincher_^ Senior Member Join Date: May 2004 Location: Dundee....originally Irvine. Posts: 1,488	Try throwing in some <div> tags with some CSS styling applied and theres a good chance things will get really wonky. Especially when using things like 'float:left' or 'display:inline' in your CSS.

6th May 2008, 08:11 AM	#12 (permalink)
RealR Senior Member Join Date: May 2004 Location: Dundee Posts: 4,124 Band: They are make believe	There are dramatical differences when dealing with form objects and as mentioned, div tags and CSS stylings etc. When I get home I'll take a few screenshots of a site or something to demonstrate. Opera, IE, Safari and Firefox all look considerably different. Some is down to default font handling mind.