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;
}
Related
So, I need to remove a visited link coloring from my navigation bar, as it will look ugly.
I have tried to use text-decoration: none; and color: white; but that does not seem to help it.
CSS for navigation
Actual code
I removed the actual links from the code, in the real version there is link but for this question links are replaced with #
In addition to Bariock's answer, this will help reset your <a> links in all circumstances to your specified css.
a:visited, a:hover, a:active, a:focus {
color: yourColor !important;
text-decoration: none !important;
outline: none !important;
}
The !important signifies that it has a higher precedence than that of other rules declaring the same values for the same selectors. Note: you can still style them separately such like you would with :hover.
a:visited{
color: your-color;
}
I edited the <a> tag to go around the <button> so the text is back to white now and the button actually works. It is no longer just "click text to visit link" the whole button works.
<button class="dropbtn">Community</button>
Try adding a !important to the end of the css styles like so:
a {
color: white !important;
}
Hope this helps!
I recommend you first set the style of the link tag, for example:
.dropdown a{ color:#fff }
now your text links inside the container with the class .dropdown will be as white color. Then you don't need to set a visited link color, unless you want to set it.
If you want to get rid the underline in the link, your style will be like this:
.dropdown a{ color:#fff; text-decoration: none; }
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;}
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;}
here is the page : http://pfibco.ca/01-accueil-fra.php
I try to block hover highlight the menu... work almost fine
just the selected class dont apply... why ?
#menu ul li a .selected{
and the worst... the menu is completely destroy in ie6, why ?
i used the block propriety.. no choice for the hover...
display: block;
how to fix that ?
Try this for the selected problem:
#menu ul li.selected a {
The HTML has the selected class on the <li> so the CSS should match that.
I can't help you with IE6 though, it destroys a lot of things and my nerves are one of those things.
Answer for your IE 6 issues:
Each menu li tag seems having a style rule for line-height : 15.76pt, which is not found in other browsers. I guess IE6 incorrectly inherit the style from ancestor tag, maybe you can check you CSS file.
The border doesn't seem to work in each link, you can try to apply the border to its parent li tag instead of the anchor itself.
If you got hurry, you can use a litle hack for IE6 ( I'm got red now =X ).
/* hack for IE6 */
* html #menu ul li {
border: 1px solid #BFAF98;
border-top: none;
}
I think it's works fine.
I'm trying to figure out why the text in the left navigation panel on the following page is shrinking & underlining when you mouseover in Firefox.
http://fundcentre.newireland.ie/
Everything on the left & top is part of a wrapper that we inject our content into. Our content is everything from "FUND CENTRE" down.
Can someone suggest something I could do to sort this issue out? Thanks.
Stick .content in front of all your CSS rules.
So a:hover { ... } becomes .content a:hover {...}
This will limit any damage to the content div which appears to be all yours.
There are a couple of styles applied in your newIreland.css files. Which are causing this behaviour.
.ClipboardLink a:link, a:hover, a:visited, a:active {
font-family:Arial,Verdana,Helvetica,Sans-Serif;
font-size:12px !important;
padding-bottom:2px;
text-decoration:underline !important;
// check this line making css important causes it to be underline when you hover over
}
Text on the menu with mouse hover louses "bold" and gets "underline", this because you have :hover behaviors assigned with does properties...
I've took a sneak-peak to your css, but it's way to dense for my time right now... and to repetitive as well!
Try simplifying your css with common class's and find all your :hover events, taking a closer look to does who work on the same html elements as the one's used for the menu...
better yet, assign to the menu id or
class an :hover event with the same
properties than does used for the menu in normal
state!!