Anyone able & willing to help with a CSS question please

I've got our church's web site up and running. It's essentially set for a width of 1024 pixels, with a very slight margin.

For a minor refinement I'm seeing if I can change the white space at the sides visible at higher resolutions, e.g. 1280, to a slightly off-white, perhaps with a very thin white border. To achieve this I've put a 'main' div around the whole content. And have added the following CSS

Text
1 23 45 67 89 1011 1213 1415 1617	body{         background:#884466;        margin:0;         padding:0;        color:#000000;         font-size:50%;} #main{        border:solid #00ffff;         border-width:3 10px;} #main{        width:993px;         margin:0 auto;        position:relative;         background-color:#ffffff;}

(Don't worry about the border colours, they're deliberately yucky to make it easy to see what's what and where.)

I've got it working as I want it, apparently, on FF, Chrome, Opera, but on IE8 it insists on putting the content area at the left of the window rather than in the middle.

I've got this feeling it may be something to do with the whole structure of the site with its various div elements, tables, etc., and I really do not want to change those!

The test environment can be seen here.

Any thoughts on what I'm doing wrong, or not doing, or whatever, would be appreciated.

a) don't use absolute width, go for relative, ie width:90%;
b) see the IE gotcha here; http://www.w3schools.com/css/css_align.asp

There is a bug in Internet Explorer's handling of margins for block elements.

In IE, block elements are sometimes treated as inline content. This is particularly problematic when it comes to centering.

For centering to work in IE, use the text-align property.

To avoid this affecting the text in the original <div>, add a new <div> as a container with text-align:center, and reset the text-align in the original <div>:

so in your case, something like;

CSS
1 23 45 67 89 1011 1213 1415 16	body{         background:#884466;        margin:0;        padding:0;        color:#000000;         font-size:50%;}#divmain{ text-align:center;} #main{        border:solid #00ffff;         border-width:3 10px;        width:90%;         margin-left:auto;        margin-right:auto;         background-color:#ffffff;        text-align:left; }

I do believe you're a star!

I did the changes and it seems to work just fine. In fact I reverted the width to 998px and that also works fine. So the only changes I've needed to do are to add the outer container div with text-align:center, and setting text-align:left in the inner one.

It's strange because I've been looking at various web sites that do have non-white side background, tbb, BBC are two examples, indeed my CSS was based on the latter, but I couldn't see how they solved the IE issue. Now searching for the text-align I think I can see that which sets it.

An even simpler solution, now you've led me there, is to put the text-align:center in the body CSS and remove the outer container. It certainly seems to work.

It's getting late so I'm not certain I've got everything in place, I'll do some more testing in the next day or two if time permits, and all being well, I can make this small improvement.

I know the web site is simple in the grand scheme of things but I've learned a lot from doing it, it's all grist to a golden oldie's mill

Many thanks 12eason.

In reply to a post by cheshire_man:

I did the changes and it seems to work just fine. In fact I reverted the width to 998px and that also works fine. So the only changes I've needed to do are to add the outer container div with text-align:center, and setting text-align:left in the inner one.

Yeah, it's not really related to the alignment bug, it's just considered bad practice to have adsolute width as it wrecks scalability.

In reply to a post by 12eason:

Yeah, it's not really related to the alignment bug, it's just considered bad practice to have adsolute width as it wrecks scalability.

Ah, if you were to see me, you'd notice that I have, shall we say, absolute width

Hi

So apart from the diet we all need, your site is looking fine and the church should be pleased.

Sure you would notice (or may be deliberate) but you have the word "Test" in the source before the doctype, just in case this gets forgotten.

Also worth a thought about <br class="line" /> Looks like you might have one browser correction for this but still not producing exact replication across browsers and I 'm sure you would want that for the header. Works reasonably and no rush but might be an area to experiment with alternatives.

Yes, the Test is put there because of the URL parameters so I can tell I'm in the test area of the site. If you just call the site with the 'bare' URL Test is not written to the screen.

The <br class="line" /> was to fiddle another IE spacing problem in the header early on. There's a number of little tweaks and tidies I want to do when I get the time.

And yes, our new Vicar is very pleased with the site, he especially likes the falling snow on the Christmas Services page of the non-test site.