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.

[Mythotical]

Not sure but play with the height a bit, also, make sure your buttons have a transparent background with no pixels above or below it.

[Tact7626]

thank you for your reply, Steve.

I think i will play with the height a bit more after turning off overflow:hidden. because if i leave it on, it will shrink, but the image will stay put and not fix itself. and the wierd thing was, when i specified height without overflow, the div would basically not even obey. >.<


and i'm not understanding your second tip. if you mean, make sure there isn't transparent space in my gif, then yes. i'm sure there is no transparent space in my gif creating that space. i don't understand how adding or taking away the bg of the gif would help. i just know that i put one there because the text will look ugly if i try to make a transparent gif because the text is so small and gif's can't do alpha layers. so i kinda need it. once the buttons are in position, you won't be able to tell the diffrence. but i can't put them in position yet because the positions between IE and FF don't match.

so i'm trying to get IE to match FF and i can't figure out why it won't.

i was wondering what kind of doctype vbulletin uses. maybe some custom one. cause i know a doctype can change the way certain css/html behaves. hmm...







EDIT!!::

I have an update. (didn't want to make a double post)

I solved the problem! here's what i did. after testing a LOT of diffrent possible solutions, I then looked up what i can do to the image itself. since nothing i do to the div was working at all. and after a couple attempts at margin and positioning, the winner ended up being this one.

<img src="images/style/brown/edit.gif" alt="$vbphrase[edit_delete_message]" border="0" style="vertical-align:top;" />

it should be in bold. i never though i could do style inside an image itself!! i'm glad i can. otherwise, i'd never have solved this. ;_;


i hope this helps other people too.


check it out. i'm so happy i'm finally done with this.


this is the control in the postbit. looks like a crucifix nail to show what our Lord Jesus went through to save us all. ;_;

nail was done by my friend, Omega. (owner of the site). I just sliced it and coded it into the vb.

[cyberphr]

You haven't used a CSS.

Use an element in the image, for example:

.yourimage {
display: block;
}

[Tact7626]

really? i put this in the image tag. i thought it was css. plus it worked. lol

style="vertical-align:top;"

you're idea might work too, but since i fixed it already, i've no need to apply it. but i will remember it though since that's better than doing this for multiple images. O_o