I am using a piece of html something like the following:-
<a class="somePseudoClass" title="Blablabla">Something</a>
and I have the following css in an imported file.
a.somePseudoClass:hover {color: #000000; text-decoration: underline;}
This works perfectly in Firefox 2.0 but in IE6 the underline fails to show.
Does anyone know of a workaround?
Looks like you need a href attribute to make it work...
a.somePseudoClass {text-decoration: none;}
a.somePseudoClass:hover {color: #000000; text-decoration: underline;}
<a class="somePseudoClass" title="Blablabla" href="#" onclick="return false;">Something</a>
In IE 6:
div#nav a {
text-decoration:none;
}
a:link is not defined in IE 6.
I just had this with ie6 and found this mssage here by googling.
My problem was the line height was set to the same as the font height. FF, Chrome, Safari and ie8 all showed the underline, but ie6 was cutting it off, so no amount of searching for overriding css elements or whatever would have found this.
this should work, but it depends on what other CSS declarations you have (before and after it)
How are you disabling the underline in the first place? Perhaps that is overriding this.
If you start with only your example on the page, and use text-decoration: underline, it seems to work fine. It's not IE, it's something else on your page.
Related
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.
Below are two links on where the underline is somewhat blueish and the other is the same color as the text
with the following code html <font color="#003300"> CLX qualifications...</font></a>
and I'm having trouble replicating how links are rendered in Quirks Mode when I want to render my page in IE standards. This is also happening to my links when, I run my page in firefox as well.
It looks like the font color is overriding the default a:visited style. This CSS should work for your needs:
a, a:hover, a:visited {
color: #003300;
}
Here is a demo (also you can drop your use of the font tag which is alwasy a good thing)
So i have some html:
<a class='clicktext'>...read more!</a>
and i want to give it a :hover animation, as so:
.clicktext{
}
.clicktext:hover{
text-decoration:underline;
}
.clicktext:active{
text-decoration:none;
}
Suffice to say, it does not work in Mozilla Firefox 5, even though it works perfectly well in Chrome and Safari. However, if i change it to
a{
}
a:hover{
text-decoration:underline;
}
a:active{
text-decoration:none;
}
It works perfectly fine in Mozilla Firefox 5! I have not managed to find anything regarding this online.
I could, of course, just change my styles to apply to the a rather than the .clicktext. The problem with that is that it would screw up my conventions, which is (as far as possible) apply all the styles to classes rather than to the tag names. After all, I have many other tags for which i do not want this underline-on-hover thing to appear.
Has anyone bumped into this, and perhaps found a nice solution?
edit: these also do not work
.clicktext a:hover{...}
a .clicktext:hover{...}
I had these kind of problems with Firefox and solved it by adding the tag name to class name:
for example I had this which worked in Chrome but not in Firefox:
.content .sidebar:hover{
background-color: red;
}
and fixed it by making it more specific like this:
div.content div.sidebar:hover{
background-color: red;
}
http://jsfiddle.net/rE8xU/
I do not see the issue, when moused over it does include an underline.
A possible cause of this issue is the level of importance that the class has.
Such as styles that are set by their identification tag will take over any class styles and so forth.
http://htmlhelp.com/reference/css/structure.html
check out cascading order
Lastly, make sure that the css file is properly linked and or embedded
you can use firefox to check as well.
You need to add href="#" to your . the :hover meta tag needs the link to have the href property set.
use <p></p> tag if you are not hyperlinking the text.
<p class='clicktext'>...read more!</p>
then for styling the text.
p.clicktext {
color: #ccc;
}
p.clicktext:hover {
text-decoration:underline;
}
Hope i Helped ;)
There's a big chance that you have a conflict somewhere in your CSS, because the jsfiddle with this exact code works fine in Firefox 5. You might want to check for ID-selectors with the hover-pseudoclass that could possibly overrule this line of styling. Inspect it with firebug to see what css is inherited.
You might be getting this problem for
1: not specifying the class which is clicktext in your case, or.
2: object a is associated with some other class not compatible with clicktext class!
I am saying this because my website
is running perfectly without any problem, in both Chrome and Firefox!
I am using hover to produce an overlay effect! This is what I am doing:
.container{
//your specifications
}
.image{
//your specifications
}
.text{
//your specifications
}
.container:hover .text{
//your specifications
}
I also think that the answer marked as "correct answer" is not correct.
I had same problem, was just not working on Firefox, quick close and restart app and was working again.
Daniel
I've come across an issue lately with my web design projects that has been insignificant enough to slip through my fingers unfixed a few times, but it's just gotten too annoying.
Say I have a style sheet with these rules:
a {
outline: 0;
text-decoration: underline;
}
a:link {
color: #0099FF;
}
a:visited {
color: #0099FF;
}
a:hover {
color: #FFFF00;
}
a:active {
color: #33FF66;
}
Links in my document will only sometimes have the correct colors, but sometimes they will just be the default blue->purple links. I'm on a black background, so these look awful.
If I refresh the page, about half the time they will render correctly. This is happening in both Firefox and Chrome.
What's going on?
If you are currently developing your css, it is very possible that the browsers have a cached version of the wrong version of the style sheet, which would explain why your links don't display correctly.
Try the following :
In your link to the css, add a query string with garbage values. This will force the re-download of the css and see if your rules apply consistently. If they do, then you know it is a caching problem. Leave the query string as is and your users will re-download the css.
If not, then you have a css problem. Download firebug for firefox, check one of the links that doesn't display the right color and see what rules apply to it.
Here is how you would add the query string :
<link rel="stylesheet" type="text/css" href="style.css?v=3">
Of course this is an old post, but I have been experiencing the same issues lately.
After some hours searching, I finally realized that my markup was invalid because using the following syntax:
<i>my link text</i>
This renders perfectly in all browsers but of course the 'a' selector in my style sheet was not enough.
In this case, I needed the following:
a i, a:hover i, a:visited i
{
some rule....
}
Hope this can help someone...
Sounds very odd.
First off I would put a color on your base a to match your a:link and a:visited:
a {
outline: 0;
text-decoration: underline;
color: #0099FF;
}
This should apply to every anchor tag it finds. if you have an anchor tag without an href the a:link wont apply.
I have an Html.ActionLink on my page and I am using the following CSS on it to give it an image and try and remove the underlining.....
a.searchButton
{
background-image: url(/content/images/DropAcross.png);
background-repeat: no-repeat;
height: 16px;
width: 16px;
display: block;
text-decoration: none;
clear:none;
}
Can anyone see a problem with this? All the CSS properties seem to work apart from the text-decoration: none, which seems to leave the underline in place.
You would have to look at the rendered html. In Firefox or Google Chrome, right click and choose Inspect Element.
You might find something silly like the searchButton class is being applied to a span that wraps the a tag, in which case, you would get everything working except the link specific rule:
text-decoration:none;
I know that it is old topic, but maybe somebody will considere it helpful -
"text-decoration" attribute, mentioned above, can be passed to ActionLink by construction like this:
#Html.ActionLink("Display_Name","Action_Name",null,new {style="text-decoration:none;"})
Setting text-decoration:none; ought to work.
Is it possible that there are some other styles overriding it? Have you looked in Firebug (or similar tools) to see what styles are being applied?
One possible answer may be the :hover, :visited and :active pseudo classes. If they are set to have an underline, then they will override the default style for the element.