IE or Firefox,which one has a more logical CSS handling ?

Question

hello there , i know that there is some rules and standards in css handling but i mean which one is closer to a human thinking. for example : when i give a DIV tag a height property of 100px i just want it to be 100px! but in Firefox i should work on min-height or max-width and so on !

there is many like this examlpe , i think IE read css more humanestic against Firefox. i have several experiences in this case , your final nice design in IE can be a mess in Firefox thats because of the way they handle css. Firefox act as a robot but IE act as a human-half robot ! its just my idea. i will be glad to hear and learn from you proffesionals and other friends here.

thank you.

Answer 1

You must be new to web design. Otherwise you wouldn't be calling IE the more humane browser. :)

I see your point but I don't agree with your conclusion. The difference in the box model you are referring to is the only instance where IE's approach actually makes more sense than the official standard. Otherwise, IE usually is the culprit introducing behaviour that drives you crazy.

Browsers have their differences. In rendering, Firefox is generally closer to what is the official W3C standard than IE. IE 8 is the first step towards true standards compatibility on a very wide level.

You will usually need to support every major browser, down to IE 7 or even IE 6. Don't make the mistake of ignoring either, you can't afford it. (Except maybe for IE 6 - it's a discussion in itself.)

A very valuable guide to the differences are the compatibility tables at quirksmode.

Invaluable tools to figure out rendering oddities are Firebug in Firefox, and the new developer toolbar in IE 8. Be sure to have them under your belt when you start working.

Answer 2

Firefox easily. You can say "height: 100px" and get exactly that.

With IE you have pull weird tricks to provoke the "hasLayout" flag to change before things make sense in IE. I find centering things in IE to be a frickin' pain.

Answer 3

Empty div-tag? Just give it the following css-properties with corresponding values: position, (min-/max-)height, (min-/max-)width, left/right and top/bottom. You should do that anyway. Then it works in FF, IE and all other major browsers.

If you design for IE and then in FF your page doesn't look right, it's not right. It won't look right in any other browser like Chrome or Safari either, probably.

I test my designs in FF while working, and in all major browsers when I'm done.