A Digital Age Deserves A Digital Leader

Frustrating CSS & IE6 (and a little oddity with FF)

Frustrating CSS & IE6 (and a little oddity with FF)

Postby poisonbl » Thu Oct 09, 2008 6:33 pm

I'm putting a mouseover drop down menu on a site I'm building... in IE6, the mouseover highlight causes the whole menu item to shoot off to the side and down a bit (about 11 inches to the right and down about 3 inches). The sub menu doesn't even appear anywhere that I can see. In FF (both 2 and 3) the whole menu shows perfectly... but the menu items acting as 'parents' to submenus lose their ability to be used as links (at most a minor inconvenience at this stage).

Since it's only up on my home server, and I'd rather not catch comcast's ire... could anyone who might have any ideas (or might be willing to volunteer IE7) let me know and I'll pm a link (or 3...).

The html side is just the generic unordered list base:
Code: Select all
<div id="navbar">
  <ul>
    <li><a href="./">Main</a></li>
    <li><a href="./?page=services">Services</a>
      <ul>
        <li class="sub"><a href="./?page=services">Repair</a></li>
        <li class="sub"><a href="./?page=services">Consulting</a></li>
        <li class="sub"><a href="./?page=services">Somethin else</a></li>
      </ul>
    </li>
    <li><a href="./?page=news">News</a></li>
    <li><a href="./?page=downloads">Downloads</a></li>
    <li><a href="./?page=about+us">About Us</a></li>
    <li><a href="./?page=contact+us">Contact Us</a></li>
  </ul>
</div>


The CSS is pulled from an online menu generator, then adjusted a little for the job (the copyright notice that goes with it's cut here for space):
Code: Select all
#navbar {
clear: both;
float: center;
width: 870px; padding-left: 90px;
height: 50px; padding-top: 30px;
margin-top: -25px;
margin-left: -2px;
color: #fff;
text-align: center;
background-image: url(images/buttonbar.jpg);
background-repeat: no-repeat;
background-position: center top;
z-index: 100;
}
#navbar ul { margin: 0pt; padding: 0pt; position: relative; z-index: 500; list-style-type: none; float: center; }
#navbar li { float: left; text-align: center; width: 9em;}
#navbar li.sub { background-color: #fff; width: 13em; border: 1px solid #37f}
#navbar table { position: absolute; border-collapse: collapse; top: 0pt; left: 0pt; z-index: 100; font-size: 1em; margin-top: -1px; }
#navbar a, #navbar a:visited { border: 0px solid #37f; display: block; text-decoration: none; height: 2em; line-height: 2em; color: #37f; padding: 0em 1em; font-weight: bold; font-style: normal; font-variant: normal; text-transform: none; }
#navbar b { float: right; margin-right: 5px; }
* html #navbar a, * html #navbar a:visited { }
* html #navbar a:hover { color: #fff; background-color: #37f; position: relative; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; text-transform: none; }
#navbar li:hover { position: relative; text-align: center; }
#navbar a:active, #navbar a:focus { color: #fff; background-color: #37f; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; text-transform: none; }
#navbar li:hover > a { color: #fff; background-color: #37f; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; text-transform: none; }
#navbar li ul { padding: 2em; visibility: hidden; position: absolute; top: 0em; left: -4em; background-color: transparent; }
#navbar li:hover > ul { visibility: visible; }
#navbar ul a:hover ul ul { visibility: hidden; }
#navbar ul a:hover ul a:hover ul ul { visibility: hidden; }
#navbar ul a:hover ul a:hover ul a:hover ul ul { visibility: hidden; }
#navbar ul a:hover ul { visibility: visible; }
#navbar ul a:hover ul a:hover ul { visibility: visible; }
#navbar ul a:hover ul a:hover ul a:hover ul { visibility: visible; }
#navbar ul a:hover ul a:hover ul a:hover ul a:hover ul { visibility: visible; }


The overall block for #navbar sets it to overlay correctly on the page, which works perfectly under every browser I've tested... it's not at all taken from that generator (and therefore is more likely to be the source of my problems).

Any glaring mistakes (besides my jumping in so far over my head at 3am last night, of course).
Image
Image
PRO Level 10
User avatar
Posts: 432
Joined: Mon Nov 15, 2004 10:02 pm
Location: WVU -- Morgantown, WV. -- USA (TZ: -5 hrs GMT, -4 DST)

Return to HTML, CSS, and Scripts

Who is online

Users browsing this forum: No registered users and 0 guests

cron
cron