SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Evangelist
    Join Date
    Mar 2003
    Location
    Melbourne, Australia
    Posts
    463
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    inline list float: left, ie good, ff bad

    hi all

    i'm just having a bit of an issue with an inline list
    it's meant to display four columns aligned to the left
    in firefox, the first row shows up how i want it to, but the second row starts from the third column, i've tried increasing padding, margins, etc. but nothing
    this also means that the third item of the second row is pushed onto the third row

    it's prolly better explained by actually looking at the page
    page with all css inline

    it looks exactly how i want it to in internet explorer

    it doesn't matter how many items are in the second row, the first one always starts from the third column

    thanks
    dave

  2. #2
    SitePoint Wizard drhowarddrfine's Avatar
    Join Date
    Aug 2005
    Posts
    3,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    See if fixing these errors does anything.

  3. #3
    Worship the Krome kromey's Avatar
    Join Date
    Sep 2006
    Location
    Fairbanks, AK
    Posts
    1,621
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah, I'm familiar with this "problem" with FF. It's actually a symptom of IE's borked box model. The problem is that your first two elements in the first row are slightly taller than the others, so when FF floats the second row it's aligning it off of the bottom of the second element of the first row. This is actually the proper behavior for this situation, according to the CSS box model.

    Clear as mud now?

    To see what I'm talking about, give each of your <li> elements a border; you'll see that the first two are taller.

    To fix this, I would give each <ul> element a fixed height. Or use a "clearer" between each <ul>, e.g.
    Code:
    </ul>
    <div style="height: 1px; clear: both;"></div>
    <ul style="...">

  4. #4
    SitePoint Evangelist
    Join Date
    Mar 2003
    Location
    Melbourne, Australia
    Posts
    463
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hey thanks kromey
    not quite right, but the answer did lie in your code

    just needed to add clear: both to the ul style

    btw drhowarddrfine, those errors were only there because i saved the paged with firefox
    it obviously saves the actual output, rather than what is actually sent by the server
    also, i don't think xhtml errors usually mess with css issues too much

    thanks again
    dave

  5. #5
    Worship the Krome kromey's Avatar
    Join Date
    Sep 2006
    Location
    Fairbanks, AK
    Posts
    1,621
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Heh, yeah, that's much simpler than what I suggested, isn't it. Too tired to get out of old ruts (the code I posted is my all-purpose fix-it for this problem, didn't bother thinking through the specifics of your exact sitch to see that much more elegant solution).


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
  •