Menu
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>
202
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.
120
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>
3
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
