CSS Problems: IE vs. Firefox

SpaceshipSpaceship
Watch

richid

New Member
Impact
0
Hey all,

I'm currently an intern at a smallish web design company, and I am in charge of renovating the company's website. I am trying to create a new navigation system which looks and acts fine in IE. However, with Firefox the menu buttons are much too big. I'm using CSS to code them and was wondering if anyone had any suggestions on how to fix this.

The site:
http://www.websitedesignpa.com
The CSS:
http://www.websitedesignpa.com/css/style.css

Any help would be greatly appreciated!
 
0
•••
The views expressed on this page by users and staff are their own, not those of NamePros.
AfternicAfternic
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.
 
0
•••
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
 
0
•••
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.
 
0
•••
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
 
0
•••
Appraise.net

We're social

Escrow.com
Spaceship
Rexus Domain
CryptoExchange.com
Domain Recover
CatchDoms
DomDB
NameFit
  • The sidebar remains visible by scrolling at a speed relative to the page’s height.
Back