Page is a not externally linkable
- Code, Content, and Presentation
-- CSS
---- Cross Browser CSS in tables


Xoc - 2:11 am on May 30, 2001 (gmt 0)


It gets worse. Add a <select> tag. Then try to get it to size to 50%. There are the typical Netscape bugs. But there is also a bug in IE 5.5! So if you do:


<td>
<span class="smaller">
<select size="1">
<option>option1</option>
<option>option2</option>
</select>
</span>
</td>

This works in Netscape, but IE 5.5 doesn't inherit the <span class="smaller">, and renders the listbox full size! This is a bug! However, if you change it to:


<td>
<span class="smaller">
<select size="1" class="smaller">
<option>option1</option>
<option>option2</option>
</select>
</span>
</td>

Netscape, as usual, ignores the class="smaller" on the select, so comes out looking okay. But IE 5.5, now correctly inherits the <span class="smaller"> and renders the listbox at 25%. The workaround to make IE 5.5. inherit the <span> I found is to do this:


<style>
.smaller {FONT-SIZE: 50%}
.fullsize {FONT-SIZE: 100%}
</style>
...
<td>
<span class="smaller">
<select size="1" class="fullsize">
<option>option1</option>
<option>option2</option>
</select>
</span>
</td>

It appears that having any class attribute on the select causes it to avoid the bug and inherit. I don't know if this applies to any other version of IE.

Every time I read [richinstyle.com...] and see the hundreds of CSS bugs the various browsers have, the more I just get annoyed. I've given up on being annoyed at Netscape, as their use of CSS is so bad that you just have to work around it, but I expect more of IE.

If anyone has any better ideas, I'd really like to know.


Thread source:: http://www.webmasterworld.com/css/20.htm
Brought to you by WebmasterWorld: http://www.webmasterworld.com