Welcome to WebmasterWorld Guest from 34.228.115.216

Forum Moderators: not2easy

Message Too Old, No Replies

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

     
8:16 pm on Jul 22, 2008 (gmt 0)

Junior Member

10+ Year Member

joined:Dec 31, 2003
posts: 57
votes: 0


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.

9:48 pm on July 22, 2008 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 29, 2003
posts: 1676
votes: 0


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;*/
}
3:08 am on July 23, 2008 (gmt 0)

Preferred Member

10+ Year Member

joined:Feb 28, 2005
posts: 646
votes: 0


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 :)

3:52 pm on July 23, 2008 (gmt 0)

Junior Member

10+ Year Member

joined:Dec 31, 2003
posts: 57
votes: 0


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.
3:55 pm on July 23, 2008 (gmt 0)

Junior Member

10+ Year Member

joined:Dec 31, 2003
posts: 57
votes: 0


hopefully there is no issues about the DL DD elements in some other browser I dont know about
10:33 pm on July 23, 2008 (gmt 0)

Preferred Member

10+ Year Member

joined:Feb 28, 2005
posts: 646
votes: 0


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.
11:54 pm on July 23, 2008 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 29, 2003
posts: 1676
votes: 0


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.

5:46 pm on July 24, 2008 (gmt 0)

Junior Member

10+ Year Member

joined:Dec 31, 2003
posts: 57
votes: 0


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.

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members