PDA

Click to See Complete Forum and Search --> : [RESOLVED] weird IE DIV positioning and sizing

Ultimater
09-25-2007, 11:42 PM
This renders a lovely white-bordered yellow block in Firefox. How come IE is stumbling on this?

<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>

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?
Centauri
09-26-2007, 12:49 AM
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.
Ultimater
09-26-2007, 12:57 AM
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.
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.

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

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.
Ultimater
09-26-2007, 02:44 AM
For lack of a heightless font, I've found overflow:hidden a better solution.

<body style="background-color:gray;">
<div style="width:17px;height:16px;overflow:none"><!--container-->
<div style="top:0px;height:1px;left:1px;width:15px;position:relative;background-color:white;overflow:hidden;"></div>
<!--br-->
<div style="top:0px;height:1px;left:0px;width:17px;position:relative;background-color:white;overflow:hidden;"></div>
<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;"></div>
<!--br-->
<div style="top:-1px;height:12px;left:0px;width:17px;position:relative;background-color:white;overflow:hidden;"></div>
<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;"></div>
<div style="top:-25px;height:12px;left:2px;width:13px;position:relative;background-color:yellow;overflow:hidden;"></div>
<!--br-->
<div style="top:-25px;height:1px;left:0px;width:17px;position:relative;background-color:white;overflow:hidden;"></div>
<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;"></div>
<!--br-->
<div style="top:-26px;height:1px;left:1px;width:15px;position:relative;width:15px;height:1px;background-color:white;overflow:hidden;"></div>
</div><!--/container-->
</body>