I have created a site and it looks great in every browser except IE8, there it appears that the links, when visited shift right and the clickable area migrates away from the text. Is there any easy way to fix this?
Site is online here:
http://serif.cz/clients/bikram/
It appears this CSS rule #fade A:link, A:visited is causing the problem because the 2nd part is applying the rule to all anchor tags.
Change it to...
#fade A:link, #fade A:visited
Related
I've been at this for over an hour. Chrome on Android seems to put a bluish color over active links or the parent of the active links. See the screenshot for what I am talking about. That is a nav with a ul, and an li and a tag for the "HOME" link there. I'm trying to make it look like the one below it all of the time. I've tried everything, a:active, li:active overriding the background color, but it always has that blue.
Anybody know which style it is in the user agent stylesheet that does that so I can override it? Or is it not possible to override?
OK figured it out. It was -webkit-tap-highlight-color, very much hidden in the dev tools.
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)
I am working with some links and I am using CSS to control their appearence. I have done the normal look and the a:hover look, but I have problems with the a:visited look.
When I try to put the a:visited to change the color when visited, the a:hover stops working and it stops showing the change of colors.
Does anyone know why this happens?
Your a:visited rule is probably after your a:hover rule, and since they have the same specificity, the last one overrides previous ones. Simply move a:hover to after a:visited and it should work. Alternatively, you could decrease the specificity of a:visited by changing it to :visited.
See your probable problem, one possible solution by changing the order, and the alternative solution by changing the specificity.
You could also add !important to the color property (example) but that's not a good idea because it will override even later and more specific ones, plus old versions of Internet Explorer don't support it.
I think you have other problem
look here
its working
http://www.w3schools.com/css/tryit.asp?filename=trycss_link
I'm having trouble with a -webkit-transition effect in a HTML page. The page is here:
http://www.newerawrestling.co.uk/new/
Basically, the colour of the links within the main sections (marked up in a <section> tag respectively) seem to be broken. They should be an off-white (#F5F5F5) and transition to a gold (#FFCC00) on hover, but they display as grey and flicker between both white and gold on hover but don't act as they should.
I've validated both the HTML and the CSS; the HTML passed with the CSS failed for containing CSS3 selectors and declarations (as far as could see) and I've inspected the links using Chrome's Web Inspector, but couldn't see any conflicting rules.
Has any one had this problem, or able to see where I've gone wrong?
Crap. As if by sod's law, I've just spotted the mistake after posting this question: I had a rule:
footer a:link, a:visited {
color: #999;
}
D'oh!
I have a webpage that uses sprites for its navigation link. In IE7 sometimes the links are not clickable. It works fine in IE8 and Firefox. Anyone encountered this before?
http://blazemanifesto.com
Thanks.
Edit
To clarify, on my computer, everything works fine. (Vista, IE8, Firefox 3, Chrome, Safari). I had a complaint from some users that the main nav wasn't clickable. Honestly, I thought "user error" and didn't look much further. Last night I saw my wife browsing the site (Vista, IE7), and noticed some times when she hovered over a link it was not clickable. The mouse pointer did not turn into a hand, and the link itself did not turn white. Clicking did nothing. Some links work fine, some are sporadic, some never work.
I've never seen this before, so I decided to ask you guys.
It seems that IE7 doesn't like that you have assigned the background image to the container .nav and that just shines through the transparent backrounds of actual links.
When I set the background image to the links directly, they started to work just fine. I suggest you do the same.
BTW, instead of writing long lines like these:
.nav .vision a:link, .nav .vision a:visited { ... }
.nav .vision a:hover, .nav .vision a:focus, .nav .vision a:active { ... }
I would just use:
.nav .vision a { ... }
.nav .vision a:hover { ... }
The first selector targets all A elements in whatever state they are and a:hover overrides that when the cursor is over A. (I guess you don't really care about all those :focus and :active states.)
Do you care about IE6? You have lots of layout/image problems there.alt text http://ejgejg.com/test/test.jpg
Just use Firefox. :)
Honestly, I think you'll need to use a strict dtd:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
See more on the IE blog.