I have this css below. Some how my this css's clicked link gets over written by some other css once I click the link. It turns the link color to red. I tried to keep it white in code below but thats not helping. What can I do to get it working
.grey {
background-color:#545154;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #120c12;
display:inline-block;
color:#ffffff;
font-family:arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
}.grey:hover {
background-color:#a8a5a8;
}.grey:active {
position:relative;
top:1px;
}
.grey a:visited{
color:white !important;
}
.grey a:link{
color:white !important;;
}
html
Site
The selector for the white color is off. It should be .grey:visited or a.grey:visited.
Related
I have this CSS :
<style>
#web_pagination_number {
float:left;
position:relative;
width:35px;
height:35px;
line-height:35px;
background-color:#111111;
font-family:Arial;
font-size:14px;
color:#ffffff;
text-align:center;
}
#web_pagination_number:hover {
color:#111111;
background-color:#93CF25;
}
#web_pagination_number a {
text-decoration:none;
color:#ffffff;
}
#web_pagination_number a:hover {
text-decoration:none;
color:#111111;
}
</style>
The problem i have it´s when i go over web_pagination_number , change the color of background of this div but no the color of the link , the link color only change when i go over the link
I don´t know how i can fix this
Thank´s , Regards
You need to add :hover to your web_pagination_number id, like this:
#web_pagination_number:hover a {
color: #333;
}
Just add a property display: block on a
Demo
I have a td styled with CSS like this:
table{
border-collapse:collapse;
color:#FFF;
width:100%;
}
table td{
border:1px solid #FFFFFF;
vertical-align:top;
text-align:left;
padding:0px;
}
.tbs{
font-weight:bold;
height:20px;
}
.tbs a{
color:#B8B6B4;
padding:5px;
display:inline-block;
}
.tbs a.act{
color:#FFFFFF;
background-color:#1E1E1E;
}
.tbs a:hover{
color:#FFFFFF;
}
.tbs is the td, on Firefox it's all good, but on IE, even if it's explicitly declared height to 20px it shows me a height of 28.5px, why this? I could understand this if I omitted height, but it's declared, what can I do to fix it, is there a CSS only solution without editing the structure?
Thanks.
EDIT:
I'm adding a Jsfiddle, even if I think it's useless, cause most of my code don't work...
http://jsfiddle.net/2TZ2Z/
Hi I was wondering how I can take styles from another class on a hover state in LESS.
At the moment I have:
.language .active {
background:#de1f24;
color:#ffffff;
padding:7px;
text-align:center;
border-bottom: solid 1px #3A3838;
display: inline-block;
border-bottom-left-radius: 4px;
border-bottom-right-radius:4px;
font-weight:bold;
}
.language a {
color:red;
font-weight:bold;
}
&:hover{
&:extend(.language);
}
.fontSize{
font-size:22px;
}
.box{
color:#fff;
width:50px;
height:50px;
background:red;
font-size:14px;
&:hover{ /*This will add Hover effect to .box */
.fontSize; /*This will inherit the style from the .fontSize class*/
background:blue;
}
}
Codepen Demo : http://codepen.io/anon/pen/rHghJ
I am not sure I understood a question. But try using this construction
.language a {
color:red;
font-weight:bold;
&:hover {color:blue;}
}
.language-2 a {
.language a:hover;
}
The following styles causes the issue shown in the image. As you can see the background-color doesn't fill correctly. Any thoughts?
.button{
font-size:18px;
line-height:46px;
color:#57595E;
text-align:center;
display:block;
width:158px;
height:46px;
border-radius:5px;
border:1px solid #57595E;
}
.button:hover{
color:#fff;
background-color:#57595E;
}
Turns out a mixin I was using was adding background-clip: padding-box; and this was causing the issue.
I am looking for a way to highlight the chosen page number in pagination using css,
or to make the chosen page number bold.
the pagination php code works fine so I think I should modify the css page.
what should I add here:
body
{
padding:50px;
font-size:0.85em;
font-family:arial;
}
a
{
text-decoration:none;
color:#0080ff;
}
a:hover
{
text-decoration:underline;
}
.info
{
line-height:150%;
width:650px;
overflow:auto;
margin-top:30px;
color:#555555;
}
.msg
{
padding:10px;
border-bottom:dashed 1px #5d478b;
width:450px;
margin-bottom:15px;
}
#pages
{
clear:both;
list-style-type:none;
overflow:hidden;
margin:0;
padding:0;
}
#pages li
{
float:left;
}
#pages li a
{
font-weight:bold;
margin:0 4px;
padding:5px 10px;
border:1px solid #bbb;
display:inline-block;
border-radius:5px;
}
#pages li a:hover
{
text-decoration:none;
color:#ff0080;
}
You are missing information in your post about the html produced for the pagination.
I presume from your CSS that each page link is an anchor within a list item within an element with the id pages. I'm going to assume that the selected anchor has some sort of class on it, let's say "selected". Add something like this to your css:
#pages li a.selected
{
font-weight: bold;
background-color: yellow;
}