SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    IE7: Floating a span Inside an h1

    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.

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

    Code css:
    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. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,801
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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.

  3. #3
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    You could just AP the span {right:0;}. Or try giving the h1 haslayout {width:100&#37;;}

  4. #4
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.

  5. #5
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Floated content should come first in the source (i.e. ahead of any other text).

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.

    Code:
    <!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.

  7. #7
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I never cease to be amazed by my selective ignorance. Of course floats should come first. What was I thinking? Thanks for the suggestions.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •