I have a link for headline, like the following,
Cat<span class="more">See More</span>
You see I have inside in order to flow "See More" to the right, so I have the following css
.more {float:right;}
a{text-decoration:none;width:150px;display:block;}
a:hover {text-decoration:underline;}
I expect that when I hover over the text "Cat", the "See More" is underlined, but it does not work in IE/Firefox, it works in Chrome though.
http://jsfiddle.net/ZW9tt/1/
Anyone know why?
Anyone know why?
What you're seeing in IE and Firefox is actually expected behavior, described in the CSS2.1 spec:
Note that text decorations are not propagated to floating and absolutely positioned descendants, nor to the contents of atomic inline-level descendants such as inline blocks and inline tables.
But wait, there's more:
Some user agents have implemented text-decoration by propagating the decoration to the descendant elements as opposed to preserving a constant thickness and line position as described above. This was arguably allowed by the looser wording in CSS2. SVG1, CSS1-only, and CSS2-only user agents may implement the older model and still claim conformance to this part of CSS 2.1. (This does not apply to UAs developed after this specification was released.)
Given that Chrome is a CSS2.1 browser, believe it or not, it's actually exhibiting a bug (which happens to have just been patched!). Here's the bug report.
If you need to apply the underline to the floated span, you'll need to apply it explicitly to a:hover .more as well:
a:hover, a:hover .more { text-decoration: underline; }
Use:
a:hover, a:hover .more {text-decoration:underline;}
How about only targeting the span aswell?
.more {float:right;}
a{text-decoration:none;width:150px;display:block;}
a:hover, a:hover span {text-decoration:underline;}
does this work?
a:hover span.more{text-decoration:underline;}
Why not put the class on the A link instead?
why not use a dotted border bottom as is much more interesting.
.more {float:right;}
a:link {text-decoration:none;width:150px;display:block;}
a:hover, a:hover span {border-bottom:dotted 1px #000;}
.more{float:right;cursor:pointer/* for ie6 */;}
a{display:block;width:150px;text-decoration:none;}
a:hover,a:hover span{text-decoration:underline;}
Related
I've styled links using CSS like the example below.
This is working as expected in Chrome however with IE8 I'm having this problem:
When you first visit the page all links do not have underline as expected.
If I hover on them they get underlined as expected.
If then visit the link the underline disappears as expected however if I again hover on them I don't get the underline anymore.
Any ideas...?
Thanks
a:link {color:#0064cc;font-family:Arial;font-size:13px;text-decoration:none !important;}
a:active {color:#0064cc;font-family:Arial;font-size:13px;text-decoration:none !important;}
a:hover {color:#0064cc;font-family:Arial;font-size:13px;text-decoration:underline !important;}
a:visited {color:#0064cc;font-family:Arial;font-size:13px;text-decoration:none !important;}
Your problem comes from the fact that your links aren't styled in LVHA order. You should style them with :link first, then :visited, then :hover, then :active for consistent cross-browser results.
Additionally, any style applied to :link doesn't need to be reapplied to :visited, :hover, or :active unless you want to override it with a different value. For example, when you declare text-decoration:none for :link, you don't need to put that in any other definitions except for :hover, where you want to override it to none. Since all of the styles except for :hover are the same, you can kind of bypass the LVHA order here:
a:link, a:visited, a:active {
color: #0064cc;
font-family: Arial;
font-size: 13px;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
Hope this helps!
Edit
Although your issue isn't related to your use of !important, it is generally a good idea to avoid using it. It leads to some pretty non-semantic CSS. It's better to have a comprehensive understanding of the order in which CSS selectors are applied (it's not as simple as you might think!). Check out the MDN's documentation for more info.
Try to list the different selectors in the correct order.
a:hover MUST come after a:link and a:visited
a:active MUST come after a:hover
Also, you should not use !important. This can cause you problems later.
Src: http://www.w3schools.com/css/css_link.asp
Just have a read about CSS selectors specificity, and reorder your styles rules:
http://www.w3.org/TR/css3-selectors/#specificity
And try to avoid !important like the Devil avoids the Cross.
I have this code, please observe this fiddle:
http://jsfiddle.net/VjhJ4/19/
When you hover over the words, the text color changes to white - which is how I want it. However, when hovering over the 20px border-bottom, the text color does not change to white. Just hover your mouse over the border-bottom and check.
How do I make so that the text color changes to white when you hover the bottom as well? I currently have hover settings on ul#secondary-menu a:hover { color: #FFFFFF;}
Just add (or amend your existing CSS to include) the following:
#second-menu ul.nav li:hover a {
color: #fff;
}
JS Fiddle demo.
Can you explain why it was not changing the hover previously and how this helped. As I mentioned, my coding knowledge is limited so I am trying to learn what the issue was here
It wasn't changing the hover effects previously because you'd, presumably (and I am presuming, I gave up reading your CSS less than half-way through), specified a :hover rule for the a element that was a child of the li element, but the border is attached to the li, not the a. So hovering over the li's border had no effect.
This rule simply specifies that the colour of the a element within the li should be white (#fff) in response to the mouse hovering over the li element. In practice, placing this rule at the end of the stylesheet caused it to override any other conflicting rules that might have been declared elsewhere (and, once again, I gave up reading the stylesheet due to its length).
I'd recommend finding whatever rule you have that defines the a:hover effects, and add the two rules together, for example:
#second-menu ul.nav li a:hover,
#second-menu ul.nav li:hover a {
color: #fff;
}
The specificity may not need to be quite so high, so you might be able to reduce the selector, to something shorter like:
ul.nav li a:hover,
ul.nav li:hover a {
color: #fff;
}
Oh, and it's worth noting that you have quite a mix of in-line (style="...") and external styles (using a stylesheet); try and use only the external form, for clarity and for ease of updating, editing and maintaining.
If you want the border to be a part of the hyperlink (that is, the user can click on the hyperlink when the mouse is over the border), then you'll need to remove the border from the li and add it to the hyperlink instead. If necessary, add display:inline-block to the hyperlink.
If the border doesn't need to be a part of the hyperlink, then #David Thomas's suggestion should be all you need.
Modified demo
Search for the string
ul#secondary-menu a:hover { color: #FFFFFF;}
in your css style and replace it with
ul#secondary-menu li:hover a{ color: #FFFFFF;}
Here's a screenshot of the problem:
Notice that we're on the stalk page. The CSS I wrote is supposed to change the color of the active page. Here is the CSS:
#nav {
border-top:10px solid #A7C1D1;
height:45px;
padding-left:100px;
padding-top:20px;
margin-left:0;
color:#000;
}
#nav a {
color:#000;
text-decoration:none;
}
#nav a:visited {
color:#000;
}
#nav a:hover {
color:#93AFBF;
}
#nav .active {
color:#93AFBF;
}
Before, I had the CSS for #nav .active to create a border around the active page. This worked and I could see the border around the word "stalk" when I was on the /stalk page. But this time around, I decided to just change the color of the word. This is where I ran into the issue.
Here is the HTML rendered for the page:
<div id="nav">
home · stalk · link3 · link4
</div>
If I take away the CSS for #nav a:visited then the CSS for #nav .active works, but now the visited links are blue when I want them to stay black.
Use
#nav a.active {
color:#93AFBF;
}
The #nav a:visited has higher specificity w3 specs than #nav .active and thus gets applied.
Try
#nav a.active
{
color: #93afbf
}
That should do it.
try:
#nav a:link {color: #000;}
#nav a:visited {color: #000;}
#nav a:hover {color: #93afbf;}
#nav a:active {color: #93afbf;}
You are confusing the active pseudo class
Site Point Refrence
This pseudo-class matches any element that’s in the process of being activated. It would apply, for instance, for the duration of a mouse-click on a link, from the point at which the mouse button’s pressed down until the point at which it’s released again. The pseudo-class does not signify a link to the active, or current, page—that’s a common misconception among CSS beginners.
Similar Problem
Border property is not inherited while color property it is. So you inherit the color property for your link from the #nav, while the border property was the one declared in the "active" class rules. You should declare the color property for the link with the "active" class as suggested by Gaby
Tonight I found an unusual one. (A link color that I couldn't change.) I went into the inspector and first found the text-decoration-color property set. But no, that would be too easy. I scroll down to color and find this :not selector, which a theme author created. In my specific case, the solution was to duplicate (overwrite) this weird selector with the color I wanted:
#the-post .entry-content a:not(.shortc-button) {
color: white !important;
}
My suggestion is to go into your inspector (F12) and find the "Computed" tab and look where the colors are coming from. Usually it's straightforward where the color is coming from, and the inspector will even tell you which file and which line number set the color. Then the decision is, do you have access/permission to that file? Or maybe you have access, but do you necessarily want access to that file?
If you want to avoid changing the source of the color, for whatever reason, you can just re-declare the color again further down the page, like in your footer, or immediately after the theme is loaded, whatever the case may be. Of course given the option, it's usually preferable to find the root of the problem and then you end up using less CSS code which loads faster and is easier to maintain.
At http://www.wsl-ltd.co.uk/ i have a 'special offer' badge positioned absolutely with some text floated and relative inside.
For some reason, Webkit browsers are applying a red underline to some of the text - I have tried everything but just can't for the life of me work it out.
Does anyone know if this is a weird quirk of webkit, or is it my CSS? Cheers.
Bug in WebKit.
Define text-decoration:none; on the <a> element itself - should help.
The problem is with styles on <a> element. I think you could insert following to CSS to fix it.
.ie6wrap a {text-decoration:none}
(I checked it, you use .ie6wrap only for one element, so it should be safe)
If you want more details, following CSS is responsible for it:
a:link, a:visited, a:focus{
color: #d58d31;
text-decoration: underline;
}
You seem to remove underline on child elements of that <a>, but Webkit doesn't work in such way, because underline is under <a>, not on child <div>.
You have all the spans that contain the text wrapped in a single <a> tag, so the text is being underlined. You'll need to override the stylings to handle this, or move the <a> tag someplace else.
This happens because those spans are under
<a href="contact-us">
which has the following style:
a:link, a:visited, a:focus {
color: #D58D31;
text-decoration: underline;
}
writing somewhat of a css hack, styling for :hover {} works interestingly, but browsers treat a:hover differently for full links VS hash tags.
from http://inqdrops.com/welcom/
a, a:active, a:visited { color: #765; text-decoration: none;}
:hover { color: #ff5e99; text-decoration:overline; background: #222}
for this code, hovers on <a href='http://what.eva/'></a> and <a href='#whateva'></a> behave differently. They also differ for webkit and gecko.
Can someone explain what is happening?
--
EDITED FOR EXPLANATION ON SOLUTION
the answer by #babtek pointed me in the right direction, and the solution was to expand the css rule to :hover, :visited:hover {...}
I think a:visited ends up being more specific than :hover since it has a tagname as well... your "#" links might not get flagged as visited?
WHy don;t you change the css to
a:hover
in case someone is intersted, what i was missing was the css rules' order. plus a psuedo:psuedo rule
a, a:active, a:visited {color: #765; text-decoration: none;}
:hover, :visited:hover { color: #ff5e99; text-decoration:overline; background: #222}
thanks fo the tips