Odd List issues with IE and display: block

While building a tree based menu with a soon-to-be-released DWfaq extension, I started running into some very odd issues. The navigation is your typical +/- tree based menu. In order to get the + and - icons to be clickable, I set them as a background image on my <a> tags, and added some left padding to them. This worked well in Mozilla and IE on the PC and Safari on the Mac. However, IE on the mac would display the hand cursor over the + and - buttons, but they weren't clickable, you had to actually click the text to make it work. In order to fix the clickable issue on IE5 Mac, I set the anchor tags to display: block. Perfect in IE Mac, but this caused another problem....

In IE 6 on the PC I started getting some weird padding issues. I have this code:

<ul id="ulNav">
  <li><a href="item2.htm" class="hasSub" 
    onclick="...">Item 2</a>
    <ul class="subMenu" id="sub2">
      <li><a href="asdf">Sub Item</a></li>
      <li><a href="asdf">Sub</a></li>
    </ul>
  </li>
  <li><a href="item3.htm" class="hasSub" 
    onclick="...">Item 3</a>
    <ul class="subMenu" id="sub3">
      <li><a href="stuff.htm">Sub it</a></li>
    </ul>
  </li>
  <li><a href="stuff.htm">Item 4</a></li>
</ul>

Now in IE on the PC I was getting this, notice the extra space between collapsed lists:

Figure 1: List in IE with spacing

Well no amount of fiddling with margins and padding on <li>s or <ul>s was doing the trick, so I figured hey, I'll add some borders to the <li> to see where my margins are falling... well this was the result, without any code changes besides adding a border to the <li>s (li {border: 1px solid black;}):

Figure 2: Added borders to the &amp;amp;amp;lt;li&amp;amp;amp;gt;s

<head scratch="vigorously" /> Okay, now I'm confused. Placing a border on the <li>s caused the reserved space between elements to collapse. I tried a border: 0px and a border: none with no luck as well. So I eventually settled on li {border: 1px solid #fff;} (transparent inherited the font color, black):

Figure 3: 1px white borders...

Once the borders were added the menu was good to go. Anyone have the slightest clue why this might be happening, and what IE6/PC is thinking? Every other browser got it right...

Posted by Daniel Short on Mar 17, 2004 at 12:00 AM | Categories: (X)HTML - CSS - Dreamweaver -

Comments