Shoshanna Love wrote:
> I have a list of image links in a list with no white space between the
> li's in the HTML. In Win IE and Firefox a gap appears around the
> images. In Safari and Mac IE, it doesn't.
>
> The list is here (with the borders turned on):
> http://calreefs.dreamhosters.com/calendar/index.php?page=calendarmain
I believe there are many effects here, making this more complex than
expected. Btw, Safari shows the same problem if the doctype is changed to a
strict one (instead of the current, transitional.)
Part of the problem is caused by vertical positioning of the inline images
(which, by default, is baseline and leaves a small space below the bottom of
the images.) But adding "vertical-align: bottom" to the images doesn't
fully solve the problem. The inline anchors still have a minimum height
depending on the font-size. Adding "line-height: 1px; font-size: 1px"
seems to remove the extra space in all browsers, but I don't like this
solution (and probably it would not work in presence of a "minimum font
size" setting in the browsers' preferences.)
So I would better make both the images and the anchors "display: block"
This (as you already noticed) breaks the images right alignment, but you can
get it again simply using "margin: 0 0 0 auto" on the images (this make the
good browsers to honour the 0 value for the right margin.)
Summarizing: remove "display: inline" and alter the margin on the img, and
add "display: block" on the anchors.
It seems to me that this solves the problem in most browsers, the exception
being Win IE. It needs some more help: for example giving "hasLayout" to
the anchors and "display: inline" to the list-items. You need to feed this
to IE/Win only:
#topnav ul li { display: inline; } #topnav ul li a { zoom: 1; }
Hope this helps, you can probably try other variations.
Bruno
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
