1. Home
2. Developer Center
3. Dreamweaver Developer Center
4. CSS Advisor

CSS Advisor

Extra Whitespace in List Links bug

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

---