width: auto; on Floats in IEBy Roger Keays, 5 July 2008 |
width: auto; on Floats in IEI think CSS 2.0 required that widths be explicitely set on floated elements, but CSS 2.1 removed this restriction. Either way, Microsoft Internet Explorer 6.0 equates width: auto; with width: 100%; for floats. Not very helpful for building CSS menus. I searched the web and didn't find any workarounds, but I came up with this simple one myself:
element { float: left; _width: 0px; }
The underscore hack targets IE 6 but not IE 7 (which behaves correctly). IE6 also automatically expands the width of the block to fit when the specified width is too small, which is why this hack works. When I say 'works' I mean it in the Microsoft sense of the word of course.
Hope it helps!
width: auto; on Floats in IE
About Roger Keays
 |
Roger Keays is an artist, an engineer, and a student of life. He has no fixed address and has left footprints on 40-something different countries around the world. Roger is addicted to surfing. His other interests are music, psychology, languages, the proper use of semicolons, and finding good food.
|
Thanks Salam - that was the missing piece of the puzzle:
_width: 0px;
_white-space:nowrap;
For bits of text with 2 or more words, to stop them wrapping, that is :)
Need some help here. Tried this fix, but didn't work in my menu. I got 2 or more words in 1 link, .. How should I fix this?
mcdst
btw, with 2 or more words, I ofcourse mean: 'about me' or something ;)
Thanks for posting this! Worked like a charm.
You would also have a job if there were no defects in IE6. It would just be more interesting.
Thanks to IE6 bugs I still have a job.
Thanks! This solution work for me! And I can apply with other problem on IE6, too.
Thanks a ton dude!! this saved hell lot of time! I don't know why ppl still use stone age browsers like IE6. It's so unfortunate that we still have to support it :(
great, thanks!
nice thinking dude.. it works and it helped me lot....
Hmm, I must be doing something wrong, because this doesn't work for me. I have a float:right DIV within another. The right floated DIV did not have a width specified and in Firefox, Safari and Chrome its size was auto-calculated to hold the contents. In IE7 the floated DIV takes up the entire width of the browser, popping out of the container DIV! You say above that this should not be an issue with IE7, but I tried the _width: 0px idea anyway, but that didn't help. If you have any hints on where I am going wrong, that would be great.
Handy hint, thanks.
If you want to keep your CSS hack-free, then set your dumb IE6 version
ul li {
float: left;
width: 0;
}
then override it for smart browsers using the child selector ">", thus
ul>li {
width: auto;
}