I started using bootstrap now and really like it but a problem came up now.
I made an adapted navbar and when a tab is selected, there is a spotted border that I dont like. How can I prevent this border (CSS)?
Can you add some code?
I think somewhere in your CSS you will find something like: border: 1px dotted #ccc; Change that to: border: none;
Depending on what class/id you have it will be something along the lines of:
border:none;
I am going to go out on a limb and assume the HTML for your tab is an . If so, make sure you are explicitly defining the border you want in all of its states (CSS psuedo-classes), specifically :active
a:link {border-width:0;} /* unvisited link */
a:visited {border-width:0;} /* visited link */
a:hover {border-width:0;} /* mouse over link */
a:active {border-width:0;} /* selected link */
http://www.w3schools.com/css/css_pseudo_classes.asp
Related
I've seen the other question about this here but their solution did no work for me. When the mouse hovers over a hyperlink, a pesky red line appears underneath it. I've tried:
a:hover{
text-decoration: none;
border-bottom: none;
}
a {outline : none;}
.entry-content a {
border-bottom: none;
}
on Appearances->Customize->Additional CSS
on Appearances->Editor->style.css
also on the Slider Revolution Custom CSS because initially I thought this was an issue with the text in the slider, but later realized it's from the whole theme.
also on style.css:
every instance of border-bottom was commented out and replaced by border-bottom:none;
every instance of a:hover that had border-anything had that border commented out
every instance of box-shadow was commented out and replaced by box-shadow: none;
The red line keeps showing up when I hover. I don't know what else to do. I also asked someone to clear their cache and cookies and then refresh the website. The underline/border/box is still there. Is there anything else that could be causing this?
Based on the Scrawl theme preview, looks like it's an ::after so you can override it with this:
.comment-content a:after, .entry-content a:after, .comment-respond a:after, .site-footer a:after {
display:none;
}
Do keep in mind that for accessibility reasons you should probably keep an underline of some sort, but this :after seems rather odd, not sure why they didn't just go with text-decoration:underline instead.
How do you avoid the annoying grey background that IE 10 applies to anchors when you click them?
There is actually a really easy CSS fix. IE 10 changes the background-color of anchor tags when they are in the :active state. To stop it from happening or to change the colour you can use the CSS rule below.
a:active{
background-color: transparent; /* Can be any colour, not just transparent */
}
Live demo: http://jsfiddle.net/tw16/NtjK7/
On a side note, it's worth mentioning that when styling links you need to ensure that you write the rules in the correct order to ensure that previous styles don't get overwritten:
a:link{} /* 1st */
a:visited{} /* 2nd */
a:hover{} /* 3rd */
a:active{} /* 4th */
I found it was actually :focus that added the grey background.
this worked for me:
a:focus {
background-color: transparent;
}
I haven't been able to find many information but I did found one fix:
Wrap the text of the anchor in a span
Working Solution
If you don't want to change every anchor in your HTML you can use a script like this one:
$("a:not(.dont-use-span)").each(function() {
$(this).html("<span>" + $(this).html() + "</span>");
});
Working solution
Note: just add the class dont-use-span to the anchors that you don't want to modify
After many unfructuous tests, I finally made it works with this :
a {color:#fff; background-color:#f77927 !important;}
a:hover {color:#fff; background-color:#e65e06 !important;}
a.active {color:#fff; background-color:#e65e06 !important;}
a.focus {color:#fff; background-color:#e65e06 !important;}
See in action
I am trying to change the link color of one of my tab buttons but its not working. Its strange because all the other attributes under the same curly braces are working just fine but the attribute clor:#FFFAFA is not working. I have set it against a #778899 background so that the former's snow-white color is visible.
Here's the code.
a:link
{
color:#FFFAFA;
text-decoration:none;
background-color:#778899
}
it is always purple and never changes
Here is the code where I implement it
<dl class="profileTab">
<dd class="profileTabContents">Personal Infomration</dd>
<dd class="profileTabContents">Education, Employment & Activities</dd>
<dd class="profileTabContents">Sports & Athletics</dd>
<dd class="profileTabContents">Entertainment & Attractions</dd>
<dd class="profileTabContents">Philosophy & Society</dd>
</dl>
Well this should be working, but it is probably overwritten by your browser with a default "visited" link color. Change your CSS to:
a, a:link, a:visited {
color: #FFFAFA;
text-decoration: none;
background-color: #778899;
}
It might be because the links are visited.
http://www.w3schools.com/css/css_link.asp
a:link {color:#FFFAFA;} /* unvisited link */
a:visited {color:#FFFAFA;} /* visited link */
a:hover {color:#FFFAFA;} /* mouse over link */
a:active {color:#FFFAFA;} /* selected link */
This is because the link you have opened is stored as visited in the browser.
Delete your history or the links of your page with which you are working from the history will do your work.
Try it. This is the solution.
Works for me - http://jsfiddle.net/ZS2Vn/
That colour is too faint to notice a change from the white background of the page. Try setting a slightly darker foreground colour.
color: #EFEAEA; or color: #DFDADA;
And of course, like others have answered, you should have pseudo selectors for visited, active and hover as well.
I think the problem occurs because you are missing a semicolon on the background-color line.
It seems that a:visited won't work in showing background color on my links.
http://jsfiddle.net/davestein/D2srA/
What super simple thing am I missing?
The background-color on a:visited only seems to work (as Dave said above, in FF, Chrome and Safari) if the normal a has a background-color, either explicitly defined or through inherit (the direct parent must actually have a background-color for this to be true).
Obviously it is not ideal to have to define a background-color for a all the time, as the site may have a background image.
CSS bug..?
try a) setting a default background color (like #fff) and b)removing !important, as shown here:
http://jsfiddle.net/D2srA/10/
I'm not sure of the technical reason here, but this only seems to work for me if I add a background-color for a:
a {
background-color: #ffffff;
}
a:visited {
background-color: #ff0000;
}
it doesn't work for me if I do it like you do. But if I add every pseudo-class it works. E.g.:
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF; background-color:black;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
!important always does the truck
a:active {color:#0000FF !important;}
a:visited {color:#0000FF !important;}
I want to be able to link my image. Click on it. Go back to the page and see that it was visited.
I want my visited images to have a different color border when I go back.
My code:
a:link img{border-color:#FFF; border-style:solid; border-width:1px;}
a:hover img{border-color:#03F; border-style:solid; border-width:1px;}
a:visited img, a:active img{border-color:#036; border-style:solid; border-width:1px;}
Any ideas would be appreciated.
Link CSS can be hard to get right, because many browsers can be quirky about it. The best order to declare link CSS is
Link
Visited
Hover
Active
(Also remembered as the mnemonic LoVe/HAte).
Also, try declaring your css:
a:hover img {border: 1px solid #036;}
instead of specifying it in three different declarations.
It may help to tell us which browser isn't working, because they all handle anchor links that have embedded text differently.