I have these CSS definition for my buttons:
nav ul li a {
display: block;
margin-right: 0px;
font-size: 19px;
line-height: 40px;
text-align: center;
text-decoration: none;
color: white;
/* border:1px solid red; */
}
In Internet Explorer 10, it gets a grey background when clicked. Why?
Just add a:active { background: none; } to your stylesheet.
Internet Explorer 10 seems to display links (anchors: i.e. <a href>), which has the property display:block; with a grey background when clicked.
You can remove this easily by inserting background-color:none; into your code. So, you should have the following code:
nav ul li a {
display: block;
margin-right: 0px;
font-size: 19px;
line-height: 40px;
text-align: center;
text-decoration: none;
color: white;
/* border:1px solid red; */
background-color:none;
}
On the positive, the problem should be removed. Two negatives include that, you cannot set a background, or have an active state in Internet Explorer (i.e. a:active). Other browsers will continue to work perfectly normal/fine.
Still we could not understand what about the question is? Which background color is gray? You didn't provide your html too. I guess this bit of code would help you to change or remove the color of the links will change the behavior in each states...
a:link {color:red;}
a:visited {color:green;}
a:hover {color:blue;}
a:active {color:yellow;}
With this four colors you could check yourself and come to the conclusion... :)
Related
I am working on a project and a minor problem is bugging me. I created a special button for a registration link, which in retrospect isn't needed. So I fixed one problem but I am trying to figure out why it wasn't working before.
My special button was given this coding -
<div class="registerbut">Register</div>
with this CSS -
.registerbut {
height: 67%;
padding: 5px 7px;
border-radius: 4px;
background-color: #333;
margin-left: 6px;
font-family: arial;
font-size: 13px;
color: #FFF;
text-transform: uppercase;
text-align: center;
border-width: 2px;
border-style: outset;
border-color: gray;
}
.registerbut a:visited,
a:link,
a:hover,
a:active {
text-decoration: none;
color: white;
}
Yeah I fashioned a button out of an <a> tag, which I made to look like another button it is next to, but was completely unnecessary because all I had to do was put it inside the form as a basic button.
Later on I was messing with another <a> tag and trying to give it specific a specific class -
<div class="post_link">Example post</div>
and CSS with these attributes -
.post_link a:visited,
a:link,
a:hover,
a:active {
text-decoration: none;
color: #2A75B3;
}
but according to my element inspector, it's taking in the .registerbut CSS rather than the CSS I gave it.
Why wouldn't my new <div> class be overriding the other CSS?
I need your help with changing the text color of the active menu item on my website, using CSS.
(It's a Joomla website and I'm modifying the standard Gantry framework template to our needs).
Here is the CSS for the active menu item...
.gf-menu.l1 > li.active {
background: none;
color: #19D57E;
border: none;
border-bottom: 3px solid #19D57E;
border-radius: 0px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
margin: 0 auto;
padding-top: 1px;
}
And here is the CSS for the passive menu items...
.gf-menu .item {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 21px;
color: #555555;
padding: 4px 8px;
text-align: left;
text-shadow: 0px 0px 0 transparent;
text-decoration: none;
display: block;
outline: 0;
cursor: pointer;
font-weight: bold;
}
What I want is for the color of the text in active menu item to be green (#19D57E).
The active menu item is already displaying a green line at the bottom, but the text color of the menu item remains black like in the passive menu items. As you can see, I have specified the text of the color, but for some reason it is not doing it.
What am I doing wrong?
If you want to have a look at the website, please go to http://www.barrylong.tv/index.php/home
Thanks a lot!
Hector
This is the CSS needed:
.gf-menu.l1 > li.active a {
color: #19D57E;
}
Note the a after .active
Hope this helps
add this in your style sheet .gf-menu > .active > a {
color: #19D57E;
}.
I think you have to change the color of the .item element in the .active li-element. At the moment you are trying to change the color of the li-element and not of the link.
.gf-menu.l1 > li.active .item {
/* ... */
color: #19D57E;
/* ... */
}
Find the CSS block: for item101 active last
Notice in your source for "home":
<li class="item101 active last">
<a class="item" href="/index.php/home">Home </a> </li>
You will see the text color property to change. The reason what you are doing isn't working is that you are changing the wrong CSS block properties.
I have built a navigation list for a client and they opted to use the [Oswald]() font-face.
Now when the user scrolls over the link a navigation arrow will pop up to the side indicating which link is currently click, it is NOT supposed to turn orange upon hovering. I have removed any javascript and the fontface entirely and still can not remove the problem.
Here is a screenshot of the issue http://cl.ly/043a0q0o0Q392q2m1k20
My CSS (SASS) is as follows:
#leftnav {
width: 205px;
float: left;
ul {
li {
border: 1px solid #fff;
border-top: 0px;
background: #cc5816;
padding: 3px 10px;
#include gradient($top_color: #d86c07, $bottom_color: #bb5e06);
a {
position: relative;
font-family: $main_bold_font;
font-size: 16pt;
color: #fff;
text-decoration: none;
text-shadow: $text_shadow;
}
a:hover { #extend a; }
a:visited { #extend a; }
}
}
}
Any Ideas?
I dont know for sure if this solves the problem. But, as stated here, I would recommend to change the order of :hover and :visited to be :visited and :hover. Maybe it helps to analyse the compiled css.
I have a simple menu:
<ul id="menu2">
<li> Home</li>
<li> About us</li>
<li> Contacts</li>
</ul>
And in css file I have:
#menu2 {
background: black;
float: left;
list-style: none;
margin: 0;
padding: 0;
width: 220px;
}
#menu2 li {
margin: 0;
padding: 0;
}
#menu2 a {
background: black;
border-bottom: 1px solid #393939;
color: #ccc;
display: block;
margin: 0;
padding: 9px 16px;
text-decoration: none;
}
#menu2 a:hover {
background: black url("../images/select.png") left center no-repeat;
color: #fff;
padding: 9px 16px;
}
#menu2 a:active {
background: black url("../images/select.png") left center no-repeat;
color: #fff;
padding: 9px 16px;
}
Everything works well except for #menu2 a:active not working at all while #menu2 a:hover (with same rules) works well. What is the problem? Did I miss something?
It is working as expected. I colored the active state red.
Try clicking on en element and hold the button down. The background will be red.
You don't see a change, because you CSS for hover and active are identical!
Sample
http://jsfiddle.net/dqH3F/1/
Sample contains
#menu2 a:active {
background: red url("../images/select.png") left center no-repeat;
color: #fff;
padding: 9px 16px;
}
Can you provide more details of what exactly is not working and/or a demo. Looking at the code it appears to be fine.
The :active state refers to when a link is pressed, so if you press and hold your mouse button down on your menu item it should be working as expected since hover works active has the same properties.
A link with :active will not remain that way when your on the page it links too, it reverts back to a normal link.
Your background for :hover and :active in the code above is the exact same.
Are you trying to set a background x and y position on active?
Without image background and different colors (for testing) your code works fine: see here http://jsfiddle.net/stursby/9Pccb/
I'm having some trouble with a rollover.. hoping you can help me!
I'm using li navigation, and I want to have separate boxes linking to different pages. This part is fine and works like it should. I want to be able to hover over the box and have the box AND the link change colour. I can get the box changing no problem, and the link changes when you hover over it, but is there a way for them to both change when you're just hovering over the box? Here's what I've got so far:
#nav-menu ul{float: right; text-align: center;}
#nav-menu li{margin-right: 5px; list-style:none; padding-left: 1px; text-align: center; font-size: 14px;float:left; padding:0px 15px; width: 57px; position:relative;z-index:200; background: #000; color: #FFFFFF; font-family: georgia;}
#nav-menu li a{display: block; float: left; color:#fdf2e7;font-size:14px;text-decoration:none; text-align: center; padding:5px 0px 5px 0px; font-family: georgia;}
#nav-menu a:hover{display: block; color:#000000; text-align: center; background: #f3d5e1; text-decoration:none !important; font-family: georgia;}
#nav-menu:hover{display: block; color:#000000; text-align: center; background: #f3d5e1; text-decoration:none !important; font-family: georgia;}
--
Any help would be greatly appreciated. Thanks! :)
Use li:hover to target a list item when you hover over it, and use li:hover a to target an anchor whose parent list item is being hovered over.