Tanya Fader wrote:
> I've created a roll-over CSS navigation (using a little .js). This is an
> example for navigation code I found somewhere else. I've added background
> images to each of the <li> nav elements so that they work more like
> rollovers (just a note that I haven't finished so the roll-over show nothing
> at this point when hovering on the nav):
> if you look at the same page in Mozilla, it displays properly.
The first thing I'd try is to remove all the "code formatting" between
<ul><li>text</li> and such... like images, when you "stack" <img /> tags
(or <li>) in your code markup, you introduce a space after the element.
Normally, you don't see it, but it happens. I suspect that's what's
causing the gap.
You have this in your markup:
<li><a title="Corporations & LLCs" href="corporations-about.asp"
tabindex="2" class="corp"><span>Corporations & LLCs</span></a>
Try this, instead:
<ul id="nav"><li><a title="Corporations & LLCs"
class="corp"><span>Corporations & LLCs</span></a><ul> (etc)
It might not be as easy for you to read (I actually prefer non-indented
code), but it can eliminate the gap, maybe.
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/