CSS Hover effect and shifting

[Husker72]

I'm having a problem with CSS throughout my site and it's a relatively minor thing but of course any webmaster wants EVERYTHING to work perfect right?

The page that best illustrates the problem is here.

In the 'riders' column you'll notice I've used CSS to create the mouseover effect but it creates some page shifting sometimes which I realize has to do with the fact that for the hover effect I'm changing color and more importantly the text from normal to italic font. The only solution I can think of is to either do away with the italic effect or increase the column width. Is there another way to still have the italic effect and eliminate the shifting you see?

Thanks

[deficit]

The cause of your issue is in fact due to the :hover change to italics. Although I haven't had an opportunity to review your stylesheet for verification, it also appears that the font size is getting slightly larger (possibly bold?) as well when hovered over.

If your intent is to provide the user a way to more easily see which link they are hovering, a simple color change should be all that is needed. Perhapse emphasis could better be added by a somewhat dramatic change in color, rather than simply changes in shade of the same color.

Changing to italic and/ or bold text in your particular case is in my opinion not recommended. If you do not want to eliminate some of the effects you are currently using, than the question you must ask yourself is: which is more important to you - the shifting issue, or lack of italic/ bold text on hover?

I hope this helps!

[Husker72]

Thanks for the input, I will in fact get rid of the italic feature and agree, it's a little overkill. The simple color change is enough effect to illustrate a link is present.

[siervo]

Well I am not sure if this will work, but you could try and increase the "word-spacing" so that the space between words makes up for the change. Just saying.

[ryan]

I am having a related problem ... it's demonstrated here.

When you hover on the menu items on the left, that column widens slightly. (Noticeable most when you roll down the menu items.) This has only been a problem when I view in IE, not in Firefox. The CSS for the link and hover on these doesn't change the font size at all - just the colors. Anyone have an idea? I'm down to very little hair that I haven't pulled out already.

(Note: I recently used a very similar set-up on another page - virtually the same CSS - here. Without trouble.)