A: 

To fix your css add

#main { width:100%; }

Then Firefox will match IE6

jarrett
Your code doesn't solve the problem
faressoft
worked for me, I tested it in browser
jarrett
There is a simple movement, Also I don't want width:100%
faressoft
If you look at the layouts in Firefox and IE6 side by side you notice that the width of the content is much wider in Firefox. What is happening is IE6 is that when that hover happens IE6 is pushing those few elements over to the left side where the box actually is in Firefox. So the solution is to make the #main the proper width. 100% in this case is 100% of the parent element, not the page. If you want to adjust the width you can always adjust the width of the parent element.
jarrett
+1  A: 

IE 6 requires hasLayout to be set to true. Various ways are used to give elements 'true' hasLayout. Some don't affect your design at all.

Try giving your footer, navigation, and main panels a zoom or 1, with the following:

#footer,#main,#nav { zoom: 1; }

If that doesn't work, change zoom: 1; to

height: 1%

That should fix things.

Good luck.

Amit
Are you sure ! it did not succeed :( I tried #footer,#main,#nav { zoom: 1; } and #footer,#main,#nav { height: 1%; } and #footer,#main,#nav { zoom: 1; height: 1%; } but nothings changed !
faressoft
Thank you very much :) This .box { zoom: 1; } helped me.But What Exactly Does it Do ?
faressoft
Glad it worked. Trying to explain what it exactly does is a little sketchy. But like I said, IE6 requires hasLayout to be set to true. Therefore, by giving your box with class .box a zoom of 1, you're giving setting it's hasLayout to true, thereby fixing a lot of potential IE6 bugs. IE6 sucks. I dropped IE6 compatibility on my site. I just don't care anymore :)
Amit
And by the way, in my comment, I was guessing on your DIV id's. That's why it didn't work and only worked when you applied it to an actual DIV (.box). lol, I should've looked at your code before I answered. Oh well.
Amit