3 replies [Last post]
foolios
Offline
newbie
Indiana
Last seen: 11 years 44 weeks ago
Indiana
Joined: 2007-09-17
Posts: 3
Points: 0

I was hoping I could do a rollover effect where the background color of links within a list will change color.
I was able to make the a:hover work. The problem is that the new color that appears during the hover extends past the boundaries of the link and it's list container.
I tried to set the links inside of a span and gave that a width in hopes it would stop this problem.

Hasn't worked. Thank you in advance for your time.

/* Any a element that has lifill as its class */ a.lifill { padding-left: 2px; padding-right: 100%; /*border: solid 1px;*/ }

/* a elements that are hovered over that have lifill as a class */
a:hover.lifill { background-color: #DCDCDC;
}

Katie
Katie's picture
Offline
Enthusiast
Seattle, WA
Last seen: 4 years 4 weeks ago
Seattle, WA
Timezone: GMT-8
Joined: 2006-08-06
Posts: 357
Points: 2

I can't tell for sure since

I can't tell for sure since you didn't post all of your HTML and CSS, but this code behaves as I'd expect. The background grey color extends to the width of the link item.

The padding-right: 100%; specification on your links is a suspicious choice. That's what makes the they grey background appear on the white space to the right of your links - you've actually made the link longer.

Width can only be specified on block elements, not inline elements. Divs, headers, and list items are block level elements by default, and links are inline elements by default. So if you have a link that you'd like to be a certain width, you must also convert it to a block level element:

CSS:

a.lifill
{ display: block;
width: 5ems;
}

Blog: Pew Pew Laser Blog
Online File Storage: DropBox
Daily Deals on Local Activities: Groupon

foolios
Offline
newbie
Indiana
Last seen: 11 years 44 weeks ago
Indiana
Joined: 2007-09-17
Posts: 3
Points: 0

Thank you so much. That

Thank you so much. That fixed it. I now understand the inline element problem I was having.

Cheers

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 16 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

Katie wrote: a.lifillĀ  {

Katie wrote:


a.lifill
{ display: block;
width: 5ems;
}

I think you mean EM Wink

Verschwindende wrote:
  • CSS doesn't make pies