Internet Explorer showing list vertically when it should be displayed horizontally

Lleoun · 12-01-2010, 05:49 PM

Hi all,

I've got a list of 3 buttons that need to display horizontally. All's good in FF but IE is stacking them directly on top of one another. My code for the list items is bellow.

Thanks for your help

Code:

<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 a {
            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;}
  </style>
  
  </head>
  <body>

    <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>

Excavator · 12-01-2010, 07:59 PM

Hello Lleoun,
The first thing you should to is fix the errors in your code. Run it through the validator and see what it says. Both CSS and HTML validator links in my signature.

Have a look at a tabbed button menu demo I have. Maybe it will help you.

Shaka Zorba · 12-02-2010, 11:54 AM

Code:

<style type="text/css"> 
         
         
              #navigation { 
           list-style: none;
            margin: 0px 0px 0px 278px;
            padding: 0;
            text-align:left;
            z-index:1;    
       
        }

        #navigation li {
	display: -moz-inline-stack;
        display: inline-block;
	zoom: 1;
        *display: inline;


        }

        #navigation a {
            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;}
  </style>
  
  </head>
  <body>

    <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>