Problem with rollovers

[FungusFeet]

edit:solved! thanks Paul

HTML
CSS

When I rollover the navigation buttons, the main content spills over to the left for a split second.

This only happens in Firefox 9.3(also tested with IE6, Opera 7.51).

For the the buttons I did this with the borders to simulate a button press...
______________top__right__bottom__left
A....................1px....2px.......2px.....1px
A:HOVER.........2px....1px.......1px.....2px

When I made the border widths consistent, the problem vanished.

TIA for any help

[Paul O'B]

Hi,

Try taking the float out of main as it doesn't look like you need it anyway.

#main{ overflow:auto;
 width:400px;
 height:400px;
 background-color:#444;
 border:solid #FC0 1px; 

}

Paul

[FungusFeet]

Thanks Paul O'B.

That fixed the problem, however, the reason why I put it there was because it got rid of the gap between navcontainer and main that only occurs in IE6.

Any ideas on how to get rid of it?

edit: btw the CSS has been updated, main is now sans float

edit: pic of problem

[Paul O'B]

Hi,

Yes thats ie's famous 3 pixel jog and you can kill it with this.

* html #navcontainer {margin-right:-3px}

(If you're unfamiliar with the star sector hack (* html) then look at the FAQ sticky thread on the broken box model for an explanationn. The 3 pixel jog is also explained in the section under floats.)

Paul

[FungusFeet]

lol I was sitting there setting negative values for main

Thank you