#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2007
    Posts
    2
    Rep Power
    0

    Menu Problems in IE: Menu Contents Shift Down on Hover


    I am a photographer for a website and I know very little about anything other than basic html. With the website lady gone on a trip around the world for a year, I ended up being the person to attempt to modify our side menu to show an additional column of subcategories. I tinkered around with the code we had and I managed to get this to work in Firefox, however in IE7 the contents of the menu shift down a few pixels when you hover over a category.

    To view my problem, go to scannerparts.biz

    I've messed around with this for a few days and everything has become a big confusing mess so I have no choice but give in and ask for help. I thank anyone in advance for any assistance you can offer.

    -Emerson

    Here is the code:

    hover.css

    Code:
    <!--
    body {
    	behavior: url(/images/csshover2.htc);
    }
    
    div#categorynav ul {margin: 0px; padding: 0px;}
    .submenu {
    	position: relative;
    	margin: 0px;
    	padding: 2px 0px;
    	width: 178px;
    }
    
    div#categorynav ul.level1 li a {
    	position: relative;
    	display: block;
    	text-decoration: none;
    	margin: 0px;
    	padding:  0px;
    }
    
    div#categorynav ul.level2 li {
    	position: relative; 
    	display: block;
    	text-decoration: none;
    	margin: 0px; 
    	padding: 0px;
    }
    
    div#categorynav ul.level3 li {
    	position: relative; 
    	display: block;
    	text-decoration: none;
    	margin: 0px; 
    	padding: 0px;
    }
    
    div#categorynav ul.level1 ul.level2 a {
    	background-color: #000000;
    	color: #fff;
    	width: 178px;
    	font-weight:normal;
    	padding: 4px 4px 4px 14px;
    }
    
    div#categorynav ul.level2 ul.level3 a {
    	background-color: #000000;
    	color: #fff;
    	width: 178px;
    	font-weight:normal;
    	padding: 4px 4px 4px 14px;
    }
    
    html>body div#categorynav ul.level1 ul.level2 a {
    	width: auto;
    	padding: 0px; 
    	margin: 0px;
    }
    html>body div#categorynav ul.level2 ul.level3 a {
    	width: auto;
    	padding: 0px; 
    	margin: 0px;
    }
    
    div#categorynav>ul a {width:auto; padding: 0px; margin: 0px;} 
    div#categorynav ul ul {position: absolute; display: none; width: 100px; z-index:900; padding: 0px; margin: 0px;}
    div#categorynav ul ul li {padding: 0px; margin: 0px;}
    div#categorynav ul.level1 li.submenu:hover ul.level2 {
    	display: block;
    	list-style-image: none;
    	list-style-type: none;
    
    	
    }
    div#categorynav ul.level2 li.submenu:hover ul.level3 {
    	display: block;
    	list-style-image: none;
    	list-style-type: none;
    
    	
    }
    
    div#categorynav ul.level2 {
    	top: 0px;	
    	left: 178px;
    	margin: 0px;
    	padding: 0px;
    	width:160px;
    
    } 
    div#categorynav ul.level2 li a:hover {
    	background-color: #000000;
    	color: red;
    
    }
    
    div#categorynav ul.level3 {
    	top: 0px;	
    	left: 178px;
    	margin: 0px;
    	padding: 0px;
    	width:160px;
    
    } 
    div#categorynav ul.level3 li a:hover {
    	background-color: #000000;
    	color: red;
    
    
    }
    Abbreviated Header Source (abbreviated for max character requirement, I think I left all the vital stuff there)
    Code:
    <!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
    <html>
    <head>
    
    <ss:comment><link href="hover.css" type="text/css" rel="stylesheet" media="screen"/></ss:comment>
    <link href="$store.images['hover.css']" type="text/css" rel="stylesheet" media="screen"/>
    
    
    <style type="text/css">
    <!--
    /* Style Sheet */
    body {
    	margin-top: 10px;
    	margin-right: 0px;
    	margin-bottom: 30px;
    	margin-left: 1px;
    	background-image: url(/images/backgroundgray.jpg);
    	background-repeat: repeat-x;
    	background-position: center bottom;
    }
    html { height: 100%; margin-bottom: 1px; }
    #outline{
    	border :0px solid #ffffff;
    	width :760px;
    	}
    #categories{
    	background-color:#000000;
    	color:#ffffff;
    	text-decoration:none;
    	text-align : left;
    	display: block;
    	padding : 5px 5px 1px 0px;
    	font-weight :bold;
    	font-size:9pt;
    	font-family:<ss:value source=$font.paragraph.face/>;
            width :178px;
    	padding: 0px; 
    	}
    #cat1{
    	background-color:#000000;
    	color: #ffffff;
    	text-decoration:none;
    	text-align: left;
    	display: block;
    	font-weight :normal;
    	font-size: 9pt;
    	font-family:<ss:value source=$font.paragraph.face/>;
            width: 178px;
    	padding: 0px; 
    	}
    #cat1 a{
    	background-color:#000000;
    	color: #ffffff;
    	text-decoration:none;
    	text-align: left;
    	display: block;
    	font-weight: normal;
    	font-size:9pt;
    	font-family:<ss:value source=$font.paragraph.face/>;
            width :178px;
    	padding: 0px; 
    	}
    #cat1 a:hover{
    	background-color:#000000;
    	color:#ff0000;
    	text-decoration:none;
    	text-align : left;
    	display: block;
    	font-weight: normal;
    	font-size:9pt;
    	font-family:<ss:value source=$font.paragraph.face/>;
            width :178px;
    	padding: 0px; 
    	}
    .leftnav {
    	background-color:#000000;
    	color:#ffffff;
    	text-decoration:none;
    	font-weight :bold;
    	font-size:9pt;
    	font-family:<ss:value source=$font.paragraph.face/>;
    	padding : 2px 5px 1px 0px;
    	}
    .leftnav A:link {
    	background-color:#000000;
    	border-bottom : 1px solid #666666;
    	color:#ffffff;
    	text-decoration:none;
    	text-align : left;
    
    	display: block;
    	padding : 2px 5px 1px 0px;
    	font-weight :bold;
    	}
    .leftnav A:visited {
    	background-color:#000000;
    	border-bottom : 1px solid #666666;
    	color:#ffffff;
    	text-decoration:none;
    	text-align : left;
    	display: block;
    	padding : 2px 5px 1px 0px;
    	font-weight :bold;
    	}
    .leftnav A:hover {
    	background-color:#000000;
    	border-bottom : 1px solid #666666;
    	color:#ff0000;
    	text-decoration:none;
    	text-align : left;
    	display: block;
    	padding : 2px 5px 1px 0px;
    	font-weight :bold;
    	}
    .leftnav A:active {
    	background-color:#000000;
    	border-bottom : 1px solid #666666;
    	color:#ffffff;
    	text-decoration:none;
    	text-align : left;
    	display: block;
    	padding : 2px 5px 1px 0px;
    	font-weight :bold;
    	}
    A:link {text-decoration:underline;color:<ss:value source=$font.paragraph.color/>;}
    A:visited {text-decoration:underline;color:<ss:value source=$font.paragraph.color/>;}
    A:hover {text-decoration:none;color:<ss:value source=$font.paragraph.color/>;}
    A:active {text-decoration:underline;color:<ss:value source=$font.paragraph.color/>;}
    
    .content {font-family:<ss:value source=$font.paragraph.face/>
    ;color:<ss:value source=$font.paragraph.color/>;}
    
    .title {font-size:10pt;font-weight:bold;font-family:<ss:value source=$font.paragraph.face/>
    ;color:#ffffff;}
    
    .footer {font-size:9pt;font-family:<ss:value source=$font.paragraph.face/>
    ;color:<ss:value source=$font.paragraph.color/>;}
    
    -->
    </style>
    </head>
    
    <body>
    <center>
    <div id="outline">
    <table width="760" border="0" cellspacing="0" cellpadding="0">
    <!-- banner image -->
    	<tr valign="top"><td colspan="4"><a href="(URL address blocked: See forum rules)"><ss:image source="$templateSet.images['header.jpg']" border="0"/></a></td></tr>
    
    	<tr valign="top">
    <!-- left nav -->
    		<td bgcolor="#000000">&nbsp;&nbsp;</td>
    		<td width="175" bgcolor="#000000">
    			<div class="leftnav">
    		<!-- store logo -->
    			</div>
    		
    			<div class="leftnav">
    				<div style="border-bottom : 0px solid #666666;">&nbsp;</div>
    			<!-- home -->
    				</div>
    			
    			<!-- categories -->
    <p><font face="Arial,Helvetica,sans-serif" size="2" color="white"><b>Parts and Products:</b></font></p>
    <div id="categorynav">
    <div id="categories">
    	<ul class="level1">                        			 
    	<ss:foreach item="category" within="$catalog.categoryList()">
    	<ss:sortby item="categorypriority" direction="asc"/>
    	<ss:if test="$category.treeLevel == '1'">
    	<ss:set name="hasSub" value="0"/>
    		<ss:foreach item="subcategory" within="$category.childrenToDepth(1)">
    
    		<ss:set name="hasSub" value="1"/>
    		</ss:foreach>
                    <li class="submenu">
    		<div id="cat1"><ss:link source="$category"/></div>
    			<ss:if test="$hasSub == '1'">
    			<ul class="level2">
    			<ss:foreach item="subcategory" within="$category.childrenToDepth(1)">
    			<ss:sortby item="categorypriority" direction="asc"/>
    
    			<ss:if test="$category.treeLevel == '2'">
    			<ss:set name="hasSub" value="1"/>
    			<ss:foreach item="subcategory" within="$category.childrenToDepth(1)">
    
                            		<ss:set name="hasSub" value="1"/></ss:foreach></ss:if>
    </li>
                                     	<li class="submenu">
    					<div id="cat1"><ss:link source="$subcategory"/></div>
    						<ss:if test="$hasSub == '1'">
    						<ul class="level3">
    						<ss:foreach item="subcategory" within="$subcategory.childrenToDepth(1)">
    						<li><ss:link source="$subcategory" title="$subcategory.name"/></li>
    						</ss:foreach>
    						</ul>
    						</ss:if>
    						</ss:foreach>
    						</ul>
    						</ss:if></ss:foreach>
    
    					</li>
    
    					</ss:if></ss:if></ss:foreach>
    				<br>                      
    			 </ul>
    			</div> 
    			</div>
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2007
    Posts
    2
    Rep Power
    0
    i fixed it...

    seoconsultants.com/css/menus/tutorial/

IMN logo majestic logo threadwatch logo seochat tools logo