CODEWITHSUNDEEP
csslistinternet-explorer-8alignment
Neha Raje
Neha Raje

Reputation: 357

Problem with IE8 Horizontal list

I have a menu bar..it appears correctly(horizontal) in mozilla and chrome but appears vertical in IE8. how can i make it horizontal using css

here is the html code

<div id="navigation">
    <div id="myjquerymenu" class="jquerycssmenu">
        <br/>
        <ul>
            <li class="txtfont"><a href="#IMAGE#">Manage Image</a></li>
            <li class="txtfont"><a href="#">Manage Menu</a>
            <ul>
                <li class="txtfont"><a href="#PMENU#">Manage Parent Menu</a></li>
                <li class="txtfont"><a href="#MENU#">Manage Sub Menu</a></li>
                <li class="txtfont"><a href="#SUBMENU#">Manage Sub Sub Menu</a></li>
            </ul>
            </li>
            <li class="txtfont"><a href="#">Manage Content</a>
            <ul>
                <li class="txtfont"><a href="#ML#">Main Content</a></li>
                <li class="txtfont"><a href="#NEWS#">News</a></li>
                <li class="txtfont"><a href="#ANN#">Announcements</a></li>
            </ul>
            </li>
                <li class="txtfont"><a href="#FAQ#">Manage FAQ</a></li>
                <li class="txtfont"><a href="#SETTINGS#">Manage Settings</a></li>
                <li><a href="#logout#&action=logout">Log Out</a></li>
        </ul>
    </div>
</div>

The css code is as below:

#navigation { height: 80px; width:200%; position: relative; padding-top:10px; padding-left:200px; float:none; font-size:12px; font-family: "Century Gothic"; font-weight:bold; }
.jquerycssmenu{

font-size:12px;
font-family: "Trebuchet MS", "sans-serif";
/*padding-left: 0px; offset of tabs relative to browser left edge*/
margin-top:25px;
color:#FFFFFF;
font-weight:normal;
border:#000000;

}

.jquerycssmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.jquerycssmenu ul li{
position: relative;
display: inline;
float: left;
border-bottom-color:#000000;
}

/*Top level menu link items style*/
.jquerycssmenu ul li a{
display: block;
padding: 6px 7px 6px 7px;
min-width:70px;
margin-right: 6px; /*spacing between tabs*/
border: 1px solid #000000;
border-bottom-width: 1;
color:#FFFFFF;
text-decoration: none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
background-color:#330066;
/*background-color:#99CC00;*/
text-align:center;
/*background: url(../../images/admin/images/menu_bg.jpg);*/
background-color:#330066;
behavior: url(border-radius.htc);
}

.jquerycssmenu ul li a:hover{
background:#663399;
}

/*1st sub level menu*/
.jquerycssmenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
padding-top:0px;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.jquerycssmenu ul li ul li{
display: list-item;
float: none;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
font-family: "Trebuchet MS", "sans-serif";
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jquerycssmenu ul li ul li ul{
top: 0;
display: list-item;
float: none;
font-family: "Trebuchet MS", "sans-serif";
}

/* Sub level menu links style */
.jquerycssmenu ul li ul li a{

font-family:"Trebuchet MS", "sans-serif";
font-size:13px;
font-weight:normal;
width: 160px; /*width of sub menus*/
background-color:#330066;
color:#FFFFFF;
padding: 6px 5px;
margin: 0;
border-top-width: 1;

-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 1px;
}

.jquerycssmenu ul li ul li a:hover{ /*sub menus hover style*/
background:#663399;
color: #ccc;
}

Upvotes: 2

Views: 10633

Answers (2)

clairesuzy
clairesuzy

Reputation: 27624

Your problem as described is not evident in IE8.. for me in IE8 using the code as posted (adding the missing closing tags and another menu level) the menu is horizontal

however I've tidied up the code as there was a large horizontal scroll in all browsers and "sticky" hover bugs in IE7 so maybe there's a difference somewhere, that will fix IE8 for you too

Example Fiddle : here

This works (as in it looks the same, I'm not sure if it's your exact intention) - in all browsers tested in

Upvotes: 1

wdm
wdm

Reputation: 7189

Since there is no code to analyze at this point in time, here are my thoughts...

If you're using display: inline-block; I know this doesn't work in IE7. However, it should work in IE8, FF, Chrome.

You may want to try float: left; on the menu items to see if that fixes your problem.

Upvotes: 1

Related Questions