Horizontal menu's drop down causing problems in IE 6

**ebenezer2009** · 10-22-2009, 04:59 PM

Hello,
I need some serious help. I am trying to find an hack for my horizontal menu with drop downs on IE 6, the site works fine for IE 7, Firefox and Opera. Can someone please help me out? I would really appreciate any help.
Here is my code:

CSS code:

HTML Code:

.top-nav{width:999px;}
.horizontal-nav{border:none; border:0px; margin:0px; padding:0px; font-family:interstate,san-serif; font-size:14px; height:33px; width:741px; float:left;}
.horizontal-nav ul{background:#15135f; height:33px; list-style:none; margin:0; padding:0;}
.horizontal-nav li{padding:0; position:relative; list-style:none; margin-top:5px; float:left; display:block; background: transparent url(../../images/top-nav-bar.gif) no-repeat; line-height:22px; text-decoration:none;}
.horizontal-nav li a{color:#ffffff; display:block; font-weight:normal; margin:0px; text-align:center; text-decoration:none; display:block; padding:0px 20px 0 20px;}
.horizontal-nav li a:hover, .horizontal-nav ul li:hover a{background:url("../../images/pointer.gif") bottom center no-repeat; height:28px; color:#a4caf5; text-decoration:none;}
.horizontal-nav li ul{ display:none; height:auto; padding:0px; margin:0px; border:0px; position:absolute; width:170px;}
.horizontal-nav li:hover ul{border:solid 1px #bfdfee; display:block; background-color:#FFFFFF;}
.horizontal-nav li li {background:url('../../images/dropdown-arrow.gif') left center no-repeat; display:block; float:none; margin-left:15px; padding:0; line-height:28px;}
.horizontal-nav li:hover li a, #current ul li a{background:none; color:#666666;}
.horizontal-nav li ul a{display:block; font-size:12px; font-style:normal; margin:0px; padding:0px 0px 0px 15px; text-align:left;}
.horizontal-nav li ul a:hover, .horizontal-nav li ul li:hover a{border:0px; color:#912222; text-decoration:none;}

HTML code:

HTML Code:

<div class="top-nav">
<div class="horizontal-nav">
<li><a href="link1.html">Horizontal Menu</a>
<ul>
<li><a href="dropdown.html">Drop Down 1</a></li>
<li><a href="#">Drop Down 2</a></li>
<li><a href="#">Drop Down 3</a></li>
</ul>
</li>
</div></div>

Everything works fine until the pointer image is called. The only problem is the drop down on IE 6. I tried adding z-index, but that didnt help.

Thank you so much for your help.

**jscheuer1** · 10-23-2009, 09:46 AM

This would be easier to diagnose if we had a link to the live page:

Please post a link to the page on your site that contains the problematic code so we can check it out.

**smrnsmile** · 10-23-2009, 10:00 AM

the css hack for IE 6 that u can use is:



example:

**stringcugu** · 10-23-2009, 11:45 AM

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0052)http://www.xs4all.nl/~peterned/examples/cssmenu.html -->
<HTML><HEAD><TITLE>whatever:hover cssmenu</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<STYLE type=text/css>BODY {
BEHAVIOR: url("../htc/csshover.htc")
}
 {
FONT-SIZE: 12px; FONT-FAMILY: arial,tahoma,verdana,helvetica
}
UL {
BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; BORDER-RIGHT-WIDTH: 0px
}
LI {
BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; BORDER-RIGHT-WIDTH: 0px
}
A {
BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; BORDER-RIGHT-WIDTH: 0px
}
UL {
BORDER-RIGHT: #9d9da1 1px solid; BORDER-TOP: #9d9da1 1px solid; BACKGROUND: white; BORDER-LEFT: #9d9da1 1px solid; WIDTH: 150px; BORDER-BOTTOM: #9d9da1 1px solid; LIST-STYLE-TYPE: none
}
LI {
PADDING-RIGHT: 1px; PADDING-LEFT: 26px; Z-INDEX: 9; BACKGROUND: url(images/item_moz.gif) no-repeat; PADDING-BOTTOM: 1px; PADDING-TOP: 1px; POSITION: relative
}
LI.folder {
BACKGROUND: url(folder.gif) no-repeat
}
LI.folder UL {
LEFT: 120px; POSITION: absolute; TOP: 5px
}
UNKNOWN {
LEFT: 140px
}
A {
BORDER-RIGHT: white 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: white 1px solid; PADDING-LEFT: 2px; FONT-WEIGHT: bold; PADDING-BOTTOM: 2px; BORDER-LEFT: white 1px solid; WIDTH: 100%; COLOR: gray; PADDING-TOP: 2px; BORDER-BOTTOM: white 1px solid; TEXT-DECORATION: none
}
UNKNOWN {
WIDTH: auto
}
LI A.submenu {
BACKGROUND: url(on1.gif) no-repeat right 50%
}
A:hover {
BORDER-LEFT-COLOR: gray; BORDER-BOTTOM-COLOR: gray; COLOR: black; BORDER-TOP-COLOR: gray; BACKGROUND-COLOR: #bbb7c7; BORDER-RIGHT-COLOR: gray
}
LI.folder A:hover {
BACKGROUND-COLOR: #bbb7c7
}
LI.folder:hover {
Z-INDEX: 10
}
UL UL {
DISPLAY: none
}
LI:hover UL UL {
DISPLAY: none
}
LI:hover UL {
DISPLAY: block
}
LI:hover LI:hover UL {
DISPLAY: block
}
</STYLE>
<META content="MSHTML 6.00.2800.1498" name=GENERATOR></HEAD>
<BODY>
<UL id=menu>
<LI><A href="http://www.xs4all.nl/~peterned/examples/cssmenu.html#">lorem </A>
<LI class=folder><A class=submenu 
href="http://www.xs4all.nl/~peterned/examples/cssmenu.html#">adipiscing </A>
<UL>
<LI><A href="http://www.xs4all.nl/~peterned/examples/cssmenu.html#">dolor 
</A>
<LI class=folder><A class=submenu 
href="http://www.xs4all.nl/~peterned/examples/cssmenu.html#">consectetuer</A> 
<UL>
<LI><A href="http://www.xs4all.nl/~peterned/examples/cssmenu.html#">elit 
</A>
<LI><A href="http://www.xs4all.nl/~peterned/examples/cssmenu.html#">ipsum 
</A>
<LI><A href="http://www.xs4all.nl/~peterned/examples/cssmenu.html#">Donec 
</A></LI></UL>
<LI><A 
href="http://www.xs4all.nl/~peterned/examples/cssmenu.html#">vestibulum 
</A></LI></UL>
<LI class=folder><A class=submenu 
href="http://www.xs4all.nl/~peterned/examples/cssmenu.html#">consectetuer</A> 
<UL>
<LI><A href="http://www.xs4all.nl/~peterned/examples/cssmenu.html#">elit 
</A>
<LI><A href="http://www.xs4all.nl/~peterned/examples/cssmenu.html#">ipsum 
</A>
<LI><A href="http://www.xs4all.nl/~peterned/examples/cssmenu.html#">Donec 
</A></LI></UL>
<LI><A href="http://www.xs4all.nl/~peterned/examples/cssmenu.html#">sit amet 
</A></LI></UL></BODY></HTML>

**ebenezer2009** · 10-23-2009, 04:46 PM

Thank you guys.
My drop down works across all browsers. But there is a minor issue...
I created a seperate css file for IE 6. When I reference the file in my html page as

Code:

<![if (IE 6) | (IE 5)]>
	<link rel="stylesheet" href="include/css/main_ie6.css" media="screen" />
<![endif]>

The position of the dropdown messes up for Opera, but looks fine for other browsers. If I place the code within each html page w/o the external css file. It works fine for Opera and IE6, absolutely no issues. Any ideas?

Also based on Stringcugu's comment, I used the "csshover.htc" file. Does this file break the positioning for Opera. I am confused because the calling of the file is within the IF tags for IE 6

Code:

<!--[if (IE 6) | (IE 5)]>
	<style type="text/css">
    	body {
		behavior:url("include/css/csshover.htc");
	}
    </style>
<![endif]-->

This is not a big deal, but would be nice to understand if anyone knows what's messing Opera browser. Plus it would be good to have an external css file for IE6, rather than adding code in all html pages.

Any help would be greatly appreciated.

**jscheuer1** · 10-23-2009, 05:15 PM

First you should use:

Code:

[if lt IE 7]

for this, which targets all IE browsers 5 through 6 including sub versions and sub sub versions of which there were many in version 5. Not:

Code:

[if (IE 6) | (IE 5)]

which may be invalid due to the spaces around the | character.

The way you have it now (in your post) though, if it is valid, the first comment block is accessible (because it is 'downlevel', no -- in the comment lines) to all browsers except IE browsers that are not exactly versions 5 or 6. The second one is accessible only to IE exact versions 5 and 6.

If your code in the first block is not being read by Opera there is something wrong with the code contained in it or linked to in it.

The code in the second block will be ignored by Opera and all others not included by the conditions, by all if the conditions are invalid.

See also:

http://msdn.microsoft.com/en-us/libr...12(VS.85).aspx

for information on these conditional comments.

**ebenezer2009** · 10-23-2009, 05:35 PM

Thanks John. Your comment makes sense. I found my mistake, I did not code it right. I missed "--" in the if statement.

Works great now.

Thanks again everyone!

**ebenezer2009** · 10-27-2009, 09:48 PM

Ok I am back with another issue

It is with the same code in my first comment. But I am trying to add a 10 px margin in under the last item in the drop-down list. I added an extra code

Code:

.add-white-space{margin-bottom:10px;}

and the html code looks like:

Code:

<div class="top-nav">
<div class="horizontal-nav">
<li><a href="link1.html">Horizontal Menu</a>
<ul>
<li><a href="dropdown.html">Drop Down 1</a></li>
<li><a href="#">Drop Down 2</a></li>
<li class="add-white-space"><a href="#">Drop Down 3</a></li>
</ul>
</li>
</div></div>

This works fine in IE 6 and Firefox. I am having issue with IE 7. When I hover over other links, the white space disappears and the drop down jumps up. Is this the right way to add white space under the last time in the list?

Thanks.

**jscheuer1** · 10-28-2009, 08:08 AM

I'd still like a link to the page before giving actual advice on the styles.

Please post a link to the page on your site that contains the problematic code so we can check it out.

**boogyman** · 10-29-2009, 04:01 AM

Originally Posted by ebenezer2009

Ok I am back with another issue

It is with the same code in my first comment. But I am trying to add a 10 px margin in under the last item in the drop-down list. I added an extra code

Code:

.add-white-space{margin-bottom:10px;}

and the html code looks like:

Code:

<div class="top-nav">
<div class="horizontal-nav">
<li><a href="link1.html">Horizontal Menu</a>
<ul>
<li><a href="dropdown.html">Drop Down 1</a></li>
<li><a href="#">Drop Down 2</a></li>
<li class="add-white-space"><a href="#">Drop Down 3</a></li>
</ul>
</li>
</div></div>

This works fine in IE 6 and Firefox. I am having issue with IE 7. When I hover over other links, the white space disappears and the drop down jumps up. Is this the right way to add white space under the last time in the list?

Thanks.

you are forcing the browser into quirks mode by having list-items as a direct child of a div. If you want a list that displays horizontally, you could possibly use

HTML Code:

<ul id="site-nav" class="list-horizontal">
   <li><a href="">text</a></li>
   <li><a href="">text</a></li>
   <li><a href="">text</a></li>
</ul>

Code:

ul#site-nav {list-style-type:none}
ul.list-horizontal {display:inline}

Thread: Horizontal menu's drop down causing problems in IE 6

Thread Tools

Search Thread

Horizontal menu's drop down causing problems in IE 6

The Following User Says Thank You to stringcugu For This Useful Post:

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions