CSS help! (IE7) - SOLVED

Dr_Keenbean · January 2007

Okay so I'm developing a site and I want the site to be 800 pixels wide and rest in the center of the browser regardless of size or resolution.

Previously (in IE6, Firefox, and IE7 beta) I accomplished this by enclosing all of the content in a <div> tag and applying a style to that tag.

Example:

<div class="divContent">
Stuff would go here...
</div>

And in the css file the following would be applied to get the appropriate effect:

.divContent{
width:800px;
margin-left:auto;
margin-right:auto;}

Like I said before this WAS working under IE7 in beta and continues to work under IE6 and Firefox. Now in IE7 it's simply acting as if there were no specification of the left margin. Essentially the whole page is slammed to the far left. Other than that everything else is fine.

What. The. Fuck.

EDIT: Added clarification.

blincoln · January 2007

What's happening in 7?

Dr_Keenbean · January 2007

blincoln wrote:

What's happening in 7?

I added it to the post. It's funny, I tell people every day at work that I need detailed decriptions of problems to solve them and I've gone and neglected that.

blincoln · January 2007

What happens if you put it inside another div that has a text-align value of center?

Jasconius · January 2007

What is your goal?

You want the div to push up against the sides of the window?

You want to center it?

monkeypoo · January 2007

blincoln wrote:

What happens if you put it inside another div that has a text-align value of center?

After doing some tests, this seems the way to go.

To simplify things, instead of adding another div on the outside, just text-align the entire body to center, then have your main content holder div do a text-align to left, which will propagate to all the other elements underneath it.

You'll need to keep the "margin: auto auto;" for Firefox and other "standards" based browsers.

So like:

<html>
<head><title>IE7 Div Centering</title>

<style type="text/css">
body {
  text-align: center;
}

#content-holder {
  width: 800px;
  margin: auto auto;
  border: 1px solid red;
  text-align: left;
}
</style>

</head>
<body>

<div id="content-holder">
Quis wisi ullamcorper ex vulputate feugiat esse eum duis tincidunt. Iriure nostrud qui vulputate praesent, euismod at eros, ut. Ipsum molestie aliquam illum ad ut vel illum, suscipit delenit ullamcorper duis dolore accumsan iusto. Consequat lorem nisl wisi laoreet nostrud minim feugiat nulla luptatum, vel, nisl. Dignissim erat, dolor qui nulla sit ex veniam erat dignissim et vero consequat dolore eu augue consequat at vulputate ullamcorper.
</div>

</body>
</html>

You should be good to go as long as everything else goes inside your "content-holder" div.

blincoln · January 2007

The margin auto/auto thing is what's making it centered in IE7 as well. It just doesn't know what to "auto" the margins to without it being inside something that centers it horizontally.

At least, that's been my experience.

monkeypoo · January 2007

I just tried it and taking the margin out: IE 7 and IE 6 center the div; Firefox left aligns the div.

So it seems that only Firefox (of the three I tested of course) needs the margin added in.

Edit:
Scientific!

No text-align, No margin

IE6     left aligned
IE7     left aligned
FF2     left aligned

text-align, No margin

IE6     centered
IE7     centered
FF2     left aligned

No text-align, margin

IE6     left aligned
IE7     left aligned
FF2     centered

text-align, margin

IE6     centered
IE7     centered
FF2     centered

My only thoughts are that IE6/7 cannot handle the margin properly and Firefox doesn't apply the text-align to block level elements, thus, you need a combination of the two to cover all bases.

Dr_Keenbean · January 2007

Man I am so sick of browsers handling things so differently and having to come up with workarounds all the time. Usually IE being gay. Damn its market share!

Thanks though, I will give these a shot when I get to work tomorrow!

monkeypoo · January 2007

After looking a little more into this I realized a possible issue, you should really use "margin: 0 auto;".

The first value is the top / bottom margins, which you want to be 0. The second is the left / right margins, which you want to "float".

This probably won't make a difference in most cases, but you could run into problems, so probably best to use 0.

Dr_Keenbean · January 2007

The text-align:center in the body tag solved it. I was really hoping there was simply something I was over-looking. I swear just using margin:auto worked in IE up until only recently.

Anyway thanks so much for all your help! Mods can go ahead and lock this now.

Penny Arcade

CSS help! (IE7) - SOLVED

Posts