www.webdeveloper.com
Results 1 to 3 of 3

Thread: csshover.htc menu - IE menu width strange?

  1. #1
    Join Date
    Oct 2007
    Posts
    161

    csshover.htc menu - IE menu width strange?

    I am using csshover.htc to create a <UL> menu. There is an <!--[if IE]> fix in the code, but I'm struggling to discover how to control each menu item's width in IE.... in Firefox, I have set the menu width to 9.055em, however its unclear which element (I have tried all) in the <!--[if IE]> statement to change to adjust the width for IE.

    The <!--[if IE]> code is:

    Code:
    <!--[if IE]>
    <style type="text/css" media="screen">
    body {
    behavior: url(/csshover.htc);
    font-size: 100%;
    }
    
    #menu ul li {float: left; width: 100%;}
    #menu ul li a {height: 30px;, line-height: 30px;} 
    
    #menu a, #menu h2 {
    font: 0.85em/1.5em arial, helvetica, sans-serif;
    }
    </style>
    <![endif]-->
    The CSS for the <UL> menu is:

    Code:
    #menu {
    	float: left;
    }
    #menu ul {
    	list-style: none;
    	margin: 0;
    	padding: 0;
    	width: 9.055em;
    	float: left;
    	line-height: 32px;
    }
    #menu a, #menu h2 {
    	display: block;
    	margin: 0;
    	font-family: arial, helvetica, sans-serif;
    	font-size: small;
    	border-right-width: 1px;
    	border-right-style: solid;
    	border-right-color: #CCCCCC;
    	font-weight: normal;
    }
    #menu h2 {
     color: #fff!important;
     text-align: center;
    }
    #menu a {
     color: #FFFFFF!important;
     text-decoration: none;
    }
    #menu a:focus, #menu a:hover {
    	color: #FFA422!important;
    	background-image: url(new-images/menubar-on.jpg);
    	background-repeat: repeat-x;
    }
    #menu li {position: relative;}
    
    #menu ul ul ul {
    position: absolute;
    top: 0;
    left: 100%;
    }
    #menu ul ul {
    position: absolute;
    z-index: 500;
    }
    div#menu ul ul {
    display: none;
    }
    div#menu ul li:focus, div#menu ul li:hover ul
    {display: block;}
    div#menu ul ul,
    div#menu ul li:focus, div#menu ul li:hover ul ul,
    div#menu ul ul li:focus, div#menu ul ul li:hover ul ul
    {display: none;}
    
    div#menu ul li:focus, div#menu ul li:hover ul,
    div#menu ul ul li:focus, div#menu ul ul li:hover ul,
    div#menu ul ul ul li:focus, div#menu ul ul li:hover ul
    {display: block;}
    body {
    behavior: url(/csshover.htc);
    }
    To view my draft page, go to http://www.consultus.org.uk/new.htm - in Firefox the menu (across the top of the screen) fits the width, but in IE, the final 3 items in the menu wrap onto the line below, therefore the width of each item is obviously wider in IE.

    Any ideas??

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    It doesn't work in Fx either.
    The problem is mixing relative and absolute units. The #wrapper width:980px; px units, then the #menu must also use these units.
    Change #menu ul to width:108px;

  3. #3
    Join Date
    Oct 2007
    Posts
    161
    Thanks.. obvious when you think about it!

    I think I'm one of the ones with chimpanzee dna :O)

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles