overriding css values

**jigarshah** · 11-19-2006, 10:03 PM

If i put this style for <a> then it also gets applied to <a><img></a>
Anyways it can be prevented ?

Code:

#content a:hover{
text-decoration:none;
padding-bottom:2px;
background:url(images/flash2.gif) bottom left repeat-x; /* Delete this line to remove the flashing underline for regular links */
}

HTML Code:

<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<div id="content">
<a href="Mylink">My Link</a>
<a href="mylink.html"><img src="images/vcss.png" /></a>
</div>
</body>
</html>

I tried with adding this as well.

Code:

#content img:hover{
text-decoration:none;
background:none;
}

**mwinter** · 11-19-2006, 11:47 PM

Originally Posted by jigarshah

If i put this style for <a> then it also gets applied to <a><img></a>
Anyways it can be prevented ?

A selector cannot be made to discern between an anchor that contains an img element and one that does not. That is, one cannot say, "apply these declarations to an anchor only if it doesn't contain an image". At best, you could add a class attribute to the anchors with or without an image child element, though an alternative would be to add span elements to the image-less anchors and add the background to that, rather than the anchor itself. Neither is particularly pleasant.

Mike

**jigarshah** · 11-20-2006, 06:54 AM

Originally Posted by mwinter

A selector cannot be made to discern between an anchor that contains an img element and one that does not. That is, one cannot say, "apply these declarations to an anchor only if it doesn't contain an image". At best, you could add a class attribute to the anchors with or without an image child element, though an alternative would be to add span elements to the image-less anchors and add the background to that, rather than the anchor itself. Neither is particularly pleasant.

Mike

Thanks for your help. Can you show me sample for both. I m not tht good at CSS

**mwinter** · 11-20-2006, 11:25 PM

Originally Posted by jigarshah

Originally Posted by mwinter

At best, you could add a class attribute to the anchors with or without an image child element, though an alternative would be to add span elements to the image-less anchors and add the background to that, rather than the anchor itself.

Thanks for your help. Can you show me sample for both. I m not tht good at CSS

The class attribute route:

Code:

#content a.no-image:hover {
    text-decoration: none;
    padding-bottom: 2px;
    background: url(images/flash2.gif) bottom left repeat-x;
}

HTML Code:

<a class="no-image" href="...">...</a>
<a href="..."><img alt="..." src="..."></a>

Three notes, here:

Choose a better, more meaningful class name than 'no-image', if possible. I don't know exactly what you're marking-up, so that choice will have to be yours.
If you use a background image, it is often a good idea to specify a background colour, too. Disable images and ensure that the foreground content can still be read easily without the background image. If it cannot, add a suitable colour.
A foreground colour (color property) should be paired with any background-related declaration that specifies an image or colour. Relying on defaults can lead to clashes should a user have a different default scheme.

The span child approach:

Code:

#content a:hover span {
    text-decoration: none;
    padding-bottom: 2px;
    background: url(images/flash2.gif) bottom left repeat-x;
}

HTML Code:

<a href="..."><span>...</span></a>
<a href="..."><img alt="..." src="..."></a>

Hope that helps,
Mike

Thread: overriding css values

Thread Tools

Search Thread

overriding css values

Bookmarks

Bookmarks

Posting Permissions