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;amp;cb=' + m3_r);
           if (document.MAX_used != ',') document.write ("&amp;amp;exclude="
+ document.MAX_used);
           document.write ("&amp;amp;loc=" + escape(window.location));
           if (document.referrer) document.write ("&amp;amp;referer=" +
escape(document.referrer));
           if (document.context) document.write ("&amp;context=" +
escape(document.context));
           if (document.mmm_fo) document.write ("&amp;amp;mmm_fo=1");
           document.write ("'></scr"+"ipt>");
        //]]>--></script><noscript><a
href='http://ads.starcitygames.com/phpad/www/delivery/ck.php?n=acef68fc&amp;
cb=INSERT_RANDOM_NUMBER_HERE' target='_blank'><img
src='http://ads.starcitygames.com/phpad/www/delivery/avw.php?zoneid=4&amp;cb
=INSERT_RANDOM_NUMBER_HERE&amp;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/

Reply via email to