Avatar of Kevin Smith
Kevin Smith
Flag for United States of America

asked on 

Why does this look wrong in Firefox and Chrome but no in IE?

This css is for a jquery drop down menu.  I've attached an image that shows what's happening...any ideas?

#page-wrap                                          { width: 800px; height: 30px; vertical-align:middle; }
ul                                                      { list-style: none; }

ul.dropdown                         { background-image:url(shadeup.gif); text-align:center;  }
ul.dropdown li                      { font-weight: normal; float: left; zoom: normal; font: Verdana, Geneva, sans-serif; background-image:url(shadeup.gif); width: 200px;  }
ul.dropdown a:hover                        { color: #000; }
ul.dropdown a:active                { }
ul.dropdown li a                    { display: block; padding: 7px;  #006699;
                                                         color: #ffffff; }
ul.dropdown li:last-child a         { border-right: none; } /* Doesn't work in IE */
ul.dropdown li.hover,
ul.dropdown li:hover                { background: #006699; color: black; position: relative; background-image:url(shadeup_or.gif); text-decoration: none }
ul.dropdown li.hover a              { color: #ffffff; text-decoration:none }

ul.dropdown ul                                     { width: 200px; visibility: hidden; position: absolute; top: 100%; }
ul.dropdown ul li                               { font-weight: normal; background: #006699; color: #000;
                                                        border-bottom: 1px solid #ccc; }
                                    /* IE 6 & 7 Needs Inline Block */
ul.dropdown ul li a                              { border-right: none; padding: 7px; display:inline-block; }

ul.dropdown ul ul                               { left: 100%; top: 0; }
ul.dropdown li:hover > ul                   { visibility: visible; }

Here's the html code for the tables:

      <td bgcolor="#006699" style="border-top:solid 2px #000000; border-bottom:solid 2px #000000" background="shadeup.gif" align="center" ><table border="0" cellspacing="0" cellpadding="0" >
        <tr valign="middle">
          <td border="0" cellspacing="0" cellpadding="0"> <div id="page-wrap">
         <table width="800px" border="0" height="30px" style="table-layout:fixed; margin: 0px;">

     <ul class="dropdown">
              <li><a href="membership_info.php">Membership Information</a>
<ul class="sub_menu">
                           <li><a href="membership_info.php">Membership Options</a></li>
                                <a href="join.php">Join Now</a>
                           <li><a href="member_login.php">Login to Member's Area</a></li>
CSSHTMLWeb Browsers

Avatar of undefined
Last Comment
Kevin Smith

8/22/2022 - Mon