Sigh...few Mozilla problems. 1

[travisbrown]

Was asked to fix a simple css problem on a site...but I usually do only intranet stuff in a strictly IE environment. Mozilla is a littel distant on the radar for me.

Little float and margin problem with Mozilla

I'm trying to get the container div centered (as in IE) and the top nav links (which are floated right) margined down to the bottom of the header div.

I've tried all the usual fixes I can think of, but getting to the point where I get it workin in Mozilla, and breaking it in IE. Anyone know a better approach? Absolute positioning, perhaps?

Here's the problem site...

http://www.vive-clothing.com

css is at

http://www.vive-clothing.com/vive.css

 

[Vragabond]

1. Centering: Super simple. You are not centering the element according to the standards (the way Mozilla works). To center the element, add margin: 0 auto; to your .container. This will make element have margins auto on left/right, thus centering it (and 0 at top and bottom). Text-align: center; on parent should only be used for text (and stupid IE).

2. Nav: Try absolutely positioning the .nav at the bottom of your .header. Make sure .header has position: relative; in its properties and .nav position: absolute; and bottom: 0;

 

[travisbrown]

Thanks. This is what happens when you spend 4 years only working in IE.

I know about the margin: 0 auto; method per bluerobot and glish, et al. I must of had a typo or conflict when I first tried it.