3 replies [Last post]
sandyhon
sandyhon's picture
Offline
Regular
Cool, CA
Last seen: 8 years 23 weeks ago
Cool, CA
Timezone: GMT-7
Joined: 2007-09-04
Posts: 45
Points: 41

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;
}







  • Home

  • About Us

  • Speakers & Workshops

  • Activities

  • Community Service

  • Quilt Show

  • Gallery

  • Calendar



subhead





About Us

copy goes here






Thanks in advance for your help! Sandy

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 31 weeks 18 hours ago
Joined: 2004-06-30
Posts: 9668
Points: 801

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.

Verschwindende wrote:
  • CSS doesn't make pies

sandyhon
sandyhon's picture
Offline
Regular
Cool, CA
Last seen: 8 years 23 weeks ago
Cool, CA
Timezone: GMT-7
Joined: 2007-09-04
Posts: 45
Points: 41

I changed the repeat value

I changed the repeat value and that solved my problem!
Thanks again for all your help! :thumbsup:

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 31 weeks 18 hours ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Any time

Any time Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies