Button jumps down in IE

Hi all,

On I site I’m developing, I have two buttons in my header. In FF, these align nicely next to each other, but in IE the second button jumps down to a new line next to the first one, causing my header to break as you can see here.

 <div class="slide-wrapper">
                <div class="slide-details">
                    <h2>imago voor mensen en merken</h2>
                    <div class="description">
                    <p>Verbeeck + Ujvari specialiseert zich in imagodiensten voor mensen en merken. Aan de hand van onze expertise zorgen onze consultants voor adviezen, oplossingen en training op maat van uw onderneming en uw objectieven.</p>
                    <a class="button" href="/training"><span>ontdek onze trainingen</span></a>&nbsp;&nbsp;<a class="button" href="/consultancy"><span>ontdek onze consultancy</span></a>
                <div class="slide-thumbnail">
                    <img src="/gui/head_imago.png" alt="Verbeeck + Ujvari image consultants"/>
                <div class="clear"></div>

a.button {
background: url(/gui/button_right.png) no-repeat scroll top right; 
display: block;
float: left;
height: 23px;
margin-top: 15px;
margin-right: 20px;
padding-right: 10px;
text-decoration: none;
color: #ffffff;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 11px;
border: 0;
outline: none;
overflow: hidden;
clear: none;
a.button span, div#cnt a.button span {
background: url(/gui/button_left.png) no-repeat; 
display: block;
height: 24px;
padding-left: 10px;

I’ve played around with paddings, clears and overflows in my css, without results… :frowning:

Anyone know how to fix this? Thanks in advance.


Hmm, the buttons look fine in IE to me. Were you referring to obsolete versions of IE?

It’s the staircase bug. There are a number of fixes for it.

It seems this only occurs in <li> elements, which I’m not using. The possible solutions where to float the buttons (which they are), to change display: block to display: inline (which I can’t because the block is needed for the button to work), or to assign a width (which I can’t because of the variable width of text within).

It seems in IE, the links on these buttons don’t work either, only the last part of the button (after the text) is actually clickable.

I’ve checked this in IE7, I’m assuming other (older) versions have the same issue.

Before that, you may want to check for validation errors: http://validator.w3.org/check?uri=http%3A%2F%2Fwww.verbeeck-ujvari.be%2F&charset=(detect+automatically)&doctype=Inline&group=0


The problem is that your span is nested inside a widthless float and has haslayout applied. In Ie6 a widthless float will stretch to 100% of the available space when a child element is in “haslayout” mode. You just need to float the span as well

The element is clickable but you just lose the pointer over the span so reinstate it.

The second button drops because you have 2 non breaking spaces following the first button and IE will always start floats on a new line when following static content. Remove the non breaking spaces and use a margin instead. For semantic sense the anchors should really be in parent block level containers anyway (such as a p element) which themselves would be floated also.

a.button span, div#cnt a.button span {
    background: url(http://www.verbeeck-ujvari.be/gui/button_left.png) no-repeat;
    display: block;
    height: 24px;
    padding-left: 10px;
[B]    float:left;

Remove non breaking spaces:

<a class="button" href="/training"><span>ontdek onze trainingen</span></a> 
<a class="button" href="/consultancy"><span>ontdek onze consultancy</span></a> 

Nice catch Paul, with  . One thing Firebug didn’t show.

Wow, did not know that. It totally fixed the problem and I learned a little something today.

Thanks all for your valuable input!

Thanks :slight_smile: Yes sometimes you just have to get your hands dirty.

Another lesson from the master :slight_smile: