I'm having an issue with IE8 where when an image is clicked inside of a link, the :active selector is not being triggered by IE.
Example:
HTML:
<img src="http://www.w3schools.com/images/pulpit.jpg">
CSS:
a {
display:inline-block;
padding:10px;
border:1px solid #F00;
}
a:hover {
border-color:#0F0;
}
a:active {
border-color:#00F;
}
Live demo: jsFiddle
When clicking the area around the image, the link acts normally, but when clicking the image itself, it fails to update.
Any ideas on why this is happening and if there are any workarounds? Since it is mostly working I don't mind appending some JavaScript if needed.
It may work better if you put the states on the img, but I can't get rid of the outline. http://jsfiddle.net/wSp7J/3/
Related
Not sure what I did last night but now I get up this morning and chrome seems to be overriding my anchor and input styles. I wish there was a snippet of code I could post here but I have no idea what code could possibly be causing it. i don't want to put !mportant all over the place to fix it so I am hoping someone can look at the test site and figure out what chrome doesn't like.
The headerWidgets at the top of the page (email, phone, and search) should not have decoration and should change color on hover. I can't even place the cursor in the search input anymore. And the nav menu shouldn't have decoration, but the hover works. Go figure. chrome dev tools shows me this:
a:-webkit-any-link { user agent stylesheet
color: -webkit-link;
text-decoration: underline;
cursor: auto;
}
and a bunch of user style sheet entries for input
a:-webkit-any-link {
color: -webkit-link;
text-decoration: underline;
cursor: auto;
}
is the default styles of webkit for the a tag.
Add a css selector #email a,#phone a and put the styles you want inside. Like this:
#email a,#phone a{
text-decoration:none;
}
and for the hover:
#email a:hover,#phone a:hover{
color:red;
}
A better selector to target all anchor tags inside #headerWidgets
#headerWidgets a {
color: #F00;
}
#headerWidgets a:hvoer {
color: #CCC;
}
And the reason why you cant click on your search box anymore is that div#headerMenuWrapper is blocking the way. On dev tools hover on this element <div id="headerMenuWrapper" class="clearfix"> you will see it covering #headerWidgets
I have this CSS Script here
#social_side_links li:nth-child(3):hover {
image
}
but it does not work....my image does not show up and yes the path is absolutely right...do I need to write this like
#social_side_links li:hover nth-child(3) {
This should work fine.
http://jsfiddle.net/EeHdF/
#social_side_links li:nth-child(3):hover {
border:1px solid #000;
}
Chaining :nth-child and :hover as you do here should work just fine. If you're using IE6, however, only the last pseudo-class in the chain will be recognized.
I know you feel the image is correct, but try another css definition like border (above) to see if it is an issue with your definition or the selector.
For some reason when I hover over the anchors in #navigationText, only the cursor changed to pointer, but the text-decoration:underline does not take effect.
Any idea why this is happening and how I can fix it?
My css says:
#navigationText a:hover{
cursor:pointer;
text-decoration:underline;
}
Here is a live link to the page where it is not happening: https://dl.dropbox.com/u/270523/help/initializr/index.html
I figured out that even though the underline is not appearing, the bottom-border is and on hover.
So if I change the on hover css to:
#navigationText a:hover{
border-bottom:1px solid #000;
}
This is not the same, but it is a similar effect.
Try setting the font-family to a more generic/default typeface. When I toggle font-family:'Trend'; on line 95 of main.css via Chrome Dev Tools, the underline shows up on hover.
I'm not sure WHY it's happening, but I think that'll fix the issue.
currently i'm having 2 issues. first of all, in chrome and safari there is a gray border around an image link. the border isn't there in firefox. here's the code:
Link title <img class="leaving" />
and css:
.leaving {
background-image: url("images/leaving.png");
height:10px; width:10px;
display:inline-block;
background-repeat:no-repeat;
border:none;
}
how do i get rid of the border?
also, certain heading links are being underlined in chrome and safari even though i set text-decoration to none. i would like to know how to get rid of the underline and also how to change it's color.
<a href="link">
<h3>Title</h3>
</a>
a h2,h3{
color:#00264B;
text-decoration:none;
}
"a" is set to underline in other places, but shouldn't "a h3" override anything else? what's going on here?
thanks.
you have a possible bug in your code :)
Here's what you have so far:
a h2,h3{
color:#00264B;
text-decoration:none;
}
The code above say's all H2's which are contained with "a" tags, and all h3's (which are NOT contained within "a" tags)
Firstly if you want all H3's which are contained inside "a" tags, then you need to do this:
a h2, a h3{
color:#00264B;
text-decoration:none;
}
Notice that I've added another "a" to the CSS
Secondly, and perhaps more importantly, I think it's better form to enclose "a" tags inside "h" tags as opposed to the way you are doing it:
h2 a, h3 a{
color:#00264B;
text-decoration:none;
}
But that might not work with your existing code:
Hope this helps
It is famous cross browser issue across Firefox and Safari. How ever the workaround for this problem is replace the img tag with span tag and every thing works as expected. I have changed the code as below
<body>
Link title <span class="leaving"/>
</body>
</html>
or if you want to continue with the img tag itself you need to remove width attribute from css definition. Please find the modified css below
.leaving {
background-image: url("images/leaving.png");
height:10px;
display:inline-block;
background-repeat:no-repeat;
border:none;
}
Anyhow, I have a problem. A tiny problem I suppose, but one that's bugging me. I updated the CSS for my anchors on my blog, so that they were underlined with a border. Problem now is all my images that were linked are underlined, and it looks wrong.
So I assume the only way to fix this is to apply a CSS class to all the images inside anchors so that they have border: none;. I don't know how to do this though. Anyone willing to explain if this is even possible? Thanks in advance.
Try this:
<style type="text/css">
a img { text-decoration: none } // Images within
</style>
However, this is awfully general and if your anchors have padding, it won't work entirely, there may be residue underlining to the right and left of your image.
It would be better to turn underlining for links off in general, define a CSS class for your anchors, and turn underlining on in that class:
a { text-decoration: none }
a.my_anchor_class { text-decoration: underline }
Try this:
a img { border:none; vertical-align:top; }
It moves the underline to the top and underneath the image.
Underlining is controlled by the text-decoration CSS property. So if you want to turn that off:
a { text-decoration: none; }
In jQuery, you could use the has selector to add a class to all links that have an image inside them:
$('a:has(img)').addClass('image-link');
Then remove the border from those links in your CSS:
a.image-link {
border-bottom-style: none;
}
It would only work when JavaScript’s enabled though.