Take a look at the following URL in IE5
http://www.firstamerican.ie/newtest/about.html
The spacing between the <li> tags is all wrong. It looks like there is a break between each one...
I have had various problems with <li> tags and CSS in IE5 and 5.5 but each time I fix one problem i get another!
Any thoughts much appreciated
T
more <li> problems with IE5
Hi lightbox,
Make sure you have no whitespace between the li's causes problems in certain browsers.
Hope that helps
Re: more <li> problems with IE5
Take a look at the following URL in IE5
http://www.firstamerican.ie/newtest/about.html
The spacing between the <li> tags is all wrong. It looks like there is a break between each one...
I have had various problems with <li> tags and CSS in IE5 and 5.5 but each time I fix one problem i get another!
Any thoughts much appreciated
T
Is it possible you haven't explicitly set the Margin and Padding values of the UL, LI, and A elements? It took me a while to figure it out, but just because you didn't set the property value in CSS, doesn't mean that the property doesn't contain some sort of value by default.
Is there a reason why you are going to the trouble of using the UL/LI structure? IMO, using UL/LI to control a portion of the layout is just as bad as using TABLE.
Since all elements can exhibit any css property, an alternative (and more controllable) solution might be use a single "root" level DIV, that contains your text-links, and then use CSS to simulate the embedded structure of the UL/LI relationship.
This clears a level of clutter out of the DOM (faster processing). If the list of links are dynamically generated, it also eliminates the "for-in loops" required to nest A's within LI's, which get nested within UL's, etc. :ice cream headache:
Example:
========================================
<!-- the HTML portion of this example
<div id="menu00">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
</div>
<!-- The accompanying CSS
/*
div#menu00 a {display:block; margin:0px border:0px padding:3px}
*/
-->