css - Internet Explorer showing list vertically when it should be displayed horizontally -
i've got list of 3 buttons need display horizontally. all's in ff ie stacking them directly on top of 1 another. code list items bellow.
thanks help
<style type="text/css"> #navigation { list-style: none; margin: 0px 0px 0px 278px; padding: 0; text-align:left; z-index:1; } #navigation li { display: inline-block; } #navigation { display: block; width: 140px; height: 15px; background: url("http://aracelid.110mb.com/boton_rollout_08.png") no-repeat; padding: 10px 0.5em; color: #ffffff; text-decoration: none; font-size:12px; text-align: center; } #navigation a:hover { background: url("http://aracelid.110mb.com/boton_rollover_08.png") no-repeat; } #one, #two,#three {background: url("http://aracelid.110mb.com/boton_rollout_08.png") no-repeat 0px 0px;} #one_div{width:140px;height:36px;} #two_div{width:140px;height:36px;} #three_div{width:140px;height:36px;}
<ul id="navigation"> <li><a href="#" id="one" style="color:#ffffff;text-decoration:none;" ><div id="one_div">one</div></a></li> <li><a href="#" id="two" style="color:#ffffff;text-decoration:none;"><div id="two_div" >two</div></a></li> <li><a href="#" id="three" style="color:#ffffff;text-decoration:none;"><div id="three_div" >three</div></a></li> </ul>
add float:left in navgivation li class..
#navigation li { display: inline-block; float:left; }
Comments
Post a Comment