SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)

    Using display:table on a list

    So much for saying something is easy ... either it isn't easy, or I'm missing something blindingly obvious ...

    I want to change a bulleted list (nav menu) so that it becomes a horizontal list, stretched to fill the full width available with even spacing around each item. Some items have much longer labels than others, so a set width is not going to work.

    Aha, I think, that sounds just the job for display:table, so I set up a proof-of-concept page (http://getdown.org.uk/sitepoint/display-table.htm), but it's not working how I wanted it to. It's just stacking one list item on top of another, and appears to be completely ignoring the table stuff. Compatibility tables tell me that this should work on IE8, so I assume there's something I've done wrong...

    Can anyone see my mistake? Or have I completely misunderstood how it is supposed to function?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi Stevie,

    Its stacking horizontally for me ok in Chrome and Firefox. It won't work in IE8 without a doctype though

  3. #3
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,889
    Mentioned
    74 Post(s)
    Tagged
    6 Thread(s)
    Looks good on this Nexus 7
    Learn how to be ready for The New Move to Discourse

    How to make Make Money Now with a *NEW* look

    Be sure to congratulate Wolfshade on earning Member of the Month for August 2014

  4. #4
    SitePoint Enthusiast Cory R's Avatar
    Join Date
    Mar 2009
    Posts
    94
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, adding a valid doctype will get IE out of quirks mode and into standards mode.
    Coding For You - Code support, requests, discussions, shops, and more!

  5. #5
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Its stacking horizontally for me ok in Chrome and Firefox. It won't work in IE8 without a doctype though
    Quote Originally Posted by Cory R View Post
    Yes, adding a valid doctype will get IE out of quirks mode and into standards mode.
    Fab, thanks! Glad it was such a trivial thing and easy to put right


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
  •