I'm having trouble centering objects horizontally in Firefox 4 and 5, where they are instead aligned to the left. The site appears perfectly in Firefox 6, IE9, 8, 7, 6, Safari 5, Chrome 13, and 11 (I tested them in Adobe BrowserLab). Given Firefox's excellent standards compliance, I'm inclined to believe the problem lies in my css, but I'm not sure where. I've been tinkering with it for several hours, to no avail. So, if anyone can help me with this, I will be extremely grateful. I've posted the relevant code below, but if anyone needs to access the site, the URL is:

Just to update anyone interested, after much more tinkering I think the problem actually lies in the width of the header image. I haven't resolved the issue yet, but I don't think the problem is with the CSS anymore.

vikram1vicky

09-13-2011, 08:14 AM

Use following code to center aligned your main wrapper:

#wrapper {

width:960px;
margin:0 auto;
}

It will make you wrapper center aligned in all browsers

:)

bathkbra000

09-13-2011, 09:04 AM

Thanks, vikram1vicky.

I figured out what to do by the time I got to your post, but the solution was similar to what you suggested.

Basically, I didn't have a uniform width for all the <div>s due to images exceeding the width of them, so they didn't align correctly in lower resolution windows. I made sure none of the images were wider than their parent <div>s, and set all the <div>s to have a uniform width (basically what vikram1vicky suggested by using a wrapper element).

So, it works now, and thanks again for your input, vikram1vicky!

teedoff

09-13-2011, 01:49 PM

Thanks, vikram1vicky.

I figured out what to do by the time I got to your post, but the solution was similar to what you suggested.

Basically, I didn't have a uniform width for all the <div>s due to images exceeding the width of them, so they didn't align correctly in lower resolution windows. I made sure none of the images were wider than their parent <div>s, and set all the <div>s to have a uniform width (basically what vikram1vicky suggested by using a wrapper element).

So, it works now, and thanks again for your input, vikram1vicky!

Well, if you're new to webdesign, then you've learned an important concept! The Box Model (http://css-tricks.com/2841-the-css-box-model/). You should read the link I gave and memorize it...lol