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 UGS Assassin Join Date: Sep 2001 Location: Brierley Hill, West Midlands Posts: 4,547 Band: Wülfstabber, Thee Moths, The Black Plums, Catface, DJ Wrong Homer, Wings & Claws, Señor Citizen, WRRRMS	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,621	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: 6,327 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.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

LinkBacks (?) LinkBack to this Thread: http://www.undergroundscene.co.uk/forum/information-technology/51874-do-websites-look-same-all-browsers.html
Posted By	For	Type	Date
could	This thread	Refback	8th June 2008 10:24 AM
could	This thread	Refback	28th May 2008 06:19 AM
could	This thread	Refback	6th May 2008 12:41 PM
Webã‚µã‚¤ãƒˆã¯ã¾ã£ãŸãåŒã˜è¦‹ãŸç›®ã§ã‚ã‚‹å¿…è¦ã¯ãªã„ : could	This thread	Refback	5th May 2008 05:56 AM

2nd May 2008, 01:38 PM	#2 (permalink)
RiseAgainst rambling boy of pleasure Join Date: Aug 2004 Location: Midlands Posts: 4,218 Band: The ShuttleCocks	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 UGS Assassin Join Date: Sep 2001 Location: Brierley Hill, West Midlands Posts: 4,547 Band: Wülfstabber, Thee Moths, The Black Plums, Catface, DJ Wrong Homer, Wings & Claws, Señor Citizen, WRRRMS	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 UGS Assassin Join Date: Sep 2001 Location: Brierley Hill, West Midlands Posts: 4,547 Band: Wülfstabber, Thee Moths, The Black Plums, Catface, DJ Wrong Homer, Wings & Claws, Señor Citizen, WRRRMS	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 rambling boy of pleasure Join Date: Aug 2004 Location: Midlands Posts: 4,218 Band: The ShuttleCocks	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,230	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 UGS Assassin Join Date: Sep 2001 Location: Brierley Hill, West Midlands Posts: 4,547 Band: Wülfstabber, Thee Moths, The Black Plums, Catface, DJ Wrong Homer, Wings & Claws, Señor Citizen, WRRRMS	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: Around Posts: 1,727	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,140 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.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Letting Websites?	xdavidx	UGS General Discussion	12	11th December 2007 09:26 AM
Annonymous Browsers	RiseAgainst	Information Technology	5	16th October 2007 06:03 PM
Alternate Browsers	~smack	Downloads and Resources	0	9th October 2004 11:40 PM
are there any websites, like this one, for the perth music scene?	seonaid	Gig / Event Announcements & Gig Seeking	0	6th August 2004 01:07 PM
Cool Websites	Jamie The CFH	Bollocks	2	16th June 2004 10:24 AM