Problem with horizonal dropdown css menu in IE6...

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • jerry101
    New Member
    • Jul 2008
    • 28
    #1

    Problem with horizonal dropdown css menu in IE6...

    Hi,

    I've been working on a horizontal drop down menu today, and I can get it to display perfectly in everything bar IE6.

    Basically instead of them lining up horizontally, they line up vertically instead.

    And this only happens when I don't give the LI in the menu list and fixed width, which I don't want because if I have a fixed width the menu list get's too long due to some words being longer than others and then it doesn't fit on the page!

    the website is currently hosted at www.tri-websites.com

    it will ask for a username & password

    username - trisynergy
    password - fsr

    some people have said it may be because of the csshover.htc file I have in there as it is linked at the top of the page for if IE, but IE7 work's fine with it so I'm not sure if that's the problem!

    the css for it is shown below

    Code:
    /* Begin CSS Drop Down Menu */

#menuh-container
	{
	}

#menuh
	{
    font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:0.8em;
	float:left;
	position:absolute;
	left:0;
	top:0;
	}
		
#menuh a
	{
	text-align: center;
	display:block;
	border: 1px solid #555;
	white-space:nowrap;
	margin:0;
	padding-top: 0.2em;
	padding-left:1em;
	padding-right:1em;
	}
	
#menuh a:link, #menuh a:visited, #menuh a:active	/* menu at rest */
	{
	color: white;
    background-image:url(../images/navbarbgsmall.jpg);
	background-repeat:repeat;
	text-decoration:none;
	height:25px;
	}
	
#menuh a:hover						/* menu on mouse-over  */
	{
	color: white;
	text-decoration:underline;
	}	
	
#menuh a.top_parent, #menuh a.top_parent:hover  /* attaches down-arrow to all top-parents */
	{
    background-image:url(../images/navbarbgsmall.jpg);
	background-repeat:repeat;
	}
	
#menuh a.parent, #menuh a.parent:hover 	/* attaches side-arrow to all parents */
	{
    background-image:url(../images/navbarbgsmall.jpg);
	background-repeat:repeat;
	}

#menuh ul
	{
	list-style:none;
	margin:0;
	padding:0;
	float:left;
	}
	

#menuh li
	{
	position:relative;
	min-height: 1px;		
	vertical-align: bottom;			}

#menuh ul ul
	{
	position:absolute;
	z-index:500;
	top:auto;
	display:none;
	padding: 1em;
	margin:-1em 0 0 -1em;
	}

#menuh ul ul ul
	{
	top:0;
	left:100%;
	}

div#menuh li:hover
	{
	cursor:pointer;
	z-index:100;
	}

div#menuh li:hover ul ul,
div#menuh li li:hover ul ul,
div#menuh li li li:hover ul ul,
div#menuh li li li li:hover ul ul
{display:none;}

div#menuh li:hover ul,
div#menuh li li:hover ul,
div#menuh li li li:hover ul,
div#menuh li li li li:hover ul
{display:block;}

/* End CSS Drop Down Menu */
    any ideas? thanks!
    Tags: None
    • Dormilich
      Recognized Expert Expert
      • Aug 2008
      • 8694
      #2
      IE usually needs a Javascript workaround for the incomplete :hover implementation (:hover works only on anchors)

      edit: your htc file may cover that though…

        Comment

        • jerry101
          New Member
          • Jul 2008
          • 28
          #3
          Originally posted by Dormilich
          IE needs a Javascript workaround for the incomplete :hover implementation (:hover works only on anchors)

          edit: your htc file may cover that though…
          yeah the htc file should work as it's been used before. I'm pretty sure the link to it in the html is fine.

          Code:
          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home | FSR Maintenance</title>
<meta name="keywords" content="FSR Maintenance, Electrical Maintenance , Mechanical Installation, Mechanical Maintenance, Industrial and Commercial Relocation, Crane Services, Mini Crane Hire, Project Management, Health and Safety, NICEIC Approved Company" />

<meta name="description" content="FSR Maintenance provide a complete design and installation through  to maintenance and testing. FSR have over 40 years experience backed up by NICEIC approval and ISO 9001:299 accreditation. Contact Us for a personalised quotation." />
<link rel="stylesheet" type="text/css" href="css/menuh.css" />
<link rel="stylesheet" type="text/css" href="css/layout.css" />
<script src="javascript/equalcolumns.js" type="text/javascript"></script> 
<!--[if lt IE 7]>
<style type="text/css" media="screen">
#menuh{float:none;}
body{behavior:url(css/csshover.htc); font-size:100%;}
#menuh ul li{float:left; width: 100%;}
#menuh a{height:1%;font:bold 0.7em/1.4em arial, sans-serif;}
</style>
<![endif]-->
          I've got it in a folder called css, and that link should be fine as it's the same as any other link to that css folder.

            Comment

            • Dormilich
              Recognized Expert Expert
              • Aug 2008
              • 8694
              #4
              if you've got time to spare, you could try if using the Javascript solves the problem

                Comment

                • jerry101
                  New Member
                  • Jul 2008
                  • 28
                  #5
                  I've actually started doing it using something else, so I've decided to scrap the previous bit I was doing! On a tough time scale so need to keep going with it!

                    Comment

                    • David Laakso
                      Recognized Expert Contributor
                      • Aug 2008
                      • 397
                      #6
                      You appear to be using this menu:
                      CSS Horizontal Drop-Down Menu
                      http://sperling.com/examples/menuh/
                      Functional Web Applications and Web Sites

                      Re-read the instructions for its implementation in IE/6-- particularly as it regards the inclusion of and path for the file csshover.htc. Follow it exactly as he has done and all could be well.

                      It is difficult to give you anymore specific help as you are working on the file; consequently, impossible to hit a moving target. And a locked directory makes it even more difficult.

                        Comment

                        Previous template Next
                        Working...