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:
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;
}
It also has problems centering this stuff within the container div (Firefox likes it though):
#container
{
position: relative;
margin: 0 auto;
width:800px;
}
Can anyone suggest what I'm doing wrong? Thanking you muchly!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.Ok - it's currently at <!-- w --><a class="postlink" href="http://www.flat39.co.uk/lunn/index.html">www.flat39.co.uk/lunn/index.html</a><!-- w -->, using <!-- w --><a class="postlink" href="http://www.flat39.co.uk/lunn/lunnstyle.css.The">www.flat39.co.uk/lunn/lunnstyle.css.The</a><!-- w --> 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 body portion of your CSS, try this:
* html body { padding:0 0 0 0; }
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:
* html #container { width:800px; }
I also strongly recommend that you check out The CSS Playground (<!-- m --><a class="postlink" href="http://www.stunicholls.myby.co.uk/index.html">http://www.stunicholls.myby.co.uk/index.html</a><!-- m -->) (<!-- m --><a class="postlink" href="http://www.stunicholls.myby.co.uk/index.html">http://www.stunicholls.myby.co.uk/index.html</a><!-- m -->). 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.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:
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; }
and for the container...
#container
{
position: relative;
margin: 0 auto;
width:800px;
}
* html #container { width:800px; }
Any more suggestions? Thanks loads!
Well, after a bit of messing, to my horror I found the problem (if anyone's interested). Deleting the header:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
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
)You have some errors that need to be fixed. Run it through the validator.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 tweakedWell, no, I think that's the reason for some of your problems from what I recall when looking at your code.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.
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.IE can render things very differently in Standards Compliance mode than in Backwards Compatibility mode, which is also known as Quirks mode.
This explains how to center the elements. (<!-- m --><a class="postlink" href="http://www.dynamicsitesolutions.com/css/center_element/">http://www.dynamicsitesolutions.com/css/center_element/</a><!-- m -->)
I suggest you check out the articles linked to on this page. (<!-- m --><a class="postlink" href="http://www.positioniseverything.net/explorer.html">http://www.positioniseverything.net/explorer.html</a><!-- m -->)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.
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;
}
It also has problems centering this stuff within the container div (Firefox likes it though):
#container
{
position: relative;
margin: 0 auto;
width:800px;
}
Can anyone suggest what I'm doing wrong? Thanking you muchly!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.Ok - it's currently at <!-- w --><a class="postlink" href="http://www.flat39.co.uk/lunn/index.html">www.flat39.co.uk/lunn/index.html</a><!-- w -->, using <!-- w --><a class="postlink" href="http://www.flat39.co.uk/lunn/lunnstyle.css.The">www.flat39.co.uk/lunn/lunnstyle.css.The</a><!-- w --> 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 body portion of your CSS, try this:
* html body { padding:0 0 0 0; }
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:
* html #container { width:800px; }
I also strongly recommend that you check out The CSS Playground (<!-- m --><a class="postlink" href="http://www.stunicholls.myby.co.uk/index.html">http://www.stunicholls.myby.co.uk/index.html</a><!-- m -->) (<!-- m --><a class="postlink" href="http://www.stunicholls.myby.co.uk/index.html">http://www.stunicholls.myby.co.uk/index.html</a><!-- m -->). 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.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:
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; }
and for the container...
#container
{
position: relative;
margin: 0 auto;
width:800px;
}
* html #container { width:800px; }
Any more suggestions? Thanks loads!
Well, after a bit of messing, to my horror I found the problem (if anyone's interested). Deleting the header:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
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
)You have some errors that need to be fixed. Run it through the validator.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 tweakedWell, no, I think that's the reason for some of your problems from what I recall when looking at your code.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.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.IE can render things very differently in Standards Compliance mode than in Backwards Compatibility mode, which is also known as Quirks mode.
This explains how to center the elements. (<!-- m --><a class="postlink" href="http://www.dynamicsitesolutions.com/css/center_element/">http://www.dynamicsitesolutions.com/css/center_element/</a><!-- m -->)
I suggest you check out the articles linked to on this page. (<!-- m --><a class="postlink" href="http://www.positioniseverything.net/explorer.html">http://www.positioniseverything.net/explorer.html</a><!-- m -->)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.