I'm working on a table-free layout with jQuery-based drop-down megamenus (which have a hover-based trigger that displays a panel). The menus are ULs, though to make it fit underneath the logo they're contained in a DIV set to a "display: inline" (since otherwise, it doesn't validate).
Though the page now validates, it's running into two problems in separate browsers. http://www.starcitygames.com/SCG_6/test.html In FIREFOX, the menu displays fine, but displays another line just below it - a narrow strip the height and background color of the menu that drops everything else down. I'm not sure why this is happening. In IE, if you hover your mouse over the "Buying Cards" link and see the (horrifically styled) drop-down panel, you'll note that the author in the text underneath the panel ("The Ferrett") bleeds through into the actual panel, even though the z-index on the panel is set to 10,000. This could be a JavaScript issue, but I think it's CSS-related. In CHROME, OPERA, and SAFARI: No problems. Any ideas? The relevant markup and CSS is below, though obviously the whole page can be visited. Thanks in advance! <div id="header"> <div style="float: left;"> <a href="http://www.starcitygames.com"; class="disable_hover"> <img src="http://www.starcitygames.com/images/button/SideSCGLogo.gif"; alt="StarCityGames.com!" /> </a> </div> <script type='text/javascript'><!--//<![CDATA[ var m3_u = (location.protocol=='https:'?'https://ads.starcitygames.com/phpad/www/delive ry/ajs.php':'http://ads.starcitygames.com/phpad/www/delivery/ajs.php'); var m3_r = Math.floor(Math.random()*99999999999); if (!document.MAX_used) document.MAX_used = ','; document.write ("<scr"+"ipt type='text/javascript' src='"+m3_u); document.write ("?zoneid=4"); document.write ('&amp;cb=' + m3_r); if (document.MAX_used != ',') document.write ("&amp;exclude=" + document.MAX_used); document.write ("&amp;loc=" + escape(window.location)); if (document.referrer) document.write ("&amp;referer=" + escape(document.referrer)); if (document.context) document.write ("&context=" + escape(document.context)); if (document.mmm_fo) document.write ("&amp;mmm_fo=1"); document.write ("'></scr"+"ipt>"); //]]>--></script><noscript><a href='http://ads.starcitygames.com/phpad/www/delivery/ck.php?n=acef68fc& cb=INSERT_RANDOM_NUMBER_HERE' target='_blank'><img src='http://ads.starcitygames.com/phpad/www/delivery/avw.php?zoneid=4&cb =INSERT_RANDOM_NUMBER_HERE&n=acef68fc' border='0' alt='' /></a></noscript> <div id="navigation_bar"> <ul id="menu"> <li> <h2><a href="http://www.starcitygames.com";>Home</a></h2> </li> <li class="mega"> <h2> <a href="#">Buying Cards</a> </h2> <div> <h3> Menswear </h3> <p> <a href="#">Articles</a>, <a href="#">Cards</a>, <a href="#">Decks</a>, <a href="#">More...</a> </p> <h3> Gifts </h3> <p> <a href="#">Gift Certificates</a>, <a href="#">Ponies</a>, <a href="#">More...</a> </p> <h3> Clearance! </h3> <p> 10% off all Apocalypse Singles this weekend. <a href="#">Don't miss out!</a> </p> <a href="#" class="more"> More stuff for him...</a> </div> </li> <li class="mega"> <h2> <a href="#">Selling Cards</a> </h2> <div> <h3> Menswear </h3> <p>It's totally in my face!</p> </div> </li> <li class="mega"> <h2><a href="#">Magic Strategy</a></h2> <div> <p>You have stumbled upon the secret labyrinth! You may be eaten by a dragon.</p> </div> </li> <li class="mega"> <h2><a href="#">Tournaments</a></h2> <div> <p>You have stumbled upon the secret labyrinth! You may be eaten by a dragon.</p> </div> </li> <li class="mega"> <h2><a href="#">Contact Us</a></h2> <div> <p>You have stumbled upon the secret labyrinth! You may be eaten by a dragon.</p> </div> </li> </ul> </div> #allcontent { width: 958px; padding-top: 5px; padding-bottom: 5px; background-color: white; margin-left: auto; margin-right: auto; } #header { /* background: url(http://www.starcitygames.com/php/news/css/topbackground.jpg); */ /* background-repeat: repeat; */ text-align: center; padding: 1px; margin-bottom: 5px; width: 100%; } #navigation_bar { border: 1px solid #085A8C; text-align: left; margin: 3px; background-color: white; clear: both; margin-top: 10px; display: inline; } ul#menu { background: #085A8C; color: white; margin: 0; padding: 0.3em 0em; } ul#menu li { display: inline; margin: 0.1em 0.2em; position: relative; background: none; } ul#menu h2, ul#menu h3 { font-size: .9em; font-weight: bold; display: inline; } ul#menu li a { color: #fff; font-weight: bold; text-decoration: none; padding: 0 0.4em; } ul#menu li a:hover { text-decoration: underline; } ul#menu li.mega a { font-weight: bold; background: transparent url(arrow.gif) center right no-repeat; padding: 0 1.2em; } ul#menu li.mega a:hover { text-decoration: underline; } ul#menu div { display: none; } ul#menu li.mega div { border: 1px solid #dda; width: 10em; position: absolute; top: 1.6em; left: 0em; padding: 1.3em; background: #ffc; color: #930; } ul#menu li.hovering div { display: block; z-index: 10000; } ul#menu li.mega div a { color: #300; padding: 0; background-image: none; text-decoration: underline; } ul#menu li div a.more { color: #390; font-weight: bold; } ul#menu div h3 { color: #f70; font-weight: bold; font-size: 1.1em; } ul#menu div p { margin: 0 0 0.8em 0; padding: 0; } The Ferrett Co-writer, www.mighthavebeen.net, a webcomic about rock, the end of the world, and tiny plastic guitars Editor-in-Chief and Webmaster, StarCityGames.com "This guy's like Gandhi, but better. He likes puppets." ______________________________________________________________________ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
![http://www.starcitygames.com/images/button/SideSCGLogo.gif"](http://www.starcitygames.com/images/button/SideSCGLogo.gif"){kind=link}
