Display:Block on A Tag causes odd, weird, strange spaces and break IE6

[plasma800]

I just realized by looking at my site in IE6 that my nav menu has a huge problem.

I use a list and on the a display as block so I can have a hover color.

Whats happening is that some links have a HUGE gap under them and some don't. I cannot for the life of me figure out why.

Here's CSS

.lcontain {margin-left:10px;border-right:1px solid #BCBCBC;border-left:1px solid #BCBCBC;border-top:1px solid #BCBCBC;}
#lbutton2 {font-size:11px;}
#lbutton2 ul {margin: 0;padding: 0;list-style: none; width:145px;}
#lbutton2 li {/*border-bottom:1px solid #cccccc;*/}
#lbutton2 li a{display:block;padding:0; position:relative;color:#0000FF;/*333333*/text-decoration:none;}
#lbutton2 li a:hover {text-decoration:underline; background:#F2F7FA;}
#lbutton2 li.bottom {border-bottom:1px solid #cccccc;}

and here's the code for the list

<div class="lcontain">
<div id="lbutton2">
<div style="background-image: url(/images/amazing-deal.gif); background-repeat:no-repeat; text-align:center; padding:2px; "><font color="#FFFFFF"><%Response.Write Date%><br>
<strong>AMAZING DEAL OF THE DAY!</strong></font><br><br>
<a href="http://LINK.asp">LINK</a><br>
<br>
</div>

<div class="headfont2">Shop By Category > </div>
<ul>
<li><a href="/link.asp">link</a></li>
<li><a href="/link.asp">link &amp; link </a></li>
<li><a href="/link.asp">link</a></li>
<li><a href="/link.asp">link </a></li>
ETC...long list.
</ul>
</div>
</div>

I was wondering if maybe the margin on the container element is causing the problem, but I have another list on the other side of the web site and it does the same thing on the main ul, but any nested ul with in li works like a charm, I just cant figure it out.

[D_Blackwell]

A quick look and my first guess is that you'll need to jigger the declarations for #lbutton2 li and l#lbutton2 li a

This hack (two options) will simulate a fix long enough for you to identify where the space is coming from. I'll come back to it later if unresolved. It's a simple fix I'm sure, just no time right now for more than the hack.

#lbutton2 li {
border: 1px solid #fff; /*height: 1em;*/
}

[Setek]

Hi plasma800,

This is a bug in IE. You can fix it by simply changing the default display type of list items:

#lbutton2 li { display: inline; }

IE has a problem where if you set the content of a defaultly displayed list item to be displayed as block, it will display the whitespace (spaces, tabs, etc from the </li> to the next item's <li>) on a new line. Having the list items displayed inline will fix that.

Let us know how it goes :)

[plasma800]

You know what I did? I changed all of the lists to definition lists and that seemed to not only clean up the code a bit but also totally fixed the issue.

[plasma800]

hopefully there is no issues about the DL DD elements in some other browser I dont know about

[Setek]

Hi plasma800,

It's because

<dd>

elements, by default, are of display type

block

. List items' default display type is

list-item

. The bug will not present.

However, if you're not actually defining anything you shouldn't use a definition list. If you included the "Shop by Category" as a

<dt>

you could probably get away with it... you just have to be careful of the correct usage of elements.

[D_Blackwell]

To follow-up above:

If you had group of <dt>, "Shop by Category" being one - then multiple <dd> would be acceptable to me. No different than using multiple <ul> or <ul>; maybe preferable. Actually, no reason that you can't use single <dt> with multiple <dd>, though less common because an <ul> or <ol> would typically be the first tool one reaches for.

I suppose that defining 'definition' is a choice we have to make along the way. I use <dl> quite a lot. Often surprises me how many people never use them or have no idea how flexible they can be.

[plasma800]

I think it works great! I got the idea from a big ecom site and I was surprised I had never thought of it!

Like you said, it's very flexible, clean and easy to implement. I'll never do another nav UL ever.