CSS Problems: IE vs. Firefox

Gone wrong in both IE and Mozilla/Firefox.

The nav is hard over on the righthand side with a huge grey block between it and the main content. It is also all misaligned and the font in IE is a lot bigger than in Moz as well.

Can you put the nav back where it should be before we begin to fix the bug.

Well, the way my boss had it setup previously, and I believe the way he still wants it is with that table being 100% width, and having the nav hard right while putting the gray space in between. I personally think it looks terrible, but he calls the shots. As for the text, I'm using Mozilla 1.0 and IE 6.0 and the text is identical, in face and size. The only different is the button widths.

Thanks for the quick reply, much appreciated.

Rich

Rich,

Easy peasy this one.

IE and Mozilla browsers render box width differently. Mozilla does it properly and IE gets it wrong (surprise surprise).

You need to employ the Box Model Hack. Search google and there are any number of tutorials on how to do this.

However, esssentially, 110px width works for IE. You need to add the padding, border and margins to the 110px to get it to work in Mozilla. The box model hack differentiates between the two.

The problem at the moment is with your sidebar and subnav styles. You are using the box model hack incorrectly especially in the '#subnav li a' style where you call 110px twice.

If you need more help, I will do so but only if your boss listens to reason - he will lose custoimers if he leaves it like it is. The design looks stupid with the navigation over on the right, try looking at the site on a really big screen with a very high resolution and small font.

First of all, thanks for the information it was extremely helpful. I've been dealing with other projects which is why I haven't responded in a while. I checked out what you said, did some research, and fixed most of the problems I was having. Being somewhat of a perfectionist, however, I would like to rectify three minor things. If you look at the page now, you'll see the buttons now work correctly (in addition, I also gave the table a definite width instead of 100%). First, the top border sticks out about 1 pixel more than the buttons. Next, the bottom border disappeared when the button width was fixed. Lastly, I would like to vertically center the entire navigation area. Any input into this would be greatly appreciated.

Thanks again, very much appreciated,
Rich Schumacher