In the dropdown menu - its different in ff and IE. I'm TRYING emphasis that as I've been working on it for some time now to have the drop down part of the menu about 2px below the menu creating a "gap" - can someone please help.... test it in both please. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Leo's McCabe Builders</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="description" content="yeah"> <meta name="generator" content="gEdit"> <style type="text/css"> * { margin: 0; padding: 0; } img { border: 0; } ul, li { list-style: none; } html, body { height: 100%; background: url(background.gif) } #container { min-height: 100%; width: 849px; /*silly width, not 800-friendly yet still small on the next screensize up... might as well go to 960 or something*/ margin: 0 auto; font-family: sans-serif; background-color: #7a0000; } * html #container {height: 100%;} /*no min-height for lte IE6*/ #header { } h1 { color: #fff; height: 105px; width: 849px; position: relative; } h1 span { position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: url(logo.jpg) 0 0 no-repeat; } #menu1 { border-top: 1px solid #949494; background-color: #37383d; width: 100%; /*haslayout so background colour shows in IE6*/ overflow: hidden; } #header ul li { display: inline; /*some declaration for IE7, otherwise ignore li's*/ } #header ul a, #header p { float: left; font-family: tahoma; font-size: 11px; color: #e0e4e7; height: 26px; line-height: 26px; text-align: center; text-decoration: none; padding: 0 10px; } #header ul a:focus, #header ul a:hover { background-color: #464d58; } #header p { clear: left; background-color: #37383d; border-top: 1px solid #949494; border-bottom: 1px solid #b9c0ca; height: 24px; } * html #header p {margin-right: -3px;} /*stoopid 3-pixel-jog bug*/ #menu2, #footer { background-color: #6B6565; color: #e0e4e7; overflow: hidden; border-top: 1px solid #949494; border-bottom: 1px solid #b9c0ca; } * html #menu2 {height: 1.4em;} /*haslayout so the background shows in IE6*/ #flash { clear: left; background-color: #949494; color: #000; padding: 5px; margin-top: 0px; height: 400px; } #footer { margin-left: 0; padding: 0 5px; } #footer p { font-family: tahoma; font-size: 11px; padding: 5px; text-align: left; } #menuh { background-color: #6C7079; border-top: 1px solid #B9C0CA; border-bottom: 1px solid #B9C0CA; height: 24px; color: #626B7E; } #menuh li { list-style: none; position: relative; float: left; } #menuh a { float: left; padding: 0 1em; color: #FFFFFF; text-decoration: none; height: 24px; line-height: 24px; } #menuh a:hover { background-color: #37383D; } #menuh ul { position: absolute; top: 24px; background-color: #6C7079; border: 1px solid #B9C0CA; width: 100px; padding: 0 4px; left: -999em; } #menuh ul li { width: 100%; padding: 4px 0; border-bottom: 1px solid #B9C0CA; } #menuh ul li.last { border-bottom: 0; } #menuh ul a { height: 1.2em; line-height: 1.2em; padding: 0 0 0 5px; text-align: left; float: none; display: block; } #menuh li:hover ul, #menuh li.sfhover ul { left: 0px; } --> </style> <!--[if lt IE 7]><script type="text/javascript"> sfHover = function() { var sfEls = document.getElementById("menuh").getElementsByTagName("LI"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", sfHover); </script><![endif]--> </style> </head> <body> <div id="container"> <div id="header"> <h1>Text<span></span></h1> <ul id="menu1"> <li><a href="#">About Us</a></li> <li><a href="#">Recruitment</a></li> <li><a href="#">McCabe UK</a></li> <li><a href="#">Clients</a></li> <li><a href="#">Partners</a></li> <li><a href="#">News</a></li> <li><a href="#">Contact Us</a></li> <li><a href="#">Home</a></li> </ul> <p>Menu</p> <ul id="menuh"> <li><a href="#">Homepage</a> <ul> <li class="last"><a href="#">About</a></li> </ul> </li> <li><a href="#">Gallery 1 </a> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li class="last"><a href="#">Link 3</a></li> </ul> </li> <li><a href="#">Gallery 2</a> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li class="last"><a href="#">Link 3</a></li> </ul> </li> <li><a href="#">Gallery 3</a> </li> <li><a href="#">Resources</a> </li> <li><a href="#">Contact</a> </li> </ul> </div><!--header--> <div id="flash"> <p>Text text text.</p> <p>Don't use breaks for visual display, I'm doing it to keep the CSS clean for you while extending the content... remove and add these lines to see the page grow and shrink.<br> <p>Don't use breaks for visual display, I'm doing it to keep the CSS clean for you while extending the content... remove and add these lines to see the page grow and shrink.<br> <p>Don't use breaks for visual display, I'm doing it to keep the CSS clean for you while extending the content... remove and add these lines to see the page grow and shrink.<br> <p>Don't use breaks for visual display, I'm doing it to keep the CSS clean for you while extending the content... remove and add these lines to see the page grow and shrink.<br> <p>Don't use breaks for visual display, I'm doing it to keep the CSS clean for you while extending the content... remove and add these lines to see the page grow and shrink.<br> <p>Don't use breaks for visual display, I'm doing it to keep the CSS clean for you while extending the content... remove and add these lines to see the page grow and shrink.<br> <p>Don't use breaks for visual display, I'm doing it to keep the CSS clean for you while extending the content... remove and add these lines to see the page grow and shrink.<br> <p>Don't use breaks for visual display, I'm doing it to keep the CSS clean for you while extending the content... remove and add these lines to see the page grow and shrink.<br> </div> <div id="footer"> <p>contact</p> </div> </div><!--container--> </body> </html> Code (markup):
If there's a gap between the main menu and the subs, the mouse will not be able to retain :hover on the subs, rendering them useless. However, you may be able to fake it by having an image or border at the top of the subs to imitate the background... some extra padding on the first <a> child of the subs and that way the mouse can follow the drop down while it looks like the subs are off-centered.
I've tried: #menuh ul li.first { top: 5px; } #menuh ul a.first { top: 5px; } #menuh ul li.first { padding: 5px; } #menuh ul a.first { padding: 5px; } Super idea but not working buddy
No, the padding was only for making room for the image which would fake your top: 5px declaration (which you would remove).