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!
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
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
Images in ul/li creating 3px spacing in IE & Mozilla
This article might help: