Site positioning : why does MS IE indent everything?

@nickismeJul 05.2005

Hi – I’ve designed the positioning of my site using CSS in Firefox – all worked fine and I was rather happy with what it showed. Sadly, when loading in IE I found that the entire site was indented around say 50px to the right. I’m assuming that there’s something wrong with the body css script:

[CODE] body { position: relative; margin: 0px auto; width:1024px; font-family: verdana, arial, helvetica, sans-serif; font-size: small; font-style: normal; color: #333333; background-color: #D5E2EA;

} [/CODE]

It also has problems centering this stuff within the container div (Firefox likes it though):

[CODE] #container { position: relative; margin: 0 auto; width:800px; } [/CODE]

Can anyone suggest what I’m doing wrong? Thanking you muchly!

to post a comment

CSS

11 Comments(s) _↴

@toicontienJul 05.2005 — #You could be right and you could be wrong in your assumption. We need to see the full HTML and CSS. A link to the page is preferable.

@nickismeauthorJul 05.2005 — #Ok - it's currently at www.flat39.co.uk/lunn/index.html, using www.flat39.co.uk/lunn/lunnstyle.css.

@Gerald_BocciJul 05.2005 — #The problem is the browser, not the CSS: IE sucks when it comes to CSS compatibility. For some reason, Micro$oft doesn't like to obey all of the W3C standards . . . .

But, there is hope for your site! There is a workaround "hack" that makes IE display pages correctly. To fix the [B]body[/B] portion of your CSS, try this:
[CODE]* html body { padding:0 0 0 0; }[/CODE]
That will force IE (and IE only) to assume a 0-pixel padding space around the body (it's usually 10px or so in IE, and 0px in other browsers).

For the #container tag, try adding:
[CODE]* html #container { width:800px; }[/CODE]

I also [I]strongly[/I] recommend that you check out [URL=http://www.stunicholls.myby.co.uk/index.html]The CSS Playground (http://www.stunicholls.myby.co.uk/index.html)[/URL]. There are a lot of good CSS tricks and tips there. In particular, he has found a lot of good workarounds for various browser/CSS incompatibilities.

@nickismeauthorJul 05.2005 — #Thanks that's really kind - looks like a great site too ?

But sadly I don't think that's working... unless I've inserted the code wrongly... But the positioning in IE hasn't changed. This is how I've added it:

Body:

[CODE]
 body {
 position: relative;
 margin: 0px auto;
 
  left:0px;
  width:1024px;
  font-family: verdana, arial, helvetica, sans-serif;
  font-size: small;
  font-style: normal;
  color: #333333;
  /*width: 100%;
  height: 100%;*/
  background-color:  #D5E2EA;
 
 
 }
 
 * html body { padding:0 0 0 0; }
 [/CODE]

and for the container...

[CODE]
 #container
 {
 position: relative;
 margin: 0 auto;
 width:800px;
 
 }
 
 * html #container { width:800px; }
 [/CODE]

Any more suggestions? Thanks loads! ?

@nickismeauthorJul 06.2005 — #Well, after a bit of messing, to my horror I found the problem (if anyone's interested). Deleting the header:

[CODE]
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 [/CODE]

resulted in the page not being indented anymore by IE. Can't believe that messes things up in IE... anyone know of a way around this, so that I can still make the page a valid XHTML page?

But sadly this still doesn't display the centering that I'm after... oh well, I'll get there...

(Edit: ah. Just realised IE doesn't like {margin:auto} at all so i'm just going to have to stick a {left:200} to mimic centering. Not nice at all, but it'll have to do ? )

@drhowarddrfineJul 06.2005 — #You have some errors that need to be fixed. Run it through the validator.

@nickismeauthorJul 06.2005 — #Cheers - yeah, am sure there are plenty of errors to get through... probably leave that for a while until I've got the rest of the site tweaked

@drhowarddrfineJul 06.2005 — #Well, no, I think that's the reason for some of your problems from what I recall when looking at your code.

@toicontienJul 06.2005 — #I agree with drhowarddrfine. Validate the HTML and CSS first. What you'll probably want is to set the body margin and padding to 0. Remove the "auto" from the body's margin property. And you don't need an IE hack.

<i>
 </i>body {
 position: relative;
 margin: 0;
 padding: 0;
 font-family: verdana, arial, helvetica, sans-serif;
 font-size: small;
 font-style: normal;
 color: #333333;
 background-color:  #D5E2EA;
 }

Besides that, I get horizontal scroll bars on a 1024 screen resolution. Web pages are never exactly as wide as a monitor's resolution, thus I removed the width property.

@KravvitzJul 06.2005 — #IE can render things very differently in Standards Compliance mode than in Backwards Compatibility mode, which is also known as Quirks mode.

[url=http://www.dynamicsitesolutions.com/css/center_element/]This explains how to center the elements.[/url]

[url=http://www.positioniseverything.net/explorer.html]I suggest you check out the articles linked to on this page.[/url]

@TechEvangelistJul 08.2005 — #Kravvitz hit the issue on the head. The differnence is quirks mode versus standards mode. From my experience, FireFoz and Mozilla usually get it right and IE gets it wrong. Focus on fixing the issues identified plus the errors and you should be okay.

Also in #CSS _↴

Using CSS for gallery links...?Do you need to link to javascript file in wordpress to get it working.Height:100%

Success!

Help @nickisme spread the word by sharing this article on Twitter...

Tweet This

Site positioning : why does MS IE indent everything?

11 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Site positioning : why does MS IE indent everything?

11 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

11 Comments(s) _↴

Also in #CSS _↴