2 replies [Last post]
lightbox
Offline
Regular
Last seen: 14 years 31 weeks ago
Joined: 2004-05-20
Posts: 25
Points: 0

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

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 4 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

more &lt;li&gt; problems with IE5

Hi lightbox,
Make sure you have no whitespace between the li's causes problems in certain browsers.

Hope that helps

AlanOnymous
Offline
newbie
Last seen: 17 years 22 weeks ago
Joined: 2004-07-02
Posts: 4
Points: 0

Re: more &lt;li&gt; problems with IE5

lightbox wrote:
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}
*/
-->