I need to assign css that will get "Dusty Arlia" not to underline.
<p>
<span class="published">
By: Dusty Arlia<br />
Published on December 19, 2011<br />
Updated on January 26, 2012
</span>
</p>
I tried using CSS
span.published a:hover {text-decoration:none;}
but that didn't work, so I tried
.published a:hover {text-decoration:none;}
...and more. The CSS is in an external style sheet. I have placed these lines of CSS at the bottom and top of the stylesheet (I think it's at the bottom of the CSS page that gets rendered last). Anyways there is no CSS for the "published" class, but I do have CSS to underline my hyperlinks. I would like the hyperlink for my name not to have an underline. I CAN'T edit my HTML. I have hundreds of pages with this layout. I know I could possible do a "replace all" function if I have to edit the html, but I would like a CSS fix.
if you think the css declaration is being overridden by another stylesheet, you can try saying !important at the end of it, which would override that other style (if it itself didn't already have !important)
span.published a:hover {text-decoration:none !important;}
Your css should work as defined unless some other generic selector is redefining it. Try this:
span.published a:hover {text-decoration:none !important;}
Sounds like you've got some CSS somewhere that's taking precedence over the bit you're adding. If you've got Chrome you can use developer tools to look at all the rules affecting a particular element (right click -> inspect element, look under "Matched CSS rules"). You can do similar with Firebug in Firefox. This should give you the insight you need to fix the problem.
When all else fails, !important can be useful.
I think the problem is, that your a:hover rules are not applied, because your other a selectors have more weight (specifity) and therefore overwrite your a:hover selector.
Eric Meyer has a great article on that subject: http://meyerweb.com/eric/css/link-specificity.html
First of all, make sure your a: selectors have the following recommended order:
A:link
A:visited
A:hover
A:active
To remember this order I always use the LoVe/HAte mnemonic.
By the way, the :hover pseudo class only applies to links which are in hover state (i.e. the mouse is over). Did you also specify the no-underline rules for a:link or a?
If none of that helps you might also try the !important directive. However this should not be necessary at all, but it might help you to figure out where the fault lies.
Related
I'm getting really confused here with my stylesheet. I have a lot of specific link styles in my sheet, and for some reason randomly one of them will get overridden by something else when I check the page with Chrome Dev Tools or Firebug. After fiddling around with !important cases and realizing that they are slowly making my code absolutely terrible, I've removed them all and am trying to figure out how to organize my link style to get all the right styles in the right places without them being overridden.
Basically I have like so:
.newlinks a {
some styling}
.dl a {
some styling}
.abclink a {
some styling}
And .newlinks is getting the "some styling" from ".abclink a". I'm really confused why this is happening if the class has a specific name and not just like "p" or something. Any explanation would be helpful! Thank you!
edit: here is the order of the html
<div class="newlinks"></div>
more of the page..
<div class="abclink"></div>
<div class="dl"></div>
I could post the longer code if necessary, I just thought it might be a general issue with my ordering or wording or something.
editedit: here it the relevant css/html in a jfiddle
http://jsfiddle.net/Ub6er/
as you can see in the jsfiddle, the link in "underrighttext" is getting the style from .dl :(
The reason underrighttext is being styled like dl is because of how you've declared your CSS for dl:
.dl a, a:active, a:visited {
...
}
This selector, which I copy-pasted from your JSFiddle, will apply to all a in dl, but also to all a:active and a:visited. Not just the a:active inside of dl!
You need to fix your selectors for the active and visited state to be like this:
.dl a, .dl a:active, .dl a:visited { ... }
Right now, your active and visited links are just being styled with whatever was the last style parsed by the browser.
I've updated your jsfiddle with the correct CSS selectors. It should work now as you expect it.
I need to hide 3 icons in a page where I don't have access to html but where I can modify CSS file.
The html code is:
<img class="color_box" title="Annotations" src="http://www.site.com/images/notice.png">
<span class="with_tooltip" title="This is a message"></span>
<img class="color_box with_tooltip" style="background-color:#FFFFFF;" src="images/clear.gif" title="White">
I tried different combination such as :
.color_box with_tooltip{
display:none;
}
or
.color_box, .with_tooltip{
display:none;
}
but none of them allow to hide all icons. Some are hidden and some others no according how I change my code..
Any suggestions please ?
CSS rules are applied via a specificity level. Rules that are more specific can trump those that are less specific.
So you may have a style like
#id .yourClass {something...}
That is trumping your .yourClass declaration alone.
A way around this is to use the !important flag. Try this:
.color_box, .with_tooltip {display:none !important;}
!important is typical a 'last resort' as it can make future CSS updates a pain, but the one place it is useful is when you have to modify an existing site via CSS only and simply have to strong arm some of your changes.
Try adding the !important attribute to your second selector listed above. It could be that there are other styles in place that are overriding the hiding.
I created a very simple JSFiddle that has this working without using the !important clause. You can remove the CSS and add it again to see it in action:
.color_box, .with_tooltip {display: none !important;}
Ok, this might look like another stupid question, but I cant find answer.
See this fiddle:
Remove #Navigation in CSS declaration here:
#Navigation .stretch {
...
}
so it becomes:
.stretch {
...
}
Why browser (chrome Version 26.0.1410.64 m) ignore this rule?
I have tested also on firefox.
Probably it is not CSS priorities issue, because DevTools neither FireBug doesn't show it entirely. Not even overlined.
Thanks
EDIT: Many thanks guys! I couldn't see those crossed rules before, I was scrolling trough several times, in devTools and in fireBug and solving such a misserable "simple" problem for more than hour.
the rule defined only with .stretch selector is less specific than #navigator li, and it's not applied even if defined later on cascade. Thus display will be ever inline
It isn't ignored, it is overruled by #Navigation li because that selector is more specific. It sets display to inline (instead of your intended inline block).
You can easily spot this when you 'inspect element' in Chrome. It shows the styles of the element, and crosses out the overruled styles.
The issue is the #Navigation li has higher specificity than .stretch since it contains an id selector.
The reason you do not see it is because it is empty and you most likely select the previous element (on jsfiddle code).
If you select the empty li from firebug it shows it is overriden.
Is there any reason why this does not work on Internet Explorer or Chrome:
<html>
<head>
<style>
A {font-weight: bold; color:black;}
A:visited {font-weight: normal; color: black; }
.Empty {font-weight: bold; color: black; }
</style>
</head>
<body>
click me
</body>
</html>
The link I click never goes to normal and just stays bold. On some other browsers it works.
Changing case did not affect it. Changing a to a:link did not affect it. Changing color works, just not font-weight.
One workaround was to change accessibility to ignore web colors. I do not have access to the source, so I had to do it this way.
Actually, this has nothing to do with case sensitivity. This is a security feature. The functionality of :visited pseudoclass has been restricted in many modern browsers (Fx4, IE9, Chrome) to prevent CSS exploit: read about it here.
Nowadays, getComputedStyle() in these browsers usually returns values for visited links as if they weren't visited. However, I can simply imagine circumventing of that: using font-weight for visited links, the element's width changes so browsers that would allow changing font-weight for :visited links wouldn't actually fix the security hole.
You can see there are some specific things browsers do to protect against this:
The window.getComputedStyle method, and similar functions such as element.querySelector, will always return values indicating that a user has never visited any of the links on a page.
If you use a sibling selector such as :visited + span, the adjacent element (span in this example) will be styled as if the link were unvisited.
In rare scenarios, if you're using nested link elements and the element being matched is different from the link whose presence in history is being tested, the element will be rendered as if the link were unvisited, as well.
Thus, there's no workaround for this issue.
One useful attribute that does work with :visited is background-color. So try:
:visited {background-color:red;}
:visited also works on non-a elements.
The problem has to do with history sniffing, changing css properties is disabled for visited links due to privacy issues.
I came up with the following workaround to reach the desired effect.
It is possible to change the background-color of the visited link.
The solution is very simple:
set a background-image on the link with the same height as your link
and 1px width and repeat the image horizontally
the image has the same color as the background of the link
make one pixel of that image transparent, in the vertical middle
on :visited state just change the backgroundcolor of that link to the text-color of the link
Only one line of the background-color wil be visible, because the background-image is masking it
Here's an example:
a:link {
color:#000;
background:#FFF url('../img/linethrough.png') repeat-x top left;
}
a:visited {
background-color:#000;
color:#000;
}
CSS itself is not case-sensitive, but if the HTML file using this style has an XML declaration and an XHTML doctype, that CSS is not going to work, because tags are case-sensitive. You'll have to set the "a" tags to lower-case.
Explained here:
http://reference.sitepoint.com/css/casesensitivity
Perhaps try changing the color attribute and see whether that has an effect at all.
To troubleshoot, you might want to try to utilize the developer tools in chrome to see what style is applied.
You need to have separate declarations for a:link, a:visited, a:active, etc.
Remove your first style that does not contain a colon. It's overriding. Replace with a:link.
I have got a CSS division called home which has got certain attributes with an action for hover for the anchor tags inside the home division like this:
#home a:hover
{
background-image:url(images/template_03_1.png);
position:relative;
top:3.5em;
left:0.5em;
}
Now, what I want to do is access the 'home' id's attributes inside the block defined above so that I change the properties of the home division whenever some one hovers on an anchor tag inside the home division. I know this is very easily possible in JavaScript but is this possible using CSS only.
Thanks,
niting
Am I correct if I assume you want the following?
#home a:hover
{
#home.background-color: #fff;
}
If so, then: no. Not without JavaScript and not even with CSS3. You cannot edit an others rule's properties.
Recursion is also not possible, as you always style that what was selected last in the rule, so typing #home a:hover styles the anchor if hovered, #home .class styles anything that has class="class" and is a decendant of #home.
In other words, recursion with CSS-selectors is not possible (or I don't know about it...)
You could try setting the hover on #home itself, but that won't work in IE(6). Unfortunately, you can't style a parent based on a child's pseudo-class. Javascript is great for this.
If you have exactly one <A> in your <DIV> then maybe you can style your <A> to have the same dimensions like the surrounding <DIV> and give the <A> the desired background.