Cross Browser problem

http://tinyurl.com/38jkgd

In firefox this site looks fine, but in IE a couple problems exist:
1. When you scroll over the nav bar, the products section opens where you cannot click
2. There is a blackbar under the nav bar instead of transparency.

any tips on fixing it for IE 7? (maybe an if IE css)

 

nobody got any ideas?

 

Hey man, I would like to help you but I got stuck on that one too, when I used a drop down menu over a flash movie it didn't show. Even though your using Javascript, I'm just wondering if its the same. This limited me from having to use a drop down over a flash banner and I had to change my design or not use a flash movie when close to the drop down menu

I like to see if someone can figure this one out for you, so I can use it and break the restriction on my designs .

CHEERS

 

I'm not sure about the black bar, but the others I know.

Hover does not work in IE6 without either Javascript (Suckerfish version OR the server-based whatever:hover) OR fake IE-conditional-statement tables (which moves the closing </a> to the end of the sub-menus for IE6 so it thinks the subs are children of the <a> instead of children of the <li> like they really are. No other way around that.

You're using the display: none/display: block method of making the subs hidden when not being hovered. You know that can be a problem for screen readers as well as make extra work when dealing with IE (it doesn't like changing display values without some extra help)? The left: -999em and back to left: 0 on :hover is safer.

The grey around your Macitty buttons is IE6 giving a grey background to the transparency of the png. This is a famous issue. You can do two things: either send IE6 a transparent gif instead (IE7 can have the transparent png no problem) using the * html hack (sends something to IE6 and under only) while the rest of the browsers get the png, OR you can use the PNGfix which, for these buttons, I wouldn't. IE6 has issues with the transparency of pngs... non-transparent pngs or png's without an alpha layer are still cool.

Try fixing those two first... and I'm thinking the black bar has something to do with the layout of the menu.

<div id="navigation">
<ul id="productnavigation">
  <li><a href="/">Home</a></li>
  <li><a href="/products.shtml">Products</a>        
    <ul>
      <li><a href="/MiniMail">MiniMail</a></li>
      <li><a href="/DownloadQueue">Download Queue</a></li>
      <li><a href="/BBCWeather">BBCWeather</a></li>
      <li><a href="/CollageSaver">CollageSaver</a></li>
    </ul>
  </li>
  <li><a href="/faq.shtml">FAQs</a></li>
  <li><a href="/about.shtml">About us</a></li>
  <li><a id="navbar_support" href="/support">Support</a></li>
</ul>
</div>

Code (markup):

CSS:

/*top of CSS sheet*/
[b]* {
  margin: 0;
  padding: 0;
}

ul, li {
  list-style: none;
}[/b]
/* Navigation styles */

#navigation {
  background: #000 url( /images/BodyBlackBackgroundTop.png ) top left no-repeat;
  margin-bottom: 10px;
}

#productnavigation {
  background:  url( /images/BodyBlackBackgroundBottom.png ) bottom left no-repeat;
  font-size: 14px;
  padding: 12px 10px;
  [b]position: relative;[/b]<---tells the browser where to start with positioning
  [b]overflow: hidden;[/b] (this wraps the floats in place of thje clearing div... make sure the z-index is high enough though for the sub)
}

#productnavigation li {
  [b]float: left;[/b]
  width: 6em; (or whatever fits)
}

#productnavigation a {
  [b]display: block;[/b]
  [b]text-align: center;[/b]
  padding: 12px 20px;
  font-weight: normal;
  text-decoration: none;
  border: none;
  color: #ccc;
}

#productnavigation a:focus, #productnavigation a:hover, #productnavigation a:active {
  color: #fff;
}

#productnavigation a.current {
  background: #666 url( 'images/NavigationCurrentBackground.jpg ) bottom left repeat-x;
  color: #fff;
}
/* Product navigation CSS menus */


#productnavigation li ul { 
  [b]left: -999em;[/b]
  position: absolute;
  background: #000;
  border: 1px solid #333;
  color: #fff;
  font-size: 14px;
  [b]width: 10em; (or whatever)[/b]
  z-index: 100;
}

(for IE 7)
[b]#productnavigation li:hover {
  position: relative;
  z-index: 1;
}[/b]

#productnavigation li:focus ul, #productment li:hover ul {
  left: 0;
}

(if no width is set on the top-level li, then you might need float: none on the sub li)

#productnavigation li ul a {
  display: block;
  whatever else, colours should inherit;
} 

Code (markup):

I didn't test the above, just my guess on the better menu, but apparently IE is using that 90px left you had as 90px left from the top-level a, while the other browsers are using the left side of the menu itself or even the menu div. Something like this should work better, as I've gotten drop-downs to line up okay in IE7 as well as FF. One thing I don't have in the above code is a top margin for the submenu which you'd need to push it down low enough.

Also, the comment in the CSS about how you can't center an image unless it's in a block element already is bollocks. Though no inline element should be a direct child of the <body>, an image otherwise does not NEED to be in another block... you can either center an inline image with text-align: center or make it display: block and center using margin: 0 auto;

 

thanks for you killer response, i'll try some of this