Link to home
Start Free TrialLog in
Avatar of yazan3000
yazan3000

asked on

Good in Explorer bad in Firefox

Hi experts
Why web pages sometime appear finely when viewing them in IE but look bad when using Firefox?
I used HTML and CSS .
What shall I do to fulfill compatibility between different browsers?
Avatar of pollock_d
pollock_d

you can look on w3schools.org to see the differences between the support for each browser.
Depends on how good your html is:
<html>
<head>
</head>
<body>
Hello
</body>
</html>

Although the above example is pretty simple and will appear the same in different browsers, each browser is using it's own "method" of rendering the html.  This is called "quirks" mode.  If you don't specify a DOCTYPE to your html, the browser will render it the best they can, which is often lousy and inconsistent.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
   <HEAD>
      <TITLE>My first HTML document</TITLE>
   </HEAD>
   <BODY>
      <P>Hello world!
   </BODY>
</HTML>

This tells the browser that it needs to be rendered using the HTML 4.01 doctype.  When a browser sees this, it will render the html in that mode, as opposed it's own quirks mode.  You'll find that putting doctypes declarations and making sure the html is valid will drastically increase the cross-browser compatibility of your web pages.

http://www.w3.org/TR/html401/struct/global.html
ASKER CERTIFIED SOLUTION
Avatar of rbudj
rbudj
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
@rbudj

That will validate css

http://validator.w3.org/ will validate html via specified doctypes(automatic or you can select your own)
Avatar of Göran Andersson
Firefox renders the page correctly, IE doesn't.

If you only test the page in IE when building it, your layout are very likely to rely on rendering errors in IE to make the page look as intended. This means that it only looks that way in IE, as no other browser has the same set of rendering errors.

The first step towards building standards compliant pages is to put a doctype tag first in the code, just as Morcalavin suggested.

Here are some doctype tags to choose from:
http://www.w3.org/QA/2002/04/valid-dtd-list.html

If you test your page in Firefox, it's very likely that it looks exactly the same or very similar in most other browsers, like Mozilla, Netscape, Opera, Safari, Konqueror... basically anything but Internet Explorer.

Internet Explorer has several rendering errors that you have to circumvent. Mostly that is easily done, like using overflow:hidden to keep it from making element higher than they should be, using padding instead of margin to avoid the double margin bug, setting a specific size for elements where IE is confused about that the size should really be, etc.

Here's a list of most rendering errors in IE:
http://www.positioniseverything.net/explorer.html

(There is a similar list for Firefox/Netscape, but it only contains two errors, and both were fixed years ago.)

IE version 7 fixed several rendering errors, but there are still enough left to make it problematic.
Just validating the code will not get you all the way. Just because the code is valid, doesn't automatically mean that it works.

Also, you have to circumvent the rendering errors in IE. Validating the code doesn't help anything when the browser doesn't render the code correctly anyway.