I have all anchor tags set to text-decoration: none.
Moreover, I have a rule saying (thanks to this good answer)
a, a:hover, a:active, a:visited {
text-decoration:none;
}
But anytime I right-click with the mouse on a link on the website I am building, for instance, to open the inspector element, the link turns underlined.
Do you know why?
Because of CSS specifity rules, the question is not how you underline on the right-click.
The question is what else is affecting your link during a click? (left or right -> active)
From the sounds of it, you have something other CSS rule that is affecting your
anchors.
See sample code below (where the issue is not present):
a {
text-decoration: none;
}
#wrapper a:active {
text-decoration: underline;
}
<span id='wrapper'>
link
</span>
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'm just trying to create a simple menu. So when you click a link, it directs you to another page and shows you that you selected that link by changing colour.
The problem I have is when I click a link within the list, the page loads and for some reason the list elements all enter the a:visited field. Setting them to red. I have the JSFIDDLE Here. I know its simple but it's getting on my nerves.
CSS Code:
ul.nav_style{list-style: none;}
ul.nav_style li {padding-left: 1em; text-indent: -.7em;}
ul.nav_style li:before {
content: "• ";
color: #C0C0C0; /* or whatever color you prefer */
}
ul.nav_style li a:link { color: #C0C0C0; text-decoration: none;}
ul.nav_style li a:visited { color: #FF0000; text-decoration: none;}
ul.nav_style li a:hover { color: #58595B; text-decoration: none;}
ul.nav_style li a:active { color: #E6BD13; text-decoration: none;}
HTML Code:
<ul class="nav_style">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
Thanks in advance.
Chris
The explanation is simple: all the links have the same href. Assuming you will change the hrefs, this will not be an issue on your final site. :)
See my fiddle. All I did was to change the hrefs. Does it work as you expect now? http://jsfiddle.net/TheNix/sR3Ub/3/
EDIT:
Now, if you simply wish to make sure the link looks the same regardless if it's been visited or not, all you have to do is to apply the same styling to the :link and :visited states, like so:
ul.nav_style li a:link,
ul.nav_style li a:visited { color: #C0C0C0; text-decoration: none;}
ul.nav_style li a:hover { color: #58595B; text-decoration: none;}
ul.nav_style li a:active { color: #E6BD13; text-decoration: none;}
Now the link should be grey when idle (even if it's been visited), darker grey when you hover over it, and gold when you click it. See fiddle: http://jsfiddle.net/TheNix/sR3Ub/5/
EDIT v2
It seems you are a little bit confused about the states of a link, so here's the low-down:
:link is the standard idle link (can also be targeted simply as a)
:hover is the act of hovering over the element with the cursor.
:visited is applied to links which have already been visited.
:active is the state when the link is active in the user interface — e.g. when you are hovering over it, and pressing left mouse button (onmousedown), or when using the TAB to highlight the link. When you release the mouse button (onmouseup) or tab out, it will revert back to it's previous state.
:active therefore have nothing to do with determining if it is the active page, it only applies when you hold the mouse button down.
What you are trying to do, is unfortunately not possible with CSS alone. Here is a simple example of how it can be achieved with jQuery. http://jsfiddle.net/TheNix/sR3Ub/6/
This may be a reason of security of browsers, http://dbaron.org/mozilla/visited-privacy
Mozilla http://blog.mozilla.org/security/2010/03/31/plugging-the-css-history-leak/ also informed about this. Most of latest browsers has taken this action to protect the users.
you must put target url in href or in data-href or etc,and after click in link and load new page you must check window location and set link color to red:
$(function(){
var url = window.location.href;
$("ul.nav_style li").each(function(i,e){
var $this = $(e);
if ($this.attr("href") == url){
$this.css("color","red");
}
};
});
Problem solved, I've decided to just use PHP to generate my lists using arrays and an if statement to give the current page its css class.
PHP CODE:
if($title == "Enter"){
$enterArrayPages = array("competition.php","full_detail.php", "judges.php", "get_involved.php", "employers.php");
$enterArrayText = array("The Competition","Full Detail","The Judges","Get Involved", "Employers");
echo '<ul class="nav_style">';
for($i=0; $i<sizeof($enterArrayPages); $i++){
if($proper_title == $enterArrayText[$i]){
echo '<li><a class="linkChange" href="'.$enterArrayPages[$i].'">'.$enterArrayText[$i].'</a></li>';
}
else{
echo '<li><a class="menu_links" href="'.$enterArrayPages[$i].'">'.$enterArrayText[$i].'</a></li>';
}
}
echo '</ul>';
}
So as you can see, the code loops through each of the pages stored in an array and if the title of the page is equal to the one in the array I change its class, making the color of the link different to the others.
Here is the CSS:
a.menu_links:link { color: #58595B; text-decoration: none;}
a.menu_links:visited { color: #58595B; text-decoration: none; }
a.menu_links:active { color: #E6BD13; text-decoration: none; }
a.menu_links:hover { color: #E6BD13; text-decoration: none; }
.linkChange {
color: #E6BD13;
text-decoration: none;
}
It's really simple, I just had to think of the logic via PHP. I thought that implementing it in pure css would be good enough, but with time ticking, I resorted to PHP.
Here is an image of the code output:
Thanks for everyones comments! Much appreciated!
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.
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.
This sample page:http://www.downloadformsindia.com/Income-Tax-Forms/challan-281.html?task=view has H1 text of "Challan 281". But it's not getting underlined.
In Firefox I'm right clicking and using "inspect" using firebug.
It's showing a crossed circle with:
a:link, a:visited {
color: #135CAE;
}
It means it's overriden. But how do I find out which other rule is overriding it? I'm not able to find out using even Chrome->Inspect.
Does even Dreamweaver let us find it?
In template.css on line 23:
a:link, a:visited {
text-decoration: none;
font-weight: normal;
}
Will style the link without an underline.
For what it's worth, I used Chrome's debugger.
Remove the:
text-decoration:none;
On the element.