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.
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 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>
I was trying styles with a:visited, a:link, etc... and I found these 2 issues with a:visited:
why is font-size of a:visited ignored and a:link used instead
why is background-color not showing depending on whether a:link has background-color property or not
Example
a:link {
/*background-color:#ff8000;*/
font-size: 28px;
}
a:visited {
font-size: 12px;
background-color: grey;
color: #10aaf0;
}
I googled a bit and read in w3schools that most of the styles are inherited from a:link for security/privacy issues, but what I don't understand is why background-color only works when I explicitly set it in a:link and then modify it in a:visited.
TL;DR:
What's the difference between explicitly set background-color for
a:link to let a:visited apply its own background-style?
Is it still sensitive to those browser history query attacks through CSS?
It seems to behave the same way in the browrsers I tried: Chrome 45 and in IE 11.
I can't speak of security issues since I haven't heard of such thing associated with anchor tags. But a:link selector in most of the cases acts like a since it's applied to anchor tags with href attribute. And a:visited only applies to links which user has visited before. Other than that you should be aware of the order of declaring your styles.
For example take a look at this: http://codepen.io/anon/pen/ojzwgY
It works as expected in Firefox, Safari and Chrome
I'm doing a design for CSS Zen Garden, partly to refresh my CSS skill and knowledge and have found a problem with link colours in my css code.
As shown in my annotated image, the a:link color (#b7a5df) seems to create x2 link colours!
eg some links are #b7a5df colour but others for some reason are #d7cddc!
The css code is the standard in the CSSZenGarden default.css file eg:
a:link {
font-weight: bold;
text-decoration: none;
color: #B7A5DF;
}
a:visited {
font-weight: bold;
text-decoration: none;
color: #D4CDDC;
}
a:hover, a:focus, a:active {
text-decoration: underline;
color: #9685BA;
}
At the moment I cannot see why this should be and am grateful for any ideas of what might be causing this so I can find and fix the link color to be the same!
It is most likely to be caused by something simple I've overlooked but it is frustrating
and I'd appreciate a second opinion now-thanks!
EDIT...The above problem is with FireFox. The links display the same colour in IE and Chrome. Below is an image from IE:
Looks like they are the visited links.
"a:visited" is the colour of links to pages you have previously been on.
"a:link" is the colour of unvisited links
You could also just use "a" alone if you want to colour all types of link.
How did you get the D7CDDC value? It is so close to D4CDDC, that I suspect it is actually the D4CDDC a:visited colour.
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.