CSS overflow and height - compatability between IE6 and FF
October 2, 2006
I’m displaying text inside boxes by creating div’s with a 1 pixel border. To ensure the text clipped to the size of the box I wanted I set “overflow: hidden” and “max-height: 1.2em” and it all worked just fine in Firefox. However, in IE6 the box would stretch to show all the text. A bit of playing around has led me to discover that setting “height: 1.2em” instead of max-height works in both browsers.
Now I just need to get to grips with the DOCTYPE declarations. Using HRML 4.01 transitional without a DTD URL means the fonts aren’t the right size in IE6 (for “font-size: smaller”) but if I add the DTD to put IE into standards compliant mode then FF loses it.
I think I need to read this http://www.alistapart.com/stories/doctype/ quite thoroughly.
I’d recommend you go for the strict doctype myself.
To get the fonts to match up across the browsers, I set a font-size of 100% in my body element, then use an em value in a wrapper/container div. Works for me :)
Comment by Olly Hodgson — October 4, 2006 @ 10:39 am
Hi Olly. Yes, I’ve gone for strict XHTML 1.0 in all my pages now after having done some research. Makes things a whole lot more consistent across browsers, though still not 100% of course.
Comment by dougclinton — October 4, 2006 @ 10:42 am
HTML 4.01 Strict for me. Unless you’re it up serving as XML, I can’t see any real-world advantage to XHTML right now, especially as most browsers just treat it like HTML 4 anyway.
Comment by Olly Hodgson — October 4, 2006 @ 12:28 pm
I just like the rigour associated with XHTML. Forced closing tags and the fact that it simply doesn’t support things like the tag which should be the domain of CSS.
However, I’m not a web designer by profession so I’m not aiming for quite as widespread a browser audience as you might be. I’m a programmer who does a little bit of web page hacking, and a lot of DOM scripting and I’m targeting modern browsers for the most part.
Comment by dougclinton — October 4, 2006 @ 12:34 pm