IE7 Float left adds element on a new line

Question

This is the html.

<h3 class="accordion-title">
     Lorem ipsum dolor sit amet. 
     <span class="accordion-title-icon plus"></span>
</h3>

And this is the css.

.accordion-title {
    width: 540px;
    padding: 5px;
    margin: 0;
    background-image: none;
    font-weight: bold;
    color: #e1c58a;
    background-color: #2f2c27;
    border: 1px solid #433f38;
}

.accordion-title .accordion-title-icon {
    background-image: url('../img/accordion_icons.png');
    background-repeat: no-repeat;
    width: 11px;
    height: 11px;
    float: right;
    margin-top: 2px;
    margin-right: 2px;

}

.accordion-title .accordion-title-icon.plus {
    background-position: 0 0;
}

.accordion-title .accordion-title-icon.minus {
    background-position: -11px 0;
}

It works fine on Edge as you can see on this example :

But it breaks up on a new line on Internet Explorer 7.

Any ideas?

Update

This is strange, it works if I change the html markup like this :

<h3 class="accordion-title">
   <span class="accordion-title-icon plus"></span>
   Lorem ireum dolor sit amet.
</h3>

Any better ideas?

Answer 1

I'm assuming dropping IE7 is not an option, so here are some suggestions:

1. Try setting the span element to float: left .

2. Or you could let the icon as a block and shift it up with eg margin-top: -25px; .

3. Other solution would require to set the parent to relative positioning and then move the icon absolutely:

    .accordion-title { position: relative ... } .accordion-title .accordion-title-icon { position: absolute; top: 2px; right: 2px ... }