Horizontal menu's drop down causing problems in IE 6 [Archive]

View Full Version : 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:

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

<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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

<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

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



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:

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

[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/library/ms537512(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

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

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

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

and the html code looks like:

<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

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

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