ansaurus

Question

CSS: Horizontal UL where LI contains a TABLE. Possible?

Answer 1

+1 A:

Set display: inline-block; on your LI elements; that should do it nicely. It doesn't really work in Firefox 2, but nobody uses Firefox 2 anymore. You'll need to specify a doctype to get it to work in IE.

<!DOCTYPE html>
<html>
  <head>
    <style type='text/css'>
      #navlist li {
        display: inline-block;
        zoom: 1;
        *display: inline;
        list-style-type: none;
        vertical-align: middle;
      }
    </style>
  </head>
  <body>
    <ul id='navlist'>
      <li>TEST</li>
      <li>TEST2</li>
      <li>
        <table style='border:1px solid black'><tr><td>TEST</td></tr></table>
      </li>
      <li>TEST3</li>
      <li>
        <table style='border:1px solid blue'><tr><td>TEST</td></tr></table>
      </li>
      <li>
        <table style='border:1px solid green'><tr><td>TEST</td></tr></table>
      </li>
    </ul>
  </body>
</html>

Chris Heald 2010-09-15 14:29:18

This doesn't work in ie7, you end up with a vertical list.

Jeremy Goodell 2010-09-15 14:31:09

Let me get some coffee and try to get my brain started and I'll figure out exactly how I've solved this in IE7 in the past. :)

Chris Heald 2010-09-15 14:34:08

In IE6 (and probably IE7 by the sound of it) you can only apply `display:inline-block` to elements that were originally inline, like `<span>`.

DisgruntledGoat 2010-09-15 14:35:05

Remembered it -- you have to force hasLayout, and then set it back to display:inline for IE only. See my edit. Friggin' IE.

Chris Heald 2010-09-15 14:36:14

Yes, I just got this to work through trial/error in FF3 using inline-block, though I put it on DIVs inside the LI. I swear I tried it on the LI themselves before.

Tim Reynolds 2010-09-15 14:36:39

This explains how to get it working in IE: (add zoom:1 and *display:inline to css) http://grasshopperpebbles.com/css/css-inline-block-ie7-hack/

Tim Reynolds 2010-09-15 14:42:35

Tested and working in my page. Thanks!

Tim Reynolds 2010-09-15 14:56:50

Answer 2

A:

Well, this seems too easy to be true, but I tried it and it worked in FF. IE still displays half the tags on the second line, but it could be a simple fix. All I did was add float: left to the styles for the three tables.

<html>
    <body>
    <style type='text/css'>
     #navlist li{
        display:inline;
        list-style-type:none;
        float: left;

        }
    </style>
        <ul id='navlist'>
            <li>TEST1</li>
            <li>TEST2</li>
            <li>
                <table style='border:1px solid black; float: left;'><tr><td>TEST</td></tr></table>
            </li>
            <li>TEST3</li>
            <li>
                <table style='border:1px solid blue; float: left;'><tr><td>TEST</td></tr></table>
            </li>
            <li>
                <table style='border:1px solid green; float: left;'><tr><td>TEST</td></tr></table>
            </li>
        </ul>
    </body>
    </html>

Jeremy Goodell 2010-09-15 14:29:24

Ok, got IE working by adding float: left to the li style as well.

Jeremy Goodell 2010-09-15 14:33:06

Answer 3

A:

Yes it's because tables are by default block elements (well, actually display:table but it acts in a similar manner). If your tables are very simple then adding display:inline to them may work.

Otherwise your best bet is to float each list element to the left:

#navlist li {
  float: left;
  list-style-type:none;
}

DisgruntledGoat 2010-09-15 14:34:02

Answer 4

A:

I'd suggest applying a set of drop-down menu type styles to your display, this does carry the disadvantage of complicating your mark-up slightly, but makes it easier to hide/display the tables at appropriate times. It also lets you have larger than one-row/one-cell tables.

If you need them to be visible at all times, though, then this approach isn't applicable. Regardless, I've posted a demo of my suggestion on jsbin.com

David Thomas 2010-09-15 14:37:01

ansaurus

tags:

views:

answers:

CSS: Horizontal UL where LI contains a TABLE. Possible?

related questions