SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Apr 2004
    Location
    canada
    Posts
    274
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE7 CSS Menu Issues

    Hey Everyone, I can't seem to figure this out. I have a CSS menu that works fine across all browsers except IE7 (what else is new). If you roll over the "Cheese" and "meat" links a dropdown list appears. It should drop down right below the parent link, but in IE7 it displays to the right of the parent link. Can someone please let me know what the issue is? I have tried display:block, display:inline-block etc and nothing seems to help.

    Here is the link:
    http://k-elementsdesign.com/menu.html

    Thanks!!

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    HIi,

    You don't have any co-ordinates for the dropdown menu so IE puts it where it thinks the menu happens to be.

    Add this:

    Code:
    #menu li{position:relative;}/* stacking context */
    #menu li ul{left:0;top:1.8em}/* adjust to suit*/
    You will probably need to give height to the top menu so that you can position the dropdown exactly.

    e.g. something roughly like this:
    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>Untitled Document</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <style type="text/css">
    /* menu styles */
    #menu,#menu ul{
    	margin: 0;
    	padding: 0;
    	list-style:none;
    }
    #menu {
    	height:24px;
    	line-height:24px;
    	background:#666;
    	font: 12px Tahoma, Arial
    }
    #menu li {
    	float: left;
    	height:24px;
    	line-height:24px;
    	position:relative;
    }
    #menu li a {
    	background: #666666;
    	text-decoration: none;
    	border-right: 1px solid white;
    	/*width: 70px;*/
     color: #fff;
    	white-space: nowrap;
    	height:24px;
    	padding:0 8px;
    	float:left;
    }
    #menu li ul li a {
    	display: block;
    	background: #666666;
    	padding: 5px 5px;
    	line-height:normal;
    	text-decoration: none;
    	color: #FFFFFF;
    	white-space: nowrap;
    	height:auto;
    	float:none;
    }
    /* /End */
    
    #menu li a:hover { background: #000000 }
    #menu li ul {
    	position: absolute;
    	z-index :5;
    	visibility: hidden;
    	left:0;
    	top:24px;
    	border-top: 1px solid white;
    	width:100%;
    }
    #menu li ul li {
    	line-height:normal;
    	height:auto;
    	float:none;
    	zoom:1.0;
    }
    #menu li ul li a {
    	width: auto;
    	float:none;
    	display:block;
    	background: #666666;
    	color: #FFFFFF;
    	zoom:1.0;
    }
    .listyleSmall {
    	width:70px;
    	text-align:center;
    	font-size: 14px;
    }
    .listyleLarge {
    	width:auto;
    	text-align:center;
    	font-size: 14px;
    }
    </style>
    </head>
    
    <body>
    <script type="text/javascript">
    var timeout         = 500;
    var closetimer      = 0;
    var ddmenuitem      = 0;
    
    function menu_open()
    {   menu_canceltimer();
        menu_close();
        ddmenuitem = $(this).find('ul').eq(0).css('visibility', 'visible');}
    
    function menu_close()
    {   if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}
    
    function menu_timer()
    {   closetimer = window.setTimeout(menu_close, timeout);}
    
    function menu_canceltimer()
    {   if(closetimer)
        {   window.clearTimeout(closetimer);
            closetimer = null;}}
    
    $(document).ready(function()
    {   $('#menu > li').bind('mouseover', menu_open);
        $('#menu > li').bind('mouseout',  menu_timer);});
    
    document.onclick = menu_close;
    </script>
    <ul id="menu">
    		<li style="margin-left:10px;"> <a href="#" class="listyleSmall">Home</a> </li>
    		<li style="margin-left:0px;white-space:nowrap;"> <a href="#" class="listyleLarge">Class Registration</a> </li>
    		<li style="margin-left:0px;display:"> <a href="#" class="listyleLarge">Cheese</a>
    				<ul>
    						<li><a href="Cheddar">Cheddar</a></li>
    						<li><a href="Blue">Blue</a></li>
    						<li><a href="Swiss">Swiss</a></li>
    						<li><a href="Havartti">Havartti</a></li>
    				</ul>
    		</li>
    		<li style="margin-left:0px;display:"> <a href="#" class="listyleSmall">Meat</a>
    				<ul>
    						<li><a href="Ham">Ham</a></li>
    						<li><a href="Bacon">Bacon</a></li>
    						<li><a href="Beef">Beef</a></li>
    						<li><a href="Sausage">Sausage</a></li>
    				</ul>
    		</li>
    		<li style="margin-left:0px;display:"> <a href="#" class="listyleLarge">Animals</a>
    				<ul>
    						<li><a href="Cats">Cats</a></li>
    						<li><a href="Dogs">Dogs</a></li>
    				</ul>
    		</li>
    		<li style="margin-left:6px;">
    				<c:SiteSearch id="searchComp"/>
    		</li>
    </ul>
    </body>
    </html>
    Lose the table around the menu as its not needed at all and shouldn't be used for layout anyway. Alos lose the inline styling and add classes instead where needed.

    You also have some corrupt and invalid css here so validate regularly to catch these typos and mistakes:

    Code:
    #menu li ul li a:hover {  background: {
    !pageColor
    }
    ;
    }
    Actually I guess that's from your cms so make sure its correct and shouldn't be displayed in a live css file.

    Hope that helps

  3. #3
    SitePoint Addict
    Join Date
    Apr 2004
    Location
    canada
    Posts
    274
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul O'B,

    Thanks for the great suggestions.

    I checked out the results of your code and the padding between each link should be equal distance between the link text and the border-right regardless of how many characters are in the link. Right now you can see that home and a meat links have more padding between the borders when they should be the same as the other links. How do I fix this?

    Thanks again!!

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    That would be because you have given the two smaller links a different class and set a width for them here.

    Code:
    .listyleSmall {
    	width:70px;
    	text-align:center;
    	font-size: 14px;
    }
    If you don't want a width then don't apply it

  5. #5
    SitePoint Addict
    Join Date
    Apr 2004
    Location
    canada
    Posts
    274
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Duh!! Didn't even catch that. Thanks!!


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
  •