I am trying to create a rollover effect using css. I have my background images set up (left side and right side), and they are 672px high. the top 336 px are the static background, and the bottom 336 px is the rollover background.
For some reason when i roll over the link, the image that is supposed to be on the left goes to the right, and the image that is supposed to be on the right goes to the left. here is the css for my navigation.. can anyone help? Thanks!
#navigation {
background: #F4FAFA;
border-width: 1px 0;
font-size: .9em;
font-family: Arial, Helvetica, sans-serif;
}
#navigation ul, #navigation ul li {
list-style: none;
margin: 0;
padding: 0;
}
#navigation ul {
padding: 5px 0;
text-align: center;
}
#navigation ul li {
display: inline;
margin-right: 5px;
}
#navigation ul li.last {
margin-right: 0;
}
#navigation ul li a {
background: url("../tab-right.gif") no-repeat right top;
color: #004B4C;
padding: 5px 0;
text-decoration: none;
}
#navigation ul li a span {
background: url("../tab-left.gif") no-repeat left top;
padding: 5px 1em;
}
#navigation ul li a:hover span {
color: #004B4C;
text-decoration: none;
}
#navigation a:hover {
background-position:0% -336px;
}
#navigation a:hover span {
background-position:100% -336px;
}
For some reason when i roll over the link, the image that is supposed to be on the left goes to the right, and the image that is supposed to be on the right goes to the left. here is the css for my navigation.. can anyone help? Thanks!
#navigation {
background: #F4FAFA;
border-width: 1px 0;
font-size: .9em;
font-family: Arial, Helvetica, sans-serif;
}
#navigation ul, #navigation ul li {
list-style: none;
margin: 0;
padding: 0;
}
#navigation ul {
padding: 5px 0;
text-align: center;
}
#navigation ul li {
display: inline;
margin-right: 5px;
}
#navigation ul li.last {
margin-right: 0;
}
#navigation ul li a {
background: url("../tab-right.gif") no-repeat right top;
color: #004B4C;
padding: 5px 0;
text-decoration: none;
}
#navigation ul li a span {
background: url("../tab-left.gif") no-repeat left top;
padding: 5px 1em;
}
#navigation ul li a:hover span {
color: #004B4C;
text-decoration: none;
}
#navigation a:hover {
background-position:0% -336px;
}
#navigation a:hover span {
background-position:100% -336px;
}