View Full Version : layered divs too high in IE

03-22-2005, 03:38 PM
ok, so i've been having this problem which only seems to occur in IE and not firefox. for some reason, when i position a div containing an image over the top of another image to get a layer effect (using relative positioning) it all screws up in IE, and the div always comes out twice as high as it needs to be, no matter whether i constrain its size or not, or whether i constrain the size of whatever is holding it. anyway, here is the code:

<tr><td><img src="images/buttons/base2.gif" name="btn1" alt="button" />
<div class="overlay"><a onMouseOver="btn1_act(); env_act()" onMouseOut="btn1_in(); env_in()"><img src="images/buttons/env.gif" name="b_env" alt="environments" /></a></div></td></tr>

<tr><td><img src="images/buttons/base.gif" name="btn2" alt="button" />
<div class="overlay"><a onMouseOver="btn2_act(); cha_act()" onMouseOut="btn2_in(); cha_in()"><img src="images/buttons/cha.gif" name="b_cha" alt="characters" /></a></div></td></tr>


and the overlay style:

div.overlay {
position: relative;
left: 0;
top: -60;
height: 0;

the height : 0 thing is what i used to make it all fit in in firefox, dont ask me why but it made it work. the only question is, why doesnt it work in IE?
if anyone has a solution to this (besides absolute positioning), it would be greatly appreciated.