Different browsers different outcome

@augustusMay 31.2007

Hi guys,

I have been workin on a web page for a few weeks now and I was checking how it looks like in Mozilla Firefox 2.

Well, it seems that the same code appears differently in other browsers 😡 (opera and internet explorer, for example).

So, I have two questions:

a) What is the problem that is causing the same page to appear differently when displayed by different browsers?

b) How can I fix it?

Thanks.?

to post a comment

HTML

18 Comments(s) _↴

@kiwibritMay 31.2007 — #Whether or not you use CSS, read, and follow up on [url=http://www.webdeveloper.com/forum/showthread.php?t=117052]this[/url] (suggestion to mods - perhaps this should be added as a sticky in this section).

If you then still have problems which you cannot sort out, ask again, including a link to the problem page.

@augustusauthorMay 31.2007 — #Thanks for your advice kiwibrit.

At the beginning it found 311 errors! Most of them were because I had written the tags in capitals. Once I switched them to lower case the problems dropped to 98.

Now, there is a problem were I can't understand how to fix. Here is the problem as the report shows it:

Error Line 5 column 5: document type does not allow element "html" here.

<html>

The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed).

One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowed; hence the reported error).

-End of Report-

I have a meta and three link tags in my head tag. Is this what causes the problem? And if this is the case how can I fix it?

@CharlesMay 31.2007 — #Post the URL.

@augustusauthorMay 31.2007 — #If you mean the url of the site, Charles, I can't because I have not uploaded the site, yet.

But, I can give you the source code, if that is helpful.

@WebJoelMay 31.2007 — #yes, -source code would most definately help. ?

@augustusauthorJun 01.2007 — #Here is the source code: [ATTACH]9015[/ATTACH]

I have checked the page with the help of w3c's validators, as kiwibrit advised me to do.

All errors have been corrected and as for the css, it is valid, too.

But the problem remains. I can't make the page appear the same in all browsers.

The differences are still there.

[upl-file uuid=a8ad2eb7-6e36-4cfe-bd3e-e7ad7175b4fa size=24kB]mysite.txt[/upl-file]

@kiwibritJun 01.2007 — #Well, it validates, though the character encoding specified in the HTTP header (iso-8859-1) is different from the value in the <meta> element (iso-8859-7) - more on this [url=http://www.w3.org/International/tutorials/tutorial-char-enc/]here[/url]. That shouldn't affect your layout problem, though. I see you are laying out in tables, which I have very little experience of, since I use CSS - so I will bow out of this one and leave it to others.

@augustusauthorJun 01.2007 — #Kiwibrit, you say that I use tables.

Could I use css and have the same results? Could I arrange things as they are now with sheer css?

P.S.: I don't mean to change the subject of the thread. I am just curious about what you said.

@WebJoelJun 01.2007 — #I'll field that one and yes, -non-tables and the same thing would probably enjoy a 50-75% reduction in KB size (this is typically what I experience when changing to all-CSS prior to optimizing)

p.s., --Greek? ? kewl.

@augustusauthorJun 01.2007 — #But how could I have the same results without using tables??

I mean, is there a book or an online guide you would recommend??

I am, currently, using css only to modify the tables in my page.

Do you believe that by using css instead of tables my problem would be solved?

P.S.: Thanks WebJoel.

@slaughtersJun 01.2007 — #The reality is that sometimes things just look different between the two browsers no matter what you do.

Firefox and IE propagate class and style definitions from table to tr to td slightly differently (different inheritance rules in the render engines) - BUT - changing to DIVs may still lead to slight visual differences.

Could you post screen snap-shots of what it looks like in IE and Firefox so we can see how different they look.

@augustusauthorJun 01.2007 — #I have taken some pictures of it but they are very big.

How can I take snapshots or how can I reduce the size of the pictures?

@kiwibritJun 01.2007 — #To take a screenshot, hit the Print Scrn button, then open a new file in your favourite photo-editor, and hit Ctr+V (or however you like to paste). Save - normally as a jpg, unless there are just block colours, in which case a gif is fine. To reduce picture size, [url=http://bluefive.pair.com/pixresizer.htm]PIXresizer[/url] is very good IMHO.

@augustusauthorJun 01.2007 — #Ok, thanks to kiwibrit I can show you the pictures.

Here they are.

1) Mozilla Firefox (it is as I want it to be):

[ATTACH]9024[/ATTACH]

2) Internet Explorer (the borders' colour is white, instead of being yellow - there

are some other differences but I believe them to be obvious):

[ATTACH]9025[/ATTACH]

3) Opera (the borders' color is black, not even the same with internet explorer,

here the tables' width and height have been changed in addition to other

differences, as well):

[ATTACH]9026[/ATTACH]

If you find the pictures to be not useful feel free to tell me. I have some snapshots which, since they are from closer range, might make the differences more obvious.

[upl-file uuid=512899f1-79e9-4c16-b2f6-88314fdbb650 size=74kB]Mozilla Firefox (648 x 486).jpg[/upl-file]

[upl-file uuid=dbc24dfc-a145-45bb-95e6-c18f5d33fa62 size=70kB]Internet Explorer (648 x 486).jpg[/upl-file]

[upl-file uuid=d302dd54-5319-451e-8376-b96457f76518 size=52kB]Opera (648 x 486).jpg[/upl-file]

@LavarinthJun 02.2007 — #As kiwibrit just explained, use the Print Screen button on your computer, and use a problem like Microsoft Paint, Photoshop, Paintshop Pro, etc, and create a new image and select the Paste feature (or Ctrl-V). This will create an image of what was displayed on your desktop while you pressed this button. Screens, whether it be television, monitor, etc, will never come out perfect through a camera's lens do to refresh rates.

@augustusauthorJun 05.2007 — #Ok, here are my snapshots.

1) Mozilla Firefox

[ATTACH]9040[/ATTACH]

2) Internet Explorer

[ATTACH]9041[/ATTACH]

3) Opera

[ATTACH]9042[/ATTACH]

Hope these will help more than previous pictures.

[upl-file uuid=d7cbd21f-992e-4638-a312-520a241cc947 size=80kB]aex firefox (640 x 400).jpg[/upl-file]

[upl-file uuid=fc09e4cc-6308-44d0-8648-42690104e52d size=72kB]aex ie (640 x 400).jpg[/upl-file]

[upl-file uuid=01638af2-be7a-4227-ad4f-502e301f79a2 size=74kB]aex opera (640 x 400).jpg[/upl-file]

@augustusauthorJun 13.2007 — #So, guys, could anyone please help me?

@augustusauthorJun 14.2007 — #The cause of all the problems with my web page was css.

Different browsers translate css differently. Opera, for example, supports the height attribute only for pixel values. As a result, an expression such as:

height="80%" is not supported.

Thanks everyone for your time and help.?

Also in #HTML _↴

Frame Scroll Bar on left side, how?Is html or javascript needed here ?lightbox format for opening website links

Success!

Help @augustus spread the word by sharing this article on Twitter...

Tweet This

Different browsers different outcome

18 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

Different browsers different outcome

18 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

18 Comments(s) _↴

Also in #HTML _↴