I have an Html.ActionLink on my page and I am using the following CSS on it to give it an image and try and remove the underlining.....
a.searchButton
{
background-image: url(/content/images/DropAcross.png);
background-repeat: no-repeat;
height: 16px;
width: 16px;
display: block;
text-decoration: none;
clear:none;
}
Can anyone see a problem with this? All the CSS properties seem to work apart from the text-decoration: none, which seems to leave the underline in place.
You would have to look at the rendered html. In Firefox or Google Chrome, right click and choose Inspect Element.
You might find something silly like the searchButton class is being applied to a span that wraps the a tag, in which case, you would get everything working except the link specific rule:
text-decoration:none;
I know that it is old topic, but maybe somebody will considere it helpful -
"text-decoration" attribute, mentioned above, can be passed to ActionLink by construction like this:
#Html.ActionLink("Display_Name","Action_Name",null,new {style="text-decoration:none;"})
Setting text-decoration:none; ought to work.
Is it possible that there are some other styles overriding it? Have you looked in Firebug (or similar tools) to see what styles are being applied?
One possible answer may be the :hover, :visited and :active pseudo classes. If they are set to have an underline, then they will override the default style for the element.
Related
Is there any reason why this does not work on Internet Explorer or Chrome:
<html>
<head>
<style>
A {font-weight: bold; color:black;}
A:visited {font-weight: normal; color: black; }
.Empty {font-weight: bold; color: black; }
</style>
</head>
<body>
click me
</body>
</html>
The link I click never goes to normal and just stays bold. On some other browsers it works.
Changing case did not affect it. Changing a to a:link did not affect it. Changing color works, just not font-weight.
One workaround was to change accessibility to ignore web colors. I do not have access to the source, so I had to do it this way.
Actually, this has nothing to do with case sensitivity. This is a security feature. The functionality of :visited pseudoclass has been restricted in many modern browsers (Fx4, IE9, Chrome) to prevent CSS exploit: read about it here.
Nowadays, getComputedStyle() in these browsers usually returns values for visited links as if they weren't visited. However, I can simply imagine circumventing of that: using font-weight for visited links, the element's width changes so browsers that would allow changing font-weight for :visited links wouldn't actually fix the security hole.
You can see there are some specific things browsers do to protect against this:
The window.getComputedStyle method, and similar functions such as element.querySelector, will always return values indicating that a user has never visited any of the links on a page.
If you use a sibling selector such as :visited + span, the adjacent element (span in this example) will be styled as if the link were unvisited.
In rare scenarios, if you're using nested link elements and the element being matched is different from the link whose presence in history is being tested, the element will be rendered as if the link were unvisited, as well.
Thus, there's no workaround for this issue.
One useful attribute that does work with :visited is background-color. So try:
:visited {background-color:red;}
:visited also works on non-a elements.
The problem has to do with history sniffing, changing css properties is disabled for visited links due to privacy issues.
I came up with the following workaround to reach the desired effect.
It is possible to change the background-color of the visited link.
The solution is very simple:
set a background-image on the link with the same height as your link
and 1px width and repeat the image horizontally
the image has the same color as the background of the link
make one pixel of that image transparent, in the vertical middle
on :visited state just change the backgroundcolor of that link to the text-color of the link
Only one line of the background-color wil be visible, because the background-image is masking it
Here's an example:
a:link {
color:#000;
background:#FFF url('../img/linethrough.png') repeat-x top left;
}
a:visited {
background-color:#000;
color:#000;
}
CSS itself is not case-sensitive, but if the HTML file using this style has an XML declaration and an XHTML doctype, that CSS is not going to work, because tags are case-sensitive. You'll have to set the "a" tags to lower-case.
Explained here:
http://reference.sitepoint.com/css/casesensitivity
Perhaps try changing the color attribute and see whether that has an effect at all.
To troubleshoot, you might want to try to utilize the developer tools in chrome to see what style is applied.
You need to have separate declarations for a:link, a:visited, a:active, etc.
Remove your first style that does not contain a colon. It's overriding. Replace with a:link.
I wanted to control the line thickness of the underline property in my css file. I simply tried out something like this...
h1{
text-decoration: underline black 1px;
}
... and it worked!
However, when I tried to validate my CSS file, the W3C CSS validator indicates that the '1px' property isn't a valid text-decoration value. I also cannot find line thickness to be a part of text-decoration's properties. Yet, I find that it works on Chrome, Firefox and Edge.
Can anybody explain why a CSS property that isn't documented and doesn't validate nevertheless works?
The thickness can be controlled with: text-decoration-thickness property.
The color of the with: text-decoration-color property.
h1 {
text-decoration: underline;
text-decoration-thickness: 50px;
text-decoration-color: red;
}
<h1>Our Elixirs</h1>
Modern browsers have really good UA (User Agents = default CSS) to correct most markup error. However the best place to look for documentation is MDN Web Docs
MDN lists it.
If you want to be on the safer side, you can define text-decoration-thickness separately.
Can anybody explain why a CSS property that isn't documented and doesn't validate nevertheless works?
That's modern web dev for you.
I have styled my select boxes, but i can still see the arrow in my select box in firefox, i have set css so:
background:transparent;
content:'';
apperiance:none;
Thats work on Chrome, but on Firefox i still see default arrow, is possible to delete it also on Firefox?
This should remove the arrow in selects in Chrome, Firefox, Safari, and IE10.
.poa-select {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
text-indent: .01px;
text-overflow: "";
}
.poa-select::-ms-expand {
display: none;
}
Ideas taken from here and here.
Unfortunately there isn't yet a cross-browser compatible route of styling form elements with CSS: it's not usually left to the designer to have control over their appearance/behaviour so form elements are notoriously difficult to style. Many browsers specifically do not allow you to style them at all!
If you need to get a consistent look across all browsers, the only route is to use JavaScript to replace the form element in-view with stylised HTML elements.
Here's an article that lists a few of the options available for you: http://www.jquery4u.com/plugins/10-jquery-selectboxdrop-down-plugins/
The trick that works for me is to make select width more than 100% and apply overflow:hidden
select {
overflow:hidden;
width: 120%;
}
The answer from here : How to remove the arrow from a tag in Firefox
Use the pointer-events property.
The idea here is to overlay an element over the native drop down arrow (to create our custom one) and then disallow pointer events on it. [see this post]
Here is a working FIDDLE using this method.
Also, in this SO answer I discussed this and another method in greater detail.
So i have some html:
<a class='clicktext'>...read more!</a>
and i want to give it a :hover animation, as so:
.clicktext{
}
.clicktext:hover{
text-decoration:underline;
}
.clicktext:active{
text-decoration:none;
}
Suffice to say, it does not work in Mozilla Firefox 5, even though it works perfectly well in Chrome and Safari. However, if i change it to
a{
}
a:hover{
text-decoration:underline;
}
a:active{
text-decoration:none;
}
It works perfectly fine in Mozilla Firefox 5! I have not managed to find anything regarding this online.
I could, of course, just change my styles to apply to the a rather than the .clicktext. The problem with that is that it would screw up my conventions, which is (as far as possible) apply all the styles to classes rather than to the tag names. After all, I have many other tags for which i do not want this underline-on-hover thing to appear.
Has anyone bumped into this, and perhaps found a nice solution?
edit: these also do not work
.clicktext a:hover{...}
a .clicktext:hover{...}
I had these kind of problems with Firefox and solved it by adding the tag name to class name:
for example I had this which worked in Chrome but not in Firefox:
.content .sidebar:hover{
background-color: red;
}
and fixed it by making it more specific like this:
div.content div.sidebar:hover{
background-color: red;
}
http://jsfiddle.net/rE8xU/
I do not see the issue, when moused over it does include an underline.
A possible cause of this issue is the level of importance that the class has.
Such as styles that are set by their identification tag will take over any class styles and so forth.
http://htmlhelp.com/reference/css/structure.html
check out cascading order
Lastly, make sure that the css file is properly linked and or embedded
you can use firefox to check as well.
You need to add href="#" to your . the :hover meta tag needs the link to have the href property set.
use <p></p> tag if you are not hyperlinking the text.
<p class='clicktext'>...read more!</p>
then for styling the text.
p.clicktext {
color: #ccc;
}
p.clicktext:hover {
text-decoration:underline;
}
Hope i Helped ;)
There's a big chance that you have a conflict somewhere in your CSS, because the jsfiddle with this exact code works fine in Firefox 5. You might want to check for ID-selectors with the hover-pseudoclass that could possibly overrule this line of styling. Inspect it with firebug to see what css is inherited.
You might be getting this problem for
1: not specifying the class which is clicktext in your case, or.
2: object a is associated with some other class not compatible with clicktext class!
I am saying this because my website
is running perfectly without any problem, in both Chrome and Firefox!
I am using hover to produce an overlay effect! This is what I am doing:
.container{
//your specifications
}
.image{
//your specifications
}
.text{
//your specifications
}
.container:hover .text{
//your specifications
}
I also think that the answer marked as "correct answer" is not correct.
I had same problem, was just not working on Firefox, quick close and restart app and was working again.
Daniel
I've come across an issue lately with my web design projects that has been insignificant enough to slip through my fingers unfixed a few times, but it's just gotten too annoying.
Say I have a style sheet with these rules:
a {
outline: 0;
text-decoration: underline;
}
a:link {
color: #0099FF;
}
a:visited {
color: #0099FF;
}
a:hover {
color: #FFFF00;
}
a:active {
color: #33FF66;
}
Links in my document will only sometimes have the correct colors, but sometimes they will just be the default blue->purple links. I'm on a black background, so these look awful.
If I refresh the page, about half the time they will render correctly. This is happening in both Firefox and Chrome.
What's going on?
If you are currently developing your css, it is very possible that the browsers have a cached version of the wrong version of the style sheet, which would explain why your links don't display correctly.
Try the following :
In your link to the css, add a query string with garbage values. This will force the re-download of the css and see if your rules apply consistently. If they do, then you know it is a caching problem. Leave the query string as is and your users will re-download the css.
If not, then you have a css problem. Download firebug for firefox, check one of the links that doesn't display the right color and see what rules apply to it.
Here is how you would add the query string :
<link rel="stylesheet" type="text/css" href="style.css?v=3">
Of course this is an old post, but I have been experiencing the same issues lately.
After some hours searching, I finally realized that my markup was invalid because using the following syntax:
<i>my link text</i>
This renders perfectly in all browsers but of course the 'a' selector in my style sheet was not enough.
In this case, I needed the following:
a i, a:hover i, a:visited i
{
some rule....
}
Hope this can help someone...
Sounds very odd.
First off I would put a color on your base a to match your a:link and a:visited:
a {
outline: 0;
text-decoration: underline;
color: #0099FF;
}
This should apply to every anchor tag it finds. if you have an anchor tag without an href the a:link wont apply.