CSS Problems: IE vs. Firefox

richid · 01-21-2005, 08:46 AM

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!

fisicx · 01-21-2005, 11:29 AM

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.

richid · 01-21-2005, 12:14 PM

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

fisicx · 01-23-2005, 07:14 AM

Rich,

Easy peasy this one.
????: NamePros.com http://www.namepros.com/programming/66082-css-problems-ie-vs-firefox.html

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.

richid · 02-01-2005, 12:15 PM

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.

????: NamePros.com http://www.namepros.com/showthread.php?t=66082
Thanks again, very much appreciated,
Rich Schumacher

01-21-2005, 08:46 AM	THREAD STARTER #1 (permalink)
richid New Member Join Date: Jan 2005 Posts: 3	CSS Problems: IE vs. Firefox 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!

01-21-2005, 11:29 AM	#2 (permalink)
fisicx NamePros Member Join Date: Nov 2004 Posts: 43	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. __________________ Spent the summer sleeping in the lee of a smoking volcano - the Internet can't do that for you. fisicx.com - Usabiliy and Design.

01-23-2005, 07:14 AM	#4 (permalink)
fisicx NamePros Member Join Date: Nov 2004 Posts: 43	Rich, Easy peasy this one. ????: NamePros.com http://www.namepros.com/programming/66082-css-problems-ie-vs-firefox.html 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. __________________ Spent the summer sleeping in the lee of a smoking volcano - the Internet can't do that for you. fisicx.com - Usabiliy and Design.

01-21-2005, 12:14 PM	THREAD STARTER #3 (permalink)
richid New Member Join Date: Jan 2005 Posts: 3	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

02-01-2005, 12:15 PM	THREAD STARTER #5 (permalink)
richid New Member Join Date: Jan 2005 Posts: 3	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. ????: NamePros.com http://www.namepros.com/showthread.php?t=66082 Thanks again, very much appreciated, Rich Schumacher

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)