[thelist] CSS: IE vs. Mozilla

Wed Jan 16 06:11:49 CST 2002

At 18:35 2002-01-15 -0800, Michael Buffington wrote:
>I spent a lot of time to get the following URL to look fantastic in IE
>6.0, only to have my bubble violently burst by Mozilla 0.9.7.
>
>http://www.michaelbuffington.com/css.html

Try changing the document from quirks into standards mode and look at it. 
Does it still behave the same? No? Thoughts so...

You are better off using block boxes with float to achieve the same effect.

(
The best doctype to use for toggling standards mode in IE5 Mac, IE6, Moz 
is  the XHTML1.0 Strict:
<!DOCTYPE html
      PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
)

>Up until this project I've been pretty successful in having Mozilla
>display identically to IE, but this time it seems Mozilla has done
>everything it can to interpret my CSS entirely differently.

Use standards mode and you'll have much bigger resemblance between the 
browsers.

>I'm looking for reasons as to why there is such a huge difference, and
>when all is said and done, I'm looking for a way to use CSS with <DIV>s
>to accomplish what IE displays so nicely.

Might be hard if you want IE 5/5.5 Win compatibility. But for 
Opera/Konqueror/Mozilla/IE5 Mac/IE6 Win compatibility disregarding IE 5.x 
for windows it's somewhat simpler.

>One thing I've noticed is that when I remove display:inline; from the
>columns, Mozilla begins obeying the width specifications. Obviously I
>need to display:inline;, so that's not a good solution, but it is
>interesting.

"display: inline;" is supposed to ignore width and height. If it doesn't in 
one browser or the other, then that browser is at fault with the CSS Rec. 
CSS3 will probably mend this by adding an "inline-block" value which 
basically calculates the box model as were it relatively positioned block, 
but regards that entire block like were it inline (such a mode as images 
through all times have been displayed in).

 From the CSS2 Rec:
>10.3.1 Inline, non-replaced elements
>
>The 'width' property does not apply. A specified value of 'auto' for 
>'left', 'right', 'margin-left' or 'margin-right' becomes a computed value 
>of '0'.

>10.6.1 Inline, non-replaced elements
>
>If 'top', 'bottom', 'margin-top', or 'margin-bottom' are 'auto', their 
>computed value is 0. The 'height' property doesn't apply, but the height 
>of the box is given by the 'line-height' property.