Category: "XHTML/CSS"

CSS: Fixing overflow: hidden in IE

Internet Explorer 6 for windows has been giving me a hard time with expanding fixed width or fixed height boxes (divs) in the most non standard fashion...

The trick would be to apply overflow: hidden to the div to force the browser to hide any excessive content (text, images) instead of expanding the container. But IE6 will not always do as told... :(

I found out today that the trick with IE, is to apply a fixed width or height property to the same container (div) as the overflow property, and then, IE will always crop the contents as expected.

Note: you can specify widths and heights in ex, em or % (not just px). So it's only "fixed" in a relative manner.

PS: In some cases, you may want to consider the non standard IE CSS property word-wrap: break-word; This will break words too long to fit into the fixed width. IE only and non standard...


We used to have an article here about styling textareas with CSS in IE. It was one more post on the web about one more bug in Internet Explorer 6. It has been fixed in between.

In case you still need this, we had a workaround which consisted of applying width:100% on a div around the form, like this:

<div style="width:100%">
    <label for="t1">Try to type in here:</label>
    <textarea id="t1" style="width:100%">Try to type here!</textarea>

Tableless Design: Not ready for prime time!

Here we used to have an article about how hard it was to deisgn an HTML page wihtou tables back in 2003.

Since the web browsers have evolved a lot since then I have removed the examples becaus ethey required custom CSS to be injected in the CMS running this site.

Here are still a few paragraphs from the original article that still make sense:

I will restrict my rendering tests to Internet Explorer 6.0.2800.1106, Netscape Navigator 7.02 and Opera 7.10 (build 2840) on Windows. I think everyone would agree that if something won't work with the latest versions of these three most used browsers, it is definitely not ready for prime time!

With tableless design - i-e with the use of CSS styles instead - you should theorically be able to not only preserve semantic intelligence and accessibility of your document, but you should also be able to improve the "liquid flow" of your design, that is to say, the second picture should go under the first one when the browser width is insuficient.

Well, at least, if it doesn't improve the liquid flow, you should be able to get the same layout. At least!

And you actually can get the same layout... sometimes!

Most browsers will not render CSS the same way depending on the doctype of your document. You need to watch that carefully to make sure you activate standards compliant mode in all browsers.

Then you can play... spend hours trying to get that damn thing to look like the intended design...



Turn any <textarea> into a WYSIWYG editor.