IE7 Padding Bug

Hi guys,

Today I had to make a button in three pieces because it has a particular gradient across it and will be of varying sizes depending on the text inside. Anyway I used the old span inside a hyperlink trick and then stitched the end of the button to it.

Anyway, as usual looked great in all browsers except IE7 where the tail end of the button was pushed up as though it didn’t have enough padding on the top.

You can see my code below, but you can also see that I have had to make a html* hack just on the button_tail element which just makes no sense. What I don’t understand is why the tail would need any more/less padding than the main button span, both have text inside them ( the tail a nbsp;) and both are the same height. I inspected both with IE dev bar and they seem to have identical padding and height.

My html:

<a onclick="location = '<?php echo str_replace('&amp;', '&', $checkout); ?>'" class="button"><span><?php echo $button_checkout; ?></span></a><span class="button_tail">&nbsp;</span>

And my css:

.button {
	padding-left: 23px;
	display: inline-block;
	background: url('') top left no-repeat;
        text-decoration: none;
.button span {

        display: inline-block;
	background: url('') top repeat-x;

background:url('') top no-repeat;

html* .button_tail
           padding-top:13px;        // WHY??????  Shouldn't it be 15 like the other span?


Have you tried floating the spans together instead of using display:inline-block where whitespace can occur?

Can you give us the straight up HTML (not the PHP ridden one) that comes from a browser sourcecode? View-Source.

A link would be preferable if that floating suggestion doesn’t work :).

<a onclick=“” class=“button”><span>Some Text Here</span></a><span class=“button_tail”> </span>

Did you try the floating?