IE float span pushing below

Hi all

Just having a little problem with IE, I need the span to stay online and not push underneath:

<dt>title<span>5*</span></dt>

dt { float:right; width:400px; margin-bottom:1em; }
dt span { float:right; }

FF

IE

-

Any suggestions? :cool:

put title inside a span.

thank webcosmo, don’t really want to add more markup, works great in FF, this must be another IE issue… just wondering if these a simple IE fix??

thanks

Nope, in IE the floated element has to come first, and since hte word title is not floated it will drop the float.

:slight_smile: works great!

<dt><span>5*</span>title</dt>

and since hte word title is not floated it will drop the float.
But it works what do you mean? The title is inside the <dt> which is also float:right.

Thanks :cool:

But it works what do you mean? The title is inside the <dt> which is also float:right.

The word “title” is not floated and therefore in IE7 and under the floated element starts on a new line because floats in IE will always start on the next line down from the static content above.

The specs say that if a float starts on the same line as inline content then the inline content on that single line should be shifted to accommodate this but IE7 and under get this wrong (along with most older browsers (ff3 and older)).

Therefore to satisfy the most browsers possible you should always ensure that your floated content comes first in the html so that the following elements will wrap around the float. :slight_smile:

well explained thanks Paul :slight_smile:

So basically, always put the float first and everything will line up as you want? (just so I understand)

Yes that’s basically it :slight_smile:

Some browsers allow an element that is inlien to come before a float, but for cross browser results (aka IE) placing hte float first is always best (just to clarify :))