jordanwb Posted November 1, 2008 Share Posted November 1, 2008 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> <!-- * { margin: 0px; padding: 0px; } #wrapper { border: 1px solid black; margin: 10px auto 10px auto; width: 75%; } #root_nav_menu { display: table; width: 100%; } .root_nav_item { display: table-cell; list-style-type: none; width: 16.667%; } .sub_nav_menu { } .sub_nav_item { } .center { text-align: center; } --> </style> </head> <body> <div id="wrapper"> <ul id="root_nav_menu"> <li class="root_nav_item"><div class="center">Main</div> </li> <li class="root_nav_item"><div class="center">Verticals</div> </li> <li class="root_nav_item"><div class="center">Horizontals</div> </li> <li class="root_nav_item"><div class="center">Shutters</div> </li> <li class="root_nav_item"><div class="center">Quote</div> </li> <li class="root_nav_item"><div class="center">Contact</div> </li> </ul> </div> </body> </html> Obviously it doesn't work in IE. In every other browser each <li> is displayed in a row. But in IE, each <li> is on it's own row. Quote Link to comment Share on other sites More sharing options...
slapdashgrim Posted November 1, 2008 Share Posted November 1, 2008 use display: inline; like #wrapper ul li {display: inline;} Quote Link to comment Share on other sites More sharing options...
TheFilmGod Posted November 2, 2008 Share Posted November 2, 2008 or if using display: block; simply float all li left or right. Quote Link to comment Share on other sites More sharing options...
BoltZ Posted November 2, 2008 Share Posted November 2, 2008 Add this to your css #wrapper ul li {float:left;} That code makes IE work. Display inline wouldn't work there because it would only display inline for each concurrent elements, hence IE would not work, it worked in FF, because Firefox has compatible code Quote Link to comment Share on other sites More sharing options...
jcombs_31 Posted November 3, 2008 Share Posted November 3, 2008 And get rid of the redundant html classes and divs. Quote Link to comment Share on other sites More sharing options...
BoltZ Posted November 3, 2008 Share Posted November 3, 2008 He may be doing something with them but held off until he could get a fix to his navbar Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.