At 11:31 PM 8/28/2005, Lorraine Nepomuceno wrote:
Arrgghh... it looks like I spoke too soon. The borders on the images
are gone in Safari, but I still see them on Firefox and Camino.
Please help!
http://www.splashscreen.com/test.html
with CSS at http://www.splashscreen.com/base.css
Lorraine,
I got rid of the border beneath your portfolio link image (in Firefox) by
adding this rule to the CSS:
div#contentmain p a
{
border: 0 none;
}
I don't know if [div#contentmain p] is the only context in which your
linked images will appear, but without altering your HTML markup this was
the only way I could specify the portfolio image and none other on the page.
You had tried to remove it by suppressing all image borders:
a img {
border: 0 none;
}
img {
border: 0 none;
}
...however the unwanted border was an attribute of the anchor itself, not
the image within it. CSS doesn't give us a way to style an element based
on what its child elements are, so we can't remove borders from anchors
that contain images. You may need to give those anchors an identifying class.
Now, however, the image does not change at all when I hover over it, which
in my view presents a usability issue. I recommend giving the user some
visual cue when they mouse over a hyperlink -- if not a border then perhaps
a modified version of the same image (dimmed, brightened, etc.).
To avoid a time gap when the image is moused over for the first time, you
can actually store both the hover & non-hover images in the same image
file, either side-by-side or one above the other, then change the
background image position on hover. Here's an article that demonstrates
that technique:
http://www.alistapart.com/articles/sprites/
Regards,
Paul
PS: I'm not familiar with the CSS rule {border: 0 none;} -- isn't that
needlessly redundant? I always use just {border: none;} and haven't had
problems, but let me know if I'm overlooking some arcane corner of styling
lore!
______________________________________________________________________
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/
