CODEWITHSUNDEEP
htmlcss
jim smith
jim smith

Reputation: 1873

horizontal unordered list

I can do this in 5 seconds with a table but I'm trying to avoid it by using CSS, looks fine in FF but problem is it doesn't work in IE (the second li appears underneath the first li) 

<ul style="list-style-type:none; margin:0px; padding:0px">
   <li style="width:120px; display:table-cell; padding: 1px;"><?=$m['make']?></li>
   <li style="width:30px; display:table-cell;  padding: 1px;"><input id="changemanufacturer" type="checkbox"></li>
</ul>

Upvotes: 5

Views: 14225

Answers (2)

foson
foson

Reputation: 10227

If you're using IE7 or IE8, make sure your DOCTYPE is present so that its not rendering in quirks mode.

Using the HTML4 Strict or HTML5 DOCTYPES worked for me in IE8

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<body>
    <ul style="list-style-type:none; margin:0px; padding:0px"> 
        <li style="width:120px; display:table-cell; padding:1px;">asdf</li> 
        <li style="width:30px; display:table-cell; padding: 1px;">
        <input id="changemanufacturer"  type="checkbox">
        </li>
    </ul> 
</body>
</html>

HTML5: <!DOCTYPE html>

Upvotes: 3

Tom Gullen
Tom Gullen

Reputation: 61727

Don't use table cell. Do:

<li style="width:120px; display:inline; float:left;">Boo!</li>

Of course you should have your CSS external but I'll assume it's just to simplify the question.

Upvotes: 10

Related Questions