Using display:table on a list

[font=calibri]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?[/font]

Hi Stevie,

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

Looks good on this Nexus 7

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 :cool: