Log in

View Full Version : 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 ?


#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>
<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.


#content img:hover{
text-decoration:none;
background:none;
}
mwinter
11-19-2006, 11:47 PM
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
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
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:



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



<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:



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



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

Hope that helps,
Mike