1px shift and fill the whole cell


At this site that I am trying to keep all css, http://www.wheels-of-chance.com/index.htm I am having an issue with the top menu.

When you hover over it, it shifts like 1px to the right. I know this must be in the :hover part of the links but they are both the same and I cannot figure out why it is changeing when hovering.

Also, when you hover, the entire area does not fill up from end to end. There is still like 10px that stays black.

How or what am I missing here to make this work the way I want?

Thanks for any help or advice on this,


I’m not seeing anything shifting. What browser are you using?

I am using Firefox on a Mac. I looked in IE and it does not seem to do it there.

Is there anyway to fill in the whole area that the word is in when mouseovered?

Sorry, but it’s really hard to debug a layout that uses layout tables, is littered with spacer GIFs and has unoptimised CSS that repeats everything, says it several times, repeats everything, says it a bit more and then repeats itself again… You don’t need to declare the same font in every set of brackets - just set it once on the body and it will inherit throughout the whole page.

In the header links section, what on earth are all those &nbsp’s doing?

I suspect the jump/shift might be caused by the monstrously awful font-size declarations.
For a start, never use pt to specify text size in a stylesheet for screen use. You have set a font size of 10pt on the header links, and 13px on hover. Depending on your browser settings, those might not be the same. You shouldn’t use px either, but that’s only a minor crime rather than a cardinal sin…

ouch… well a lesson learned the hard way.

Thanks Steve for laying it to me straight.