The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

CSS Hover text jump issue

I've seen numerous posts on this and tried implementing several changes but nothing has worked this far. I am toying around with a simple 3 column css layout done by Paul O'B. In it, I am also attempting to do a css controlled menu with each link in the menu having a hover background color change. What happens when you hover over it? The whole menu box shifts to the right.

Hoping to get some insight on this. Code is pasted below. Pretty much everything is from Paul's layout thus far.

Removing the display: block; statement does nothing. Well, it does nothing to correct the issue. It still occurs. But it removes the ability to display a new background across the entire block instead of just behind the text of the link.

The text jumping is caused by the background colour in the a:hover. Somehow it is making ie remember that its width is derived from its parent and not the body and decides to jump over.

The main bug is that ie doesn't realise that the percentage width is derived from its parent container because its parent containers width is derived by margins. Therefore ie takes the body as its parent. Even the height:1% hack doesn't cure it.

The solution is to nest another container in the middle and apply a 100% width to it and then you can place the left column negatively using the correct offset and not the hacked one.