[RESOLVED] weird IE DIV positioning and sizing

@UltimaterSep 26.2007

This renders a lovely white-bordered yellow block in Firefox. How come IE is stumbling on this?

[code] <body style=”background-color:gray;”> <table cellspacing=”0″ cellpadding=”0″ border=”0″ style=”margin:0;padding:0;width:17px;height:1px;”> <tr><td><div style=”width:1px;height:1px;”></div></td><td><div style=”width:15px;height:1px;background-color:white;”></div></td><td><div style=”width:1px;height:1px;”></div></td></tr> </table> <table cellspacing=”0″ cellpadding=”0″ border=”0″ style=”margin:0;padding:0;width:17px;height:1px;”> <tr><td><div style=”width:2px;height:1px;background-color:white;”></div></td><td><div style=”width:13px;height:1px;background-color:white;”><div style=”position:absolute;filter:alpha(opacity=50);opacity:0.50;-moz-opacity:.50;-khtml-opacity:50;background-color:yellow;height:1px;width:13px;”></div></div></td><td><div style=”width:2px;height:1px;background-color:white”></div></td></tr> <table cellspacing=”0″ cellpadding=”0″ border=”0″ style=”margin:0;padding:0;width:17px;height:12px;”> <tr><td><div style=”width:1px;height:12px;background-color:white;”></div></td><td><div style=”width:1px;height:12px;background-color:white;”><div style=”width:1px;height:12px;background-color:yellow;filter:alpha(opacity=35);opacity:0.35;-moz-opacity:.35;-khtml-opacity:35;position:absolute;”></div></div></td><td><div style=”width:13px;height:12px;background-color:yellow;”></div></td><td><div style=”width:1px;height:12px;background-color:white”><div style=”width:1px;height:12px;background-color:yellow;position:absolute;filter:alpha(opacity=40);opacity:0.40;-moz-opacity:.40;-khtml-opacity:40;”></div></div></td><td><div style=”width:1px;height:12px;background-color:white;”></div></td></tr> </table> <table cellspacing=”0″ cellpadding=”0″ border=”0″ style=”margin:0;padding:0;width:17px;height:1px;”> <tr><td><div style=”width:2px;height:1px;background-color:white;”></div></td><td><div style=”width:13px;height:1px;background-color:white;”><div style=”width:13px;height:1px;background-color:yellow;filter:alpha(opacity=80);opacity:0.80;-moz-opacity:.80;-khtml-opacity:80;position:absolute;”></div></div></td><td><div style=”width:2px;height:1px;background-color:white”></div></td></tr> </table> <table cellspacing=”0″ cellpadding=”0″ border=”0″ style=”margin:0;padding:0;width:17px;height:1px;”> <tr><td><div style=”width:1px;height:1px;”></div></td><td><div style=”width:15px;height:1px;background-color:white;”></div></td><td><div style=”width:1px;height:1px;”></div></td></tr> </table> </body> [/code]

The reason I’m not using an image is because all instances of “yellow” will be changed dynamically with JavaScript upon a user-triggered event (whatever color the user picks). The reason I’m using opacity is to have a color between “white” and “yellow”, or whatever color the user picks, without having to do any math.

Any better ways to do this?

to post a comment

CSS

3 Comments(s) _↴

@CentauriSep 26.2007 — #Not sure why you would need to involve a table in that, or separate divs for everything..

However, IE6 will only allow a div to be a minimum height of the current text size, even if no text is present. Resetting the text size and/or line heights to 1px should solve that.

@UltimaterauthorSep 26.2007 — #However, IE6 will only allow a div to be a minimum height of the current text size, even if no text is present. Resetting the text size and/or line heights to 1px should solve that.[/QUOTE]
Ahhhh, so IE is treating height as min-height and the DIV's height ends up being the height of the font. Thanks Centauri, that fixed it.

<i>
 </i>&lt;style type="text/css"&gt;
 div{
 font-size:1px;
 }
 &lt;/style&gt;

For what it's worth: line-height didn't correct it like font-size did.

Thanks again Centauri, it is rendering correctly in IE now.

@UltimaterauthorSep 26.2007 — #For lack of a heightless font, I've found overflow:hidden a better solution.

<i>
 </i>&lt;body style="background-color:gray;"&gt;
 &lt;div style="width:17px;height:16px;overflow:none"&gt;&lt;!--container--&gt;
 &lt;div style="top:0px;height:1px;left:1px;width:15px;position:relative;background-color:white;overflow:hidden;"&gt;&lt;/div&gt;
 &lt;!--br--&gt;
 &lt;div style="top:0px;height:1px;left:0px;width:17px;position:relative;background-color:white;overflow:hidden;"&gt;&lt;/div&gt;
 &lt;div style="top:-1px;height:1px;left:2px;width:13px;position:relative;filter:alpha(opacity=50);opacity:0.50;-moz-opacity:.50;-khtml-opacity:50;background-color:yellow;overflow:hidden;"&gt;&lt;/div&gt;
 &lt;!--br--&gt;
 &lt;div style="top:-1px;height:12px;left:0px;width:17px;position:relative;background-color:white;overflow:hidden;"&gt;&lt;/div&gt;
 &lt;div style="top:-13px;height:12px;left:1px;width:15px;position:relative;background-color:yellow;filter:alpha(opacity=35);opacity:0.35;-moz-opacity:.35;-khtml-opacity:35;overflow:hidden;"&gt;&lt;/div&gt;
 &lt;div style="top:-25px;height:12px;left:2px;width:13px;position:relative;background-color:yellow;overflow:hidden;"&gt;&lt;/div&gt;
 &lt;!--br--&gt;
 &lt;div style="top:-25px;height:1px;left:0px;width:17px;position:relative;background-color:white;overflow:hidden;"&gt;&lt;/div&gt;
 &lt;div style="top:-26px;height:1px;left:2px;width:13px;position:relative;background-color:yellow;filter:alpha(opacity=60);opacity:0.60;-moz-opacity:.60;-khtml-opacity:60;overflow:hidden;"&gt;&lt;/div&gt;
 &lt;!--br--&gt;
 &lt;div style="top:-26px;height:1px;left:1px;width:15px;position:relative;width:15px;height:1px;background-color:white;overflow:hidden;"&gt;&lt;/div&gt;
 &lt;/div&gt;&lt;!--/container--&gt;
 &lt;/body&gt;

Also in #CSS _↴

Any way to break out of parent div attributes in IE with absolute position?Changing Frame Colors make background semi transparent (not content)

Success!

Help @Ultimater spread the word by sharing this article on Twitter...

Tweet This

[RESOLVED] weird IE DIV positioning and sizing

3 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

[RESOLVED] weird IE DIV positioning and sizing

3 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

3 Comments(s) _↴

Also in #CSS _↴