Where's this space coming from? (CSS question)

[Tact7626]

Hi again. I hope I don't seem annoying with all my questions. (I think this is my 3rd thread O_o)

I tried finding articles and solutiosn online, but none were helpful. The closes match was possibly the box model ie issue. but that's like ie5 only or something. O_o


Anyway. Maybe you guys can help me figure this out. I have like over 2 hours on this. >.<

<div style="
border:1px dotted black; 
width:400px;height:40px;
padding:0px;
margin:0px;
float:right;
background-image:url('http://www.legionofangels.net/forum/images/styles/brown/cruxnail.gif');
background-repeat: no-repeat;
background-position:center;">

<!-- controls -->


<if condition="$post['editlink']">
<img style="display: none" id="progress_$postid" src="$stylevar[imgdir_misc]/progress.gif" alt="$vbphrase[loading_editor_please_wait]" />

<div style="margin-top:0px;padding-top:0px;width:45px;height:17px;border:0px solid red;position:relative;left:25px;float:left;overflow:hidden;">
<a href="$post[editlink]" name="vB::QuickEdit::$post[postid]"><img src="images/style/brown/edit.gif" alt="$vbphrase[edit_delete_message]" border="0" /></a>
</div>
</if>

ok. basically, this part of the control code in the postbit template. mostly just the first button is being shown since all buttons are giving me the exact same problem and ONLY in IE6 (have not tested opera and i pray it works in that lol)


THE PROBLEM:

ok. the problem is that, i have setup margin-top and padding-top to be 0 on both the wrapper div, and divs encasing each button. and yet, there is a space above the image in internet explorer. Firefox displays it as it should. i have borders for easy identification.



here you can see, the red div. you can see my tiny "edit" button inside it. (it has the same bg as the texture of the nail so you might have trouble telling where it starts and where it ends) but its like 49x7 pixels in size. and it's not touching the top as it should.

i need to correct this before i decide to move all the buttons back down to the center of the nail.


here's the correct way in firefox. (i never thought i'd see the day my beloved ie would give me headaches. )



actually. you might technically call this a problem too (if it had that empty space at the bottom on its own, which sometimes you might get), but since i already setup overflow:hidden and specified height and width, it's no problem at all. i'd simply shrink the height, and the div would wrap the button perfectly problem solved.


however. since the space is at the top of the gif, instead of the bottom, (which i've never seen ever! O_o) i have no idea how to fix it! i can't use overflow:hidden and then specify height. border=0 is already applied to the image. margins are set. padding is set. what am i missing?


is the anchor tag adding something? i thought only <p> and <h1> tags had margin problems and stuff. >.<


any help is greatly appreciated. the goal is to get rid of the top space and have the gif touch the top of the outer wrapper div.

thank you for your time.