Doc type: DTD XHTML 1.0 Strict
Validation: no errors
Problem: The rollover graphic doubles when in hover state (offsets to the right). This appears in all browsers. I tried adding "overflow: hidden" to the #sidebar a:hover div style, but it had no effect. :shrug:
Here's a link to the site: http://home.jps.net/~sandyhon/quilt_show/quilt_show.html
Here's the code for my test page:
Foothill Quilters Guild
html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset {
margin: 0;
padding: 0;
border: 0;
}
img {
border: none;
}
body {
margin: 0px;
padding: 0px;
color: #333333;
background-color: #666;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: x-small;
text-align: center;
}
#wrapper {
margin: 0 auto;
padding: 0px;
position: relative;
color: #333;
text-align: left;
background-image: url(images/bkgd-repeat.jpg);
background-repeat: repeat-y;
background-color: #FFFFFF;
width: 760px;
}
#header {
margin: 0;
padding: 0;
line-height: 0;
}
/* start topnav styles */
#topnav {
margin: 0;
padding: 0;
background-color: #3d261e;
}
#topnav ul {
margin: 0;
padding: 0px;
list-style: none;
text-align: center;
display: block;
}
#topnav li {
margin: 0;
padding: 0 9px 0 9px;
display: inline;
background-color: #3d261e;
}
#topnav a:link, #topnav a:visited {
color: #f7a150;
text-decoration: none;
font-weight: bold;
}
#topnav a:hover {
color: #FFFFFF;
}
/* end topnav styles */
#sub-header {
margin: 0px;
padding: 0px;
clear: both;
}
#container {
margin: 0px;
padding: 0px;
width: 760px;
}
#content {
width: 560px;
margin: 0px 0px 0px 165px;
padding: 0px;
}
/* start sidebar navigation styles */
#sidebar {
width: 131px;
margin: 0px;
padding: 0;
float: left;
}
#sidebar ul li {
margin: 0;
list-style: none;
float: left;
}
#sidebar a:link, #sidebar a:visited {
width: 131px;
padding: 8px 22px 8px 18px;
text-decoration: none;
font-weight: bold;
color: #1f4d5f;
display: block;
}
#sidebar a:hover {
color: #ffffff;
background-image: url(http://home.jps.net/~sandyhon/images/rollover.jpg);
background-repeat: repeat-x;
}
/* end sidebar navigation styles */
p {
font: x-small Verdana, Arial, Helvetica, sans-serif;
line-height: 1.5;
text-align: left;
color: #333333;
padding-bottom: 1em;
}
h1 {
margin-bottom: 0px;
padding-bottom: 1em;
color: #66528a;
text-align: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: medium;
font-style: normal;
line-height: normal;
font-weight: bold;
}
.content a:link, a:visited {
font-weight: normal;
color: #196178;
}
.content a:hover {
color: #891b1b;
}
.footer {
clear: both;
color: #333333;
text-align: center;
padding: 20px 0px 10px 0px;
}


About Us
copy goes here
Thanks in advance for your help! Sandy
Your anchor is too wide to
Your anchor is too wide to fit the background image it sits on. Because you've set the background image on hover to "repeat-x", that's exactly what it's doing.
Either change the width of the anchor or set the repeat to Y instead.
I changed the repeat value
I changed the repeat value and that solved my problem!
Thanks again for all your help! :thumbsup:
Any time
Any time