Navigation Alignment Issue in IE only. Help!

Hello - I've been working on my portfolio site for awhile now (and I don't know all that much about code, just how to make it look OK on the user end). I use a jQuery effect on the two instances of navigation on my site: http://quinnianniciello.com which works fine in both Firefox & Safari.

The problem happens in Internet Explorer. The leftmost "button" floats up on top of the others in both rows for no reason, whereas they should be centered on the page. I apologize that the code is probably ridiculously messy - I still need to go through and clean up a bunch of stuff - but I am stuck trying to make it work in IE. The weird thing is it used to, a friend of mine fixed it with a text-center property once, but now I don't know what to do...

SO, if anyone has the time to look at the source code on my site I would be very grateful!

This is the site where I learned about the jQuery effect: http://jqueryfordesigners.com/image-fade-revisited/

This is another site I have been looking at in my search for answers, maybe it is more clear to you?!: http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support

Again, thanks for any help!

You have set the width of the navigation UL to 1000px, normally you could design the site for 1024px width screen resolution. Actual window width will vary in ie, opera, and firefox.

In your case set the UL id=navigation2 width to 980px... you navigation bar will look perfect.

for more html tutorials

http://www.******************

I tried changing the width like you said, but now it bumps the farthest right button down below (in both Safari & Firefox). Is there any other solution? The "buttons" are 250px wide (1000/4) if that helps... I can never win, everyone should just use one browser!

Update: Undid that change so it should look normal in Safari/Firefox again

you should remember one thing,

all user donot use the same browser resolution... most widely used is 1024 x 768.. and the height is varying.

You could design the site for 100 percent width or for fixed width.

I would choose 980px and reduce the button size accordingly.

980/4

980 will look better in IE6

try viewing your site in different resolutions. you can find the difference.

You just have to tweak a bit.

let me know your improvements

thanks

http://www.******************

Thanks for your help! I was kind of hoping there would be another solution, since I think this will mean I would have to resize all of my page elements and templates (which will take a while).

If anyone else has any ideas to make it work in IE I would be very grateful (before I have to resize the whole page 20px less).

Are there any other proprieties I could try before resizing things?

Also, if I do resize everything to 980px wide, how would this solve the problem in IE? Thanks (Sorry i'm just trying to figure it all out)

Are there any other proprieties I could try before resizing things?

The way things fit in their containers is called the Box Model (http://www.w3.org/TR/CSS2/box.html).
The total widths of your floated menu items, plus any margin/padding/border cannot add up to a total width greater than the container your putting them in.

Just because your box model is right doesn't mean that IE6 (and 7 and 8) can't find a way to mess it up. That browser has plenty of bugs that can affect pixel perfect layouts - :mad:

After you fix your box model, get it working in Firefox and make sure your code is valid ... then see what IE6 does to it. If needed, some fixes can be found here - http://www.positioniseverything.net/explorer.html

so the only way to fix my box model is to reduce the width of everything to 980px?