Gates, Jeff wrote:
I have applied a style to my links with this css:
#right a:link {text-decoration: none;
border-bottom: dotted 1px #666;}
[...]
This puts a nice dotted line under each link.
Interesting, though it might be confused, by some visitors, with dotted
underline of abbreviations or acronyms.
This looks nice for
text but I don't want it showing under my image links.
There's no way in CSS, as currently defined and implemented, to define a
selector that selects elements on the basis of their content - like "those
link elements that contain an img element". So need a workaround that
overrides the settings on the basis of a class set on the link elements (or
their parents). And that seems to be what you're doing...:
The class of one subset of image links is "download-file". I've tried
styling that like this: .download-file {text-decoration: none;
border-bottom: none; } and various variants like: .download-file a
{text-decoration: none; border-bottom: none;} plus others. But none
seem to override the #right a styles.
A URL would help, but it seems that your selectors are not specific enough.
The selector
#right a:link
is more specific than
.download-file
or even
.download-file a
and therefore "runs over them" when there is a conflict.
The clean approach is to use selectors that are more specific than those in
rules that are to be overridden. E.g.
#right a.download-file:link { border-bottom: none; }
A simpler but somewhat rude way is to use !important:
.download-file:link { border-bottom: none !important; }
--
Yucca, http://www.cs.tut.fi/~jkorpela/
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
