Here is my (relevant) css code:
li a {
display: block;
font-weight:bolder;
color: #000;
padding: 8px 16px;
text-decoration: none;
background-image: url('004.jpg')
}
/* Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}
I've tried the URL with double quotes, single quotes, and no quotes and it still isn't working. Can someone help me with this?
Thanks so much for your wise advice.
Make sure that the url and the image extension are correct.
Try this. No quotes, and background instead of background-image. Also, make sure that the file path is correct.
background: url(004.jpg);
Related
I am using wordpress publisher template.
The color of the mobile menu should be #051039 except the last one which is like the button, my problem is the background color of button is same #051039, so I want to change it to white.
I try to solve this problem by adding extra css code to the id of the link:
#menu-item-430 {
text-align: center;
border-radius: 5px;
background-color: #051039;
color: #fff !important;
}
but nothing happened. How can I fix it?
This is my site:
https://ijimfang.com
Use this style
.rh-cover .rh-c-m .resp-menu li:last-child > a { color: #fff !important; }
You can try this code. Please add this code to style.css file of your currently activated theme.
#media only screen and (max-width: 600px) {
ul#resp-navigation li:last-child{
text-align: right;
border-radius: 5px;
background-color: #ffffff;
border: 1px solid #051039;
}
ul#resp-navigation li:last-child a{
color: #fff !important
}
}
I'm working on this page:
http://broadcasted.tv/
My headings have the following (I know it should be a class, I was just doing some testing)
#title-container {
background-color: #333;
color: #fff;
margin-top: 15px;
}
It works fine everywhere except there
http://broadcasted.tv/user/2/albertmarch/
And I can't figure out why the heading is the whole page... Missing div ??
Any help appreciated
Thanks!
The background goes away if you add clear:
#title-container {
background-color: #333;
color: #fff;
clear: both;
margin-top: 15px;
}
I've got problem with link styling -
hover and active works, but link doesn't, what am i doing wrong?
How can i fix this problem?
#nav{padding: 5px 230px 10px 230px;}
#nav li{
display: inline-block;
list-style: none;
margin: 5px;
padding: 1px;
font: 20px Century Gothic;
}
a.navlink:link{
color:#06AD00;
background: white;
border-top: 1px #958A7E solid;
border-bottom: 1px #958A7E solid;
cursor:pointer;
}
a.navlink:visited{}
a.navlink:hover {
color: black;
background: white;
border-top: 1px black solid;
border-bottom: 1px black solid;
cursor:pointer;
}
a.navlink:active {
color: red;
background: white;
border:0;
cursor:pointer;
}
You CSS works great on my FireFox.
Make sure you define the HTML tags and attributes properly according to your CSS.
Also, note that you may see the wrong style because your links are already visited. Try to put some URLs that you didn't visit. (ex: sdfdsfdsfsfdhgsdf.com ect...)
I've had this same problem with certain versions of Opera and older IE. I've always avoided the :link pseudo-class in favor of just a natural a style - never quite understood the reason why, but :link was always 50/50 while natural a has never failed.
Try this instead for your :link style:
a.navlink{
...
}
This will only create a default state for your a.navlink elements - the other pseudo-classes will still modify it properly. If it doesn't fix things for you, then my next guess would be you've got a conflicting style somewhere. Hard to know for sure without getting our hands on the rest of the source.
:link only matches unvisited links, per spec. If you want to match all links, you have to do something like a.navlink:link, a.navlink:visited {}
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 the following css code:
.tag {
display: inline;
font-size: 10px;
padding: 5px;
color: #FFF;
background-color: #444;
}
.tag:hover {
font-size: 10px;
padding: 5px;
color: #FFF;
background-color: #666;
}
aside from the background color, and one having the display:inline, there is no difference, correct? Well when the .tag div comes into existance, it has white text but no background color. it also has a 12pt font size and no padding. however, it looks perfectly the way its supposed to when I hover over it. Can anyone tell me why its doing this?
there will be no different if you only have these 2 classes in your css file/scriptlet.
but it will be different if you have more than 2 and mixed with other classes as well.
your .tag might be overidden by other class
I'd debug it using firefox + firebug. This tool will show you which css class/properties is voeridden
Use !important