vertically aligning an img with a button

I have a tab slider set up using buttons instead of img for links because IE doesnt like to use background offsets unless its a button (unless i did something wrong). Anyway, everything works perfectly except this:


The css for that section is:

#tabs {
text-align: center;
}

#tabs input {
width: 253px;
height: 116px;
border: none;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
	}
	
#tabs #one{
background: url(images/tabphoto.png);
background-position: 0px 0px;
}

#tabs #one.active {
background-position: -253px 0;
	}

	
#tabs #two{
background: url(images/tabdesign.png);
background-position: 0px 0px;
}
#tabs #two.active {
background-position: -253px 0;
	}


#tabs #three{
background: url(images/tabvideo.png);
background-position: 0px 0px;
}
#tabs #three.active {
background-position: -253px 0;
	}

Code (markup):

And the html:

<div id="tabs"><img src="images/bookendleft.png" alt="bookendleft" width="51" height="116" /><input class="tab" type="button" onclick="location.href='#'" id="one"/><input class="tab" type="button" onclick="location.href='#'" id="two"/><input class="tab" type="button" onclick="location.href='#'" id="three"/>
</div>

Code (markup):

I cant figure out why the end image is sitting so much higher than the buttons.
Theres nothing in the body or img section of the CSS causing this behavior because i deleted everything but the tabs section and it still happens.
Any ideas?

 

I am not sure why you decided to use buttons as opposed to regular div's or just styling <a> elements, but in either case. You can solve your problem quite easily:

Add this line to your css:

#tabs img { float:left; }

Code (markup):

And make the following change:

#tabs input {
width: 253px;
height: 116px;
border: none;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
float:left; /* Add this line */
	}

Code (markup):

 

Background position does indeed work in IE. You can apply a background directly to an a element, however, in order to give this element a height or any vertical attribute you will need to set it to display:block or display:inline-block (or float it). Either way, you have to convert any inline element to a block element before adding vertical attributes to it.