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; }
Related
Here are two examples based on this HTML.
<a href="#">
<div class="foo">
hello
<span class="bar">world</span>
</div>
</a>
In the first one, I make the link not underline on hover, then make a sub-portion of the link underline, and that works fine:
a {
text-decoration:none;
}
a:hover {
text-decoration: none;
}
a:hover .bar {
text-decoration: underline;
}
http://jsfiddle.net/3qPyX/1/
In the second, I now reverse the selectors so that the second word should be un-underlined. However, now something strange happens. The entire link remains underlined even though the selectors seem like they should remove underline from the second word. <-- (this is the question. why does this happen?)
a {
text-decoration:none;
}
a:hover {
text-decoration: underline;
}
a:hover .bar {
text-decoration: none;
}
http://jsfiddle.net/EAmwt/
Can someone explain what's going wrong in the second example? Inspecting with Chrome shows the span.bar has a computed style of text-decoration:none.
Update: a few answers explaining how to get around the problem, which is great except that's not really my question. What I want to know is why is this behavior different than, say, bold? For instance, if I try the 2nd example with bold, I get the expected results: http://jsfiddle.net/3qPyX/4/
Explanation:
The problem is that some properties (like text-decoration) get drawn to the whole parent inline element, whereas others - like font styling (that get inherited) - get overriden by the children properties.
Just for illustration: simmilarly, if you set a background color to a parent element it will paint the background of the parent ... and you would have to set another color to a child to lay it over (default - transparent - will still show the parent style through), but if you set font-weight at a child it will apply to the text inside the child element and override the parent settings.
You can find more detailed stuff on the text-decoration property in the CSS Level 2 and Level 3 Specifications.
A simple solution
withot changing the markup, you could just display .bar as inline-block.
Like so:
a {
text-decoration:none;
}
a:hover {
text-decoration: underline;
}
a:hover .bar {
display:inline-block;
}
And the inline-block breaks out of the inline/text styling of the parent anchor element =) And you can then style it independently:
DEMO
When you do the text-decoration it is applied to the entire line at once. So the a:hover .bar doesn't cause any effect, because the underline is not being applied in the .bar but on the a.
Here is the specification: http://www.w3.org/TR/CSS21/text.html#lining-striking-props
UPDATE! (As #Cam suggested) :
You need the add in separate elements the parts of your text: http://jsfiddle.net/3qPyX/5/
The CSS:
.foo, a:hover .bar, a {
text-decoration:none;
}
a:hover .foo {
text-decoration: underline;
}
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 an image that is a link. When I click on it it sends me somewhere and then if I click back to return on that page that image has a 1px dotted blue border around itself. Furthermore, if I click on it and hold that border becomes red. This is really bad looking and I cannot find a way to delete that border.
I've tried with
a:visited {text-decoration: none}
a:active {text-decoration: none}
and with:
a:visited img{text-decoration: none}
a:active img{text-decoration: none}
with no effect.
By the way, this border does not appear in chrome.
Here is my css code regarded to that image:
#back_to_photos{
float:right;
position: relative;
margin-top:-238px;
margin-right: 40px;
}
a:visited {text-decoration: none}
a:active {text-decoration: none}
Thank you!
Maybe is something wrong with the order of your rules (don't know these are the only styles mentioned in your example). What you could try is to 'force it' by using !important:
a {text-decoration: none !important;}
Hopes it helps.
the solution for your problem is this:
a:link, a:link:hover { text-decoration: none }
hope it helps.
more info on: squarefree.com/styles
This post describes how to do so. Namely, putting outline: 0; in your a:visited CSS should do the trick.
text-decoration only deals with things like underlines and strikethroughs. The problem you're encountering is with outline that is put around clicked/focused links to tell the user that's what they're hovering over.
Do note that if you remove the outline it won't be apparent where the user is if they're navigating your page with the keyboard.
You want to use outline: none.
Be careful though, hiding the outline can lead to usability issues, especially with those users who navigate with the keyboard.
Example page,
Accompanying CSS
Should be a fairly basic issue but for some reason I can't figure it out.
Basically I want the links in my navbar to have no underline or colour change and remain white.
Any idea where I'm going wrong?
It's because you're selecting the main .links element, but not the actual a elements inside. This should do the trick:
.links a {
text-decoration: none;
color: white;
}
I wonder if there is any trick to solve this problem.
I have my link as below text and want to change the underline color.
This link contains in many lines which needs to change the underline color to be lighter than the existing one
Using border bottom is not the way to solve this because multiple lines.
are there any trick to solve this?
EDIT
#Paolo Bergantino: It works with IE8 , is it possible to hack with IE6,7?
If what you mean is a different underline color than what the text is, the only thing I can think of is to add a span around the link:
<span class='underline'>
this just<br>a test<br>of underline color
</span>
And then the CSS:
span.underline {
color: red;
text-decoration: underline;
}
span.underline a {
color: blue;
text-decoration: none;
}
And you get what you want.
EDIT:
Testing this a little further, it is not working for me on IE. If you add border-bottom, however, it surprisingly does work in all browsers, except that IE does not put a border under the last one. I will try to dig a little deeper to see if there's a cross-browser way to do this...
In case anyone is interested - this worked for me - text-decoration-color CSS property:
.example {
text-decoration: underline;
text-decoration-color: red;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-color
2121 update: this works great! Other useful CSS is https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-offset for controlling the distance between the underline and the text.
Paolo Bergantino's answer didn't seem to work for me in Chrome on OSX (v19.0.1084.56). However moving the span inside of the a tag seemed to do the trick.
The HTML
<a class="underline" href="#">
<span>Hello world<br>this is a test<br>of changing the underline colour</span>
</a>
And the CSS
.underline {
color: red;
}
.underline span {
color: gray;
}
You can view it here: http://jsfiddle.net/itsmappleby/f4mak/
Or you can use border. This method work at ie6.
HTML
<a href="#" class='underline'>
<span>this just</span><br/>
<span>a test</span><br/>
<span>of underline color</span>
</a>
CSS
a.underline {
text-decoration: none;
}
a.underline span {
display: inline-block;
border-bottom: 1px solid red;
font-size: 15px;
line-height: 12px;
}
and example: http://jsfiddle.net/skanY/1/embedded/result/
Underlined, being a text attribute, inherits the text's color. So I doubt there is a way to explicitly change the underline color without also changing the text color.
The Underlining of links will always be the same color as the text.
sorry for ressing an old question, but i was having the same issue, and didn't find a satisfying answer, so i came up with a different solution and thought i'd share it with you.
it does include a 1x1 background image (or whatever size you prefer), but it's clean and simple - and 100% browser compatible (tested from IE6 and up).
this example has text that changes color, and the underline stays the same. you can just as easily do it other way around.
a, a:link, a:active, a:visited{
text-decoration:none;
color:#888;
background:transparent url('underline.png');
background-position:0 10px;
background-repeat:repeat-x;
}
a:hover{
color:#009ee0;
}
I know this is an old question, but I thought I'd add this...
a:active, a:link, a:visited{
background-image: linear-gradient(rgba(255,255,255,0)50%, #ff5400 50%);
text-decoration: none;
background-size: 2px 2px;
background-position: 0 1.2em;
background-repeat: repeat-x;
}
Note: Older browser support is not completely supported
USE:
<a href="your-link/" style="text-decoration-color: COLOROFUNDERLINE;">
the underline on links is done using the text-decoration css style, i think it's the same color as the text.
if you set the text-decoration to none then add a border-bottom you can change the color with the border-color style.
Also you can use this code to make underlines with different color. Use the Borders
h1{
border-bottom: 1px solid #AAAAAA
}
edit:
you can use java script to draw a line under the text