3 replies [Last post]
solaero
Offline
newbie
Last seen: 15 years 48 weeks ago
Joined: 2003-08-12
Posts: 2
Points: 0

I'm wondering if anyone has had this experience before and if you've been able to rectify it.

I'm using an unordered list to create navigation (navigation with images and javascript rollovers - it's for a client that refuses to see the light in using actual text) in IE 6 + Mozilla, the images have mysterious 3px gaps above them, whether Javascript is present in the code or not. In Opera 7, however, everything works fine.

I have removed all spaces between divs, uls and lis in the code, since I read elsewhere that this can fix spacing issues... to no avail.

please see:
http://www.homesteadfounders.com/dev/test/thepreserve.html

my css goes like this:

/* NAVIGATION */
#nav {
position:absolute;
top:228px;
left:0;
padding:0;
margin:0;
border:0;
z-index:10;
}

#nav ul, #nav li {
padding:0;
margin:0;
}

Thanks in advance for your help!

QPR
Offline
newbie
Last seen: 15 years 48 weeks ago
Timezone: GMT+12
Joined: 2003-08-13
Posts: 2
Points: -1

Images in ul/li creating 3px spacing in IE & Mozilla

try adding/changing the LI style declaration to include:
li { margin-top: -5px }

(or whatever number suits)
Works for me (squashes) in IE6

solaero
Offline
newbie
Last seen: 15 years 48 weeks ago
Joined: 2003-08-12
Posts: 2
Points: 0

Images in ul/li creating 3px spacing in IE & Mozilla

Thank you QPR for the advice. I've tried that now and discovered that while it does solve the problem in IE it creates problems in Opera and Mozilla...

I was hoping for a solution that wouldn't require browser-specific code.

Has anyone seen examples of the stacked UL/LI navigation menu, using images successfully?

Thanks

Sven
Sven's picture
Offline
Enthusiast
Brisbane, Australia
Last seen: 12 years 5 weeks ago
Brisbane, Australia
Timezone: GMT+10
Joined: 2003-03-12
Posts: 166
Points: 0

Images in ul/li creating 3px spacing in IE & Mozilla