Accessibility

CSS Advisor

Extra Whitespace in List Links bug

by CSSAdvisorAdmin on November 1, 2006
Edited by: LoriHC (Dreamweaver Team) on November 24, 2009
Avg Rating 3.9 (16)   |   Log in to rate post.

Tagged with Explorer 6.0 , Explorer 5.0 , display , Explorer 5.5

Problem

If a link with display: block and no explicit dimensions is inside a list item, any spaces or linebreaks that follow the list item in the code will cause extra whitespace to appear in the browser.

Solution

Apply zoom: 1 to the block-level links in a conditional comment, or specify display: inline-block followed by display: block for the links.

Detailed description

In some cases IE will treat whitespace (hard returns in your HTML's text) between an ending </li> and the next opening <li> tag as literal linefeeds- adding unwanted whitespace in the rendered HTML page between your list items. Although an easy workaround is to remove all space between closing and the next subsequent opening <li> tags, it isn't optimal for code readability.

There are two ways to fix this bug: The first is the IE7-safe replacement for the Holly Hack; it involves specifying zoom: 1 for the links inside a conditional comment.

<!--[if IE]>
<style type="text/css">
a { zoom: 1;}
</style>
<![endif]-->

The second fix involves a cascading 'juggle' of the inline-block property on listed anchors to turn on hasLayout, then revert the rule without turning hasLayout back off. For example:

a { display: inline-block; }
a { display: block; }

The first rule turns on hasLayout in IE, while the second rule will override the first for all intents and purposes- without turning off hasLayout. Nice workaround, Gary!

Bug and fix originally published by Gary Turner at CSS Creator.com.




Text ID: EXTRA_WHITESPACE_IN_LIST_LINKS



Comments (7)

To add a comment, please Log in.




Some Help

New to all of this, I tried adding this to my page, and Adobe still says i have the white space problem. If anybody can point tell me how to add the necessary hack/filter info to a page...I would appreciate it.

Thanks

All of these work well... Thank you!

Can't take all the credit, wish I could :)

I believe I was among the early reporters of this bug, but to my knowledge, Clair Campbell, http://www.tanfa.co.uk/archives/show.asp?var=300 should get credit for the elegant "tripswitch" hack.

cheers

Try This One

li {
height: 1em;
}
html>body li {
height: auto;
}

Can't be group in the same rule

I'm answering my own question here :)

IE does not turn on "hasLayout" if both declarations are in the same rule.

Heads-up about removing whitespace

"an easy workaround is to remove all space..."

Removing whitespace is an easy fix, but it may create issues:
http://www.tjkdesign.com/adobe_cssadvisor/whitespace_between_elements/

Best workaround ever

I didn't know about that one. Very smart.
But is there a reason for using two rules instead of one? Like this:

a { display: inline-block;display: block; }





CSS Advisor home
Submit a post

rss

CSS ADVISOR RSS FEEDS
Recent: POSTS | COMMENTS | EDITS


Browsers
Internet Explorer (45)
Mozilla/Firefox (16)
Opera (7)
Safari (13)
CSS Properties
Background (6)
Border (3)
Color (1)
Float (15)
Font (1)
Margin (6)
Padding (4)
Position (15)
Text (13)
Width/Height (9)