This is an artifact of IE's white space bug. It is triggered by making <a> {display: block;}. There are structural cures, removing the white space from the html source, or you may get to the core of the problem and trigger IE's hasLayout property. One of the simpler methods is to use the Holly Hack on 'a'.Hi all,
I'm trying to create a list in which each "li a" has a background image which changes color with "li a:hover".
I've gotten that to work, but am having trouble getting them to look the same in both IE6-PC and FF 1.0.3.
Here's the file I'm working on:
http://pandasteak.com/humu/essays/cross-browser-problem.html
If you compare the two in IE and FF you'll see the difference: There seems to be a 16px gap between the "li a" elements in IE, none in FF.
<snip>
/* \*/
* html li a {
height: 1px;
}
/* */I've made a test case document you may see at <http://www.csscreator.com/css-forum/ftopic9016.html>, along with a small write-up.
I'm also noticing that in IE the "li" extends to the right margin beneath my float, whereas in FF it does not.
I've experimented a lot with margin and padding on the different elements, but to no avail.
Generally, as I experimented all that happened was a loss of control over the positioning of the background image. That was a hassle.
It is my sense that the IE rendering is correct. The list, a block element, should extend the full breadth without regard to the float. Only the line box should be aware of the float. Put a right margin on the list large enough so that it does not reach to the float.
cheers,
gary -- Anyone can build a usable web site. It takes a graphics designer to make it slow, confusing, and painful to use. ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
