Sent by Adam Kuehn on 19 February 2006 18:06
Bruno Fassino 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
>
>Summarizing: remove "display: inline" and alter the margin on the img, and
>add "display: block" on the anchors.
That's one way, of course, but it begs the question of why you are
using images for text links in the first place. Why not use text for
text? It simplifies most of your layout issues, and gives your users
the opportunity to resize one of the most important elements on the
page. Use text-transform: uppercase; font-family: Arial, sans-serif;
color: white; and text-decoration: none; (this last on both li a and
li a:hover). Given how the layout on your site works, you may also
want to give the links a background color, so that the link text will
contrast even if user resizing moves them off the dark blue header
background. Alternatively, allow the header div to grow with text resizing.
This way you can also avoid IE hacking.
HTH,
-Adam Kuehn
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
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/
