SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    3 Column Layout Trouble with IE7

    Hey Guys,

    I've been working on a three column layout for the first time
    using HTML5 and CSS3 where possible. Everything floats nicely
    in Firefox, Chrome and Safari [ATTACH]see here[/ATTACH] but
    in ie7 the third column breaks and appears below the first
    [ATTACH]see here[/ATTACH]. Below is the CSS I'm using.
    Any ideas as to what I'm doing wrong?

    Thanks in advance.

    M/


    /*============
    Features
    =============*/

    section#features {
    width: 960px;
    padding-top: 120px;
    }

    section#features div {
    float: left;
    margin-right: 5%;
    width:30%;
    }

    section#features div h1 {
    color: #09c;
    font-size: 40px;
    letter-spacing: -1px;
    margin-bottom: 20px;
    }

    section#features div p {
    font-size: 11px;
    line-height: 1.65em;
    letter-spacing: .21px;
    }

    section#features div span {
    color:#333;
    font-weight: bold;
    }

    section#features div p + p {
    margin-top: 1.5em;
    }

    section#features div:nth-child(4){
    margin-right: 0;
    }
    Attached Images Attached Images

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,591
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Perhaps have another try at posting the links above, as they didn't work, but would be quite handy. Ideally, post a live link. Some of those styles won't be recognized by IE7 (and even 8) you realize?

  3. #3
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah I don't know why the links above won't work Ralph.M...but I've attached
    2 screengrabs below the post.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,591
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Without some HTML, CSS and/or screen shots aren't really enough to go on.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    We'd need to see the full html and css to debug.

    If for example you have a missing or corrupt doctype then it's probably the double margin bug on floats which occur in IE6 and under but in ie6+ if in quirks mode (no doctype)


    You seem to have a fixed width wrapper:
    Code:
    section#features {
    width: 960px;
    padding-top: 120px;
    }
    
    section#features div {
    float: left;
    margin-right: 5%;
    width:30%;
    }
    Then you have a column at 30% width and 5% margin. What pixel width is that then exactly ?

    It will be rounded up in IE and may be rounded up too large to fit if all your other columns fill the full width. Use pixel widths for your columns and margins when the parent is in pixel widths.

    Add display:inline to your floats anyway to cure the ie6 double margin bug. It applies to any floats that have side edges adjacent to the containing block and have margins applied on that side.

  6. #6
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @Paul O'B I originally had pixel widths but when that didn't work experimented with
    percentage widths thinking that ie may round percentages more loosely than pixels.
    Anywhoo....you can see the full html/css here 3 Column Test

  7. #7
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    @Paul O'B I originally had pixel widths but when that didn't work experimented with
    percentage widths thinking that ie may round percentages more loosely than pixels.
    Exactly what I was thinking. When you did pixels, why didn't you lower the widths of the boxes until it fit in IE? Then you can use the IE developer toolbar to see if there's maybe a child inside causing the issue.

    When I float three things, I wil use 30% width (instead of 33%) but I wouldn't then also use a 5% margin. I'd either be really careful use no margin or a px margin. Browsers have lots of fun adding two %'s and their total results will not match each other. Esp as Paul pointed out, they are floated inside a fixed-width px container.

  8. #8
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    Ok so anyway I did this, using the code posted above:
    http://stommepoes.nl/test.html

    See the form is sticking out in both FF and IE7.

    Now the broadest width I can get away with is 275px on section div. 276px, IE7 wraps.

    Now, this only happens in IE7... when the margin-right: 45px is a margin.

    Change it to padding-right. Suddenly, Firefox is just as intolerant as IE7.

    This tells me that some child (and I'm strongly suspecting the form) is making that last div wider than you think in IE7. When we use padding, this is added to the total width of the box itself, so 275+45=320px.
    When we use margin, the total width of the box is still 270px, but the amount of space it claims for itself is +45px = 320px. But I'm thinking somehow a wider child is being counted in IE7, meaning that last box is 45px margin + 275px + something from a child stretching the width of that box.

    I'd just make the inputs less wide.

    And I'd ditch the tranny doctype, I dunno what that's doing in there... (has nothing to do with this problem tho)

  9. #9
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @Stomme poes nice one mate. That does the trick. It's a shame I can't broaden
    the width a little more than the 275px though to fill the 960 wrapper. You mentioned
    that you think the form is causing the last div to be wider in IE7. Do you think the
    input & text area both 270px with a 5px border and 5px padding might be the cause?

  10. #10
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    could I add an "if IE" statement to the stylesheet so that I could keep the width
    to 290px for all other browsers or would this be pushing web standards?

    Thanks
    M.

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    I realise you must have changed things since you posted the link but all I see is 3 columns at 275px width and a a 45px right margin all fitting nicely into the 960px width in all browsers.

    You can increase the width of the final column in Firefox because you have removed the last margin of 45px so you have 45px more to play with.

    Code:
     section#features div:nth-child(4) {
    margin-right: 0;
    }
    IE8 (and under) doesn't understand nth-child.

    If you want the last column wider in IE then you will need to add a class to it and remove the right margin.

    I realise you may have already changed the original problem that Stomme was seeing.

  12. #12
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    but all I see is 3 columns at 275px width and a a 45px right margin all fitting nicely into the 960px width in all browsers.
    Yeah that was the smallest I could do and not have wrapping in IE7. The original link was something wider... 300px? Which worked in everyone but IE.

    could I add an "if IE" statement to the stylesheet so that I could keep the width
    to 290px for all other browsers or would this be pushing web standards?
    IE conditional comments in the HTML work fine.

    Though if it were me, I'd reduce the form a bit. Make the inputs somewhat smaller and then see if I could widen those divs.

    Though I like Paul's idea: remove the right-margin on the last guy and more stuff fits in everyone. If you're willing to add a class to that last one, you can do this down to IE6 if you want.

    then if could be
    section div.last {
    margin-right: 0;
    }
    or something. Then less worry about :last-child or :nth-child() not being cross-browser yet.

  13. #13
    Non-Member
    Join Date
    Apr 2004
    Location
    Miami, FL, USA
    Posts
    449
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Guaranteed to work flawlessly in all browsers all the way back to IE3 (and maybe even earlier!):

    HTML Code:
    <table width="100%" cellpadding="0" cellspacing="0" border="0"><tr>
    <td width="33%" valign="top">
    Col 1
    </td>
    <td width="33%" valign="top">
    Col 2
    </td>
    <td width="33%" valign="top">
    Col 3
    </td>
    </tr></table>
    Just sayin.

  14. #14
    SitePoint Addict EarlyOut's Avatar
    Join Date
    Mar 2011
    Location
    Sector R
    Posts
    279
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by transio View Post
    Just sayin.
    Oh, the CSS Taliban will be coming for you real soon. Public flogging won't be enough.

  15. #15
    Non-Member
    Join Date
    Apr 2004
    Location
    Miami, FL, USA
    Posts
    449
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by EarlyOut View Post
    The CSS Taliban will be coming for you
    Yes, wearing their Cascading Silk Shirts and Chiffon Sarong Sets, I'm sure they'll disgrace me in style.

  16. #16
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    inline-block-judo-chop!

  17. #17
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys for the help. There's a few nice options to choose from.
    Gonna try each one and see which works best!

    M.


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
  •