Results 1 to 10 of 10

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

  1. #1
    Join Date
    Oct 2009
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Unhappy Horizontal menu's drop down causing problems in IE 6

    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.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,136
    Thanks
    44
    Thanked 3,231 Times in 3,192 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Oct 2009
    Location
    Mumbai
    Posts
    17
    Thanks
    2
    Thanked 3 Times in 3 Posts

    Default

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

    <!--[if IE 6]>
    <style>
    /*<![CDATA[*/

    "your css code goes here as according to ur IE6 browser for that particular div and place this hack before </head>."

    /*]]>*/
    </style>
    <![endif]-->


    example:
    <!--[if IE 6]>
    <style>
    /*<![CDATA[*/

    .top-nav{width:850px;}

    /*]]>*/
    </style>
    <![endif]-->

  4. #4
    Join Date
    Aug 2009
    Posts
    92
    Thanks
    0
    Thanked 9 Times in 9 Posts

    Default

    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>
    Last edited by jscheuer1; 10-23-2009 at 02:59 PM. Reason: format code

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

    ebenezer2009 (10-23-2009)

  6. #5
    Join Date
    Oct 2009
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    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.

  7. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,136
    Thanks
    44
    Thanked 3,231 Times in 3,192 Posts
    Blog Entries
    12

    Default

    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.
    Last edited by jscheuer1; 10-23-2009 at 06:20 PM.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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

    ebenezer2009 (10-23-2009)

  9. #7
    Join Date
    Oct 2009
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    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!

  10. #8
    Join Date
    Oct 2009
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    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.

  11. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,136
    Thanks
    44
    Thanked 3,231 Times in 3,192 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  12. #10
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    Quote Originally Posted by ebenezer2009 View Post
    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}

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •