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. Link to comment https://forums.phpfreaks.com/topic/131013-s-arent-being-displayed-inline/ 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;} Link to comment https://forums.phpfreaks.com/topic/131013-s-arent-being-displayed-inline/#findComment-680165 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. Link to comment https://forums.phpfreaks.com/topic/131013-s-arent-being-displayed-inline/#findComment-680351 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 Link to comment https://forums.phpfreaks.com/topic/131013-s-arent-being-displayed-inline/#findComment-680604 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. Link to comment https://forums.phpfreaks.com/topic/131013-s-arent-being-displayed-inline/#findComment-681072 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 Link to comment https://forums.phpfreaks.com/topic/131013-s-arent-being-displayed-inline/#findComment-681442 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.