IE7: Floating a span Inside an h1

HTML & CSS
1

Live example.

I have an h1 that contains text and a span. When I tell the span to float to the right, a lot of space is added in IE7 (see the bottom scrollbar, even though there’s no past the links). I guess this isn’t a huge issue, but dang it’s bothering me.


<h1>Some Header<span><a href="*">Link 1</a><a href="*">Link 2</a></span></h1>



h1   { font-style:italic; }
a    { padding-left:2em;  }
span { float:right; margin-top:-.75em; }

Weird notes: The extra space goes away (not surprisingly) when I get rid of the “float:right” declaration. However, it also goes away when I get rid of the “font-style:italic” declaration. Wtf, mate?

Is this just a bug that I’m going to have to put up with? Even IE6 gets it right.

2

Hi,

If you want the text on the same line in IE7 and under then as Tyssen said all floats must come first in ie7 and under and the text that wraps should follow after. (The actual rule is that floats should displace inline content that is on the same line as the float if that inline text is in the way. Older browsers never did this so its best to say that all floats must be first in the html).

IE has always had italic bugs and in certain circumstances will stretch the page. I would do your page more simply like this.


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link href="styles.css" rel="stylesheet" type="text/css" />
<title>test</title>
<style type="text/css">
h1 {
    font-style:italic;
    text-align:right;
}
span{
    float:left;
    text-align:left;
}
a {
    padding-left:2em;
}
</style>
</head>
<body>
<h1><span>Some Header</span><a href="*">Link 1</a><a href="*">Link 2</a></h1>
</body>
</html>

The header text is floated left so that source order isn’t changed and the links are aligned right by text-align:right on the parent. It’s more robust this way.

3

Floating the links to the left works. God knows why.

…Minor concession:

The live example is obviously a simplified version of what I’m actually doing. As I was applying this fix to the real thing, something else turned up.

Floating the links to the left only works if the padding is also to the left (in the example above, I have padding-left:2em; but on the real site, I used padding-right). In order to fix this, I gave the links padding-left, and then had to give the span a padding-right. Ay carumba.

I’m just going to chalk this up to IE7 sucking, and wait for it to die a creeping, unnoticed death, when IE9, 8, and 6 all have more market share.

4

You could just AP the span {right:0;}. Or try giving the h1 haslayout {width:100%;}

5

I’m on a mac right now, so I cant really check this. But I have experienced a lot of these kinds of “bugs” from IE.

I think the issue comes from the <A> more than anything else. Try a { padding-left:2em; float:left;}

I have absolutely NO idea why a font style would affect positioning. But if anyone else has an insight to this , I would love to know.

6

I never cease to be amazed by my selective ignorance. Of course floats should come first. What was I thinking? Thanks for the suggestions.

7

Floated content should come first in the source (i.e. ahead of any other text).