# why does css display differently in different browsers?



## vidyaishaya (Oct 27, 2001)

How is it that I can setup a CSS file that works great for Internet Explorer, but when displayed in Mozilla, the fonts are the wrong size, and the padding is ignored? Among other things!

What's going on there? And I assume this is well-known??

And therefore, there's a work-around, yes?

Thanks

...Vidya Ishaya


----------



## tdi_veedub (Jan 29, 2004)

Because just like with everything else Microsoft does, Internet Explorer does not follow standards and alot of their HTML extensions only work with IE.

Your best bet is to build your site according to the w3 html 4.01 standard, or the xhtml 1.0 standard. That way the site will look identical with any browser.

Check here for more info:

http://w3.org/

and validate your site here:

http://validator.w3.org/


----------



## CouchMaster (May 26, 2003)

Correct - if you build your site to standard coding it will look the same in any browser (more or less). It's possible that font size and color may be vary slightly but it will basically be the same.


----------



## Shadow2531 (Apr 30, 2001)

If while making a page, you only check it in IE and then when it's complete, you check it in other browsers, you are causing yourself a big hassle.

You should check in as many browsers as you can *while* you are developing the page.

Just for comparison, only check a page in Firefox and Opera while you are developing it. Then when you are done, check it in IE and see how messed up it is.

IE's rendering engine is old. It lacks support for a lot of things you find in STANDARD code. IE's css support is horrible and as already said, IE can make use of a lot of non-standard code. As expected, other browsers do not handle IE-specific code well and they shouldn't have to. You should use standard code and check it at http://validator.w3.org . When you validate your page, you can also validate the css (link on page). There's IE-only css too so keep that in mind and use standard css.

Now even if you are using standard code etc., things might not always look the same across standard-compliant browsers (IE is not one of them). The reason for this is simple. The html and css specifications are not exact on everything. In the specifications, you'll see things LIKE "The user agent is free to *guess* the position that the element should be at." or "There is no exact behavior defined. The user agent is free to handle the situation in any way that does not violate the spec.".

Because different developers have different methods and opinions of handling those non-exact situations, you can see differences with the same code.

Also, it is sometimes the case where developers will ignore a w3 spec if it doesn't really make sense. Mozilla and Opera both do that sometimes. So even if you create standard code, you still have to check the page in multiple browsers.

As a suggestion, in addition to checking with Mozilla and IE, check your pages in Opera. (Both Opera 7.54 and Opera beta 1)

If you have the luxury, check your pages in a khtml browser like Safari (on mac).

Also, if you are not using the proper doctype, you can put the browser in quirks mode, which can make things display differently.

Each browser while in quirks mode is going to handle code a lot differently than each of them in standards mode.

What doctype are you using?
Is your code and css valid?

On a side note, IE and Firefox by default, put a 8px margin on the body and 0px padding. Opera does the opposite.

To be consistent use,

body {
margin: 0px;
padding: 8px;
}

or

body {
margin: 0px;
margin: 0px;
}

There are lots of hacks to get things working in IE, but you have to get them working and looking right in other browsers first.

Altough IE is the most used, at its current state, it should be last on your list. Unfortunately that's not always easy as people still insist on using old software like IE. If people complain that the page doesn't work in IE, tell them nicely that you don't support non-standards-compliant browsers. 

On the other hand, business-wise you're going to have to satisfy those IE customers or _theoretically_ lose $$$.

Anyways, show us a test case that illustrates your problem. Then we'll see if it can be made to work across browsers. Although a link to an existing page will do, a simple test case would yield faster results.


----------



## coderwannabe (Feb 21, 2005)

I find that it helps to use dreamweaver mx to do my style sheets in. I used to use dw4 and would get more compatibility problems.


----------

