A–C
D–H
I–Z
Developer services
Project centers
Community resources
- Adobe Cookbooks (share code)
- CSS Advisor (browser bug fixes)
- Exchanges (share components)
- Adobe Labs
- Adobe Open Source
- Forums
- RSS feeds
- Bug base
- User groups
- Adobe Community Professional
- Developer events
Integration
Product documentation
Downloads
Samples
Training and books
- Online training
- Classroom training
- Certification
- Adobe Developer Library
- Adobe Press
- Safari Books Online
Newsletters
Blogs
Archives
ADC program
Additional resources
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
Comments (9)
To add a comment, please Log in.
I use it and work perfect
by hitman1st on July 25, 2010
It's work perfect with minor change to work with my site
first put that code on the header under your main style (if you use it in the same html file )
second use your element ID or class that have the issue "don't use it to all <a> element" by changing the code like this
<!--[if IE]>
<style type="text/css">
#LeftBar ul li a { zoom: 1;}
</style>
<![endif]-->
as you see #LeftBar ul li a is my specify element that had the problem ...
that element used for list that viewing vertically ...not working with horizontal(in-line) list ..
I use the second solution
a { display: inline-block; }
ant it work perfect too .
Have nice day
Placement
by Malaperty on January 25, 2010
I'm an old html'er and have been using a bunch of new tools - Dreamweaver, Fireworks, and I'm learning CSS and Javascript all at the same time. So forgive my ignorance but where do I put the second option? Does this go on my CSS form or in the body of my html...if so, does it go within the UL tags? I'm lost...but am a fast learner. ;)
Thanks!
Some Help
by MAE6093 on June 1, 2009
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
by julzmon on February 3, 2009
All of these work well... Thank you!
Can't take all the credit, wish I could :)
by gary.turner on February 3, 2009
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
by BadexBinliner on November 12, 2008
li {
height: 1em;
}
html>body li {
height: auto;
}
Can't be group in the same rule
by Thierry Koblentz on December 17, 2006
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
by Thierry Koblentz on December 17, 2006
"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
by Thierry Koblentz on December 17, 2006
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; }