...

View Full Version : Horizontal menu looks vertical in IE6



ktsixit
03-31-2009, 09:03 AM
Hi all, there's a horizontal menu I'm working on, and it looks ok in all browsers except IE6. Actually in I6
- it looks vertical instead of horizontal
- no hover or active effects are visible
- no padding is applied

It looks awful and I don't understand why. I tested the page in w3c css and xhtml validator and there is no error. Can you help me a littile? The css and html codes are below

html:


<ul class="menu_topmenu">

<li id="current" class="active item1">
<a href="#">
<span>Home</span>
</a>
</li>

<li class="item2">
<a href="#">
<span>Menu Item 1</span>
</a>
</li>

<li class="item2">
<a href="#">
<span>Menu Item 2</span>
</a>
</li>

</ul>

css:


#ja-mainnav, #ja-mainnav ul {
padding: 0;
margin: 0;
font-size:16px;
}

ul.menu_topmenu{
height:84px;
}

#ja-mainnav a {
display: block;
margin: 0;
}

#ja-mainnav li {
float: left;
margin: 0;
padding: 0;
}

#ja-mainnavwrap {
width:100%;
height:194px;
margin:0 auto;
padding:0;
background:url(../images/top_menu_back.jpg) top no-repeat;
}

#ja-mainnav ul, #ja-mainnav li {
list-style: none;
background:none;
}

#ja-mainnav span.separator {
display:none;
}

#ja-mainnav > ul {
margin:0 0 0 158px;
padding-top:11px;
}

#ja-mainnav > ul > li {
height:44px;
margin:0;
padding:0 0 0 2px;
background:url(../images/menu_slicer.jpg) top left no-repeat;
}

#ja-mainnav > ul > li.active {
color: #136cb0;
}
#ja-mainnav > ul > li.active a span {
color: #136cb0;
background:url(../images/menu_active_back.jpg) top left repeat-x;
}

#ja-mainnav > ul > li:hover,
#ja-mainnav > ul > li:active,
#ja-mainnav > ul > li:focus {
}

#ja-mainnav li a {
color: #136cb0;
font-weight: bold;
text-decoration: none;
font-size:16px;
height:44px;
cursor:pointer;
}

#ja-mainnav li a span{
height:39px;
padding:5px 13px 0 13px;
display:block;
background:none;
}

#ja-mainnav li a span:hover{
height:39px;
padding:5px 13px 0 13px;
display:block;
background:url(../images/menu_hover_back.jpg) top left repeat-x;
}

#ja-mainnav ul.menu {
margin: 0;
padding: 0;
float: left;
height:95px;
}

#ja-mainnav ul.menu li {
margin: 0;
padding: 0;
float: left;
display: block;
background: none;
cursor: pointer;
position: relative;
list-style: none;
}

#ja-mainnav ul.menu li a {
margin: 0;
display: block;
color: #136cb0;
font-weight: bold;
line-height: normal;
text-decoration: none;
}

#ja-mainnav ul.menu li a:hover,
#ja-mainnav ul.menu li a:active,
#ja-mainnav ul.menu li a:focus {
color: #136cb0;
}

#ja-mainnav ul.menu li {
margin: 0;
}

#ja-mainnav ul.menu li:hover,
#ja-mainnav ul.menu li.sfhover,
#ja-mainnav ul.menu li.parentsfhover,
#ja-mainnav ul.menu li.parent-activesfhover {
color: #136cb0;
}

#ja-mainnav ul.menu li.active a,
#ja-mainnav ul.menu li.active a:hover,
#ja-mainnav ul.menu li.active a:active,
#ja-mainnav ul.menu li.active a:focus {
color: #136cb0;
}

#ja-mainnav h3 {
display: none;
}

#ja-mainnav .moduletable_menu {
background: none;
margin: 0;
padding: 0;
}

abduraooft
03-31-2009, 09:43 AM
Try

#ja-mainnav a {
/*display: block;*/
float:left;
margin: 0;
}
#ja-mainnav li a span{
height:39px;
padding:5px 13px 0 13px;
/*display:block;*/
float:left;
background:none;
} You may need to set a suitable width to them. A link to your page would help us to track the issue.

ktsixit
03-31-2009, 10:10 AM
ok, your advice worked:) menu items are positioned horizontally now. But still there is none of the hover and active effects working. Also the

#ja-mainnav > ul {
margin:0 0 0 158px;
padding-top:11px;
}
is not working at all too.

abduraooft
03-31-2009, 10:15 AM
IE doesn't support :hover pseudo on any elements other than anchor. Also, it doesn't support child selector > either.

Post your complete code, as the above code doesn't match with your CSS, or a link would would be much better.

ekirzhner
09-22-2011, 12:15 AM
My client is having an issue in IE7 with the navigation menu. Instead of horizontal it showing vertical. Any ideas how to fix it? Thank you!
http://z.bb/website/e6/thank-you2.htm

venegal
09-22-2011, 12:46 PM
Please open new threads for new issues, instead of resurrecting ancient ones.

Your question has already been answered in post #2: Give those floated elements a specific width. The results of auto-width floats are unpredictable in older browsers, see example page: http://css-class.com/test/css/visformatting/floats/floats-width-auto.htm.

If you have further questions, please put them in a new thread.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum