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.
Related
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 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
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.
Found an annoying bug today which crashed chrome and safari (so all webkit browsers?) with just CSS.
It's a hover menu, hovering over an element then displaying the next dropdown level. Works perfectly in all other browsers.
See here, top left 'rn': http://test.davebowker.com/rn-hover/
Hope someone has some thoughts, or knows a little more about webkit than I do. I'm sure it's css, as I've disabled all javascript, and also ran the dropdown in a fresh page all on its own. I also know it's the hover + display:block that is causing it. - Just not sure how to fix it. Maybe someone else has run into this bug?
Cheers,
Dave
EDIT: Included change made by Emily below. http://test.davebowker.com/rn-hover-fix/
Change
.ukn-network-jumper strong:hover + ul,
.ukn-network-jumper ul:hover {
display:block;
}
to
.ukn-network-jumper strong:hover + ul,
.ukn-network-jumper:hover ul {
display:block;
}
You don't want to display the ul when you are hovering the ul but when you are hovering the parent div.
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.