Centering using CSS in different browsers ?

Question

Hi

I am working on http://www.southendbusinessdirectory.co.uk and using Css to Center elements, via both

and the body.

Basically the process I've used works in IE6 and not in Firefox, but the process that I found and used is quoted in many places as working in firefox and not IE - CONFUSED !!

Does anyone know what will work in both ? I only have control of the header and footer.

The style I've used is :

Many thanks in advance.

Ashley

----

Neither of those suggestions
work in IE for some reasion ?

3 answers

body {
margin: 0;
background-color: #666;
}

#container {
margin: 0 auto 0 auto;
text-align: center;
width: 90%;
border:1px solid #E2E2E2;
background-color: #E2E2E2;
}

Unfortunately, not as easy as that!
You can't use CSS for centering your pages (or divisions).
Reason? You need to detect the browsers... and each one responds differently. IE6 will work some centering, IE7 won't (left over bug, as usual).
You also have to take care of the resolution of the browsers and adjust your images accordingly.
So, put a script at the top of the page to detect the browsers AND the resolution:



...
GetW and GetH work on most browsers (at least IE6, IE7, FF, Opera and Netscape).
Then pass on the width to the rest of your code and use

with a "position:absolute"...
CALCULATE your position:
utilwidth = 650; // the useful width you need;
offset = ( scrw - utilwidth ) / 2;



Later, recalculate everything as pages go by...
Pain in the neck, I know!

You can do a cheeky and that will do everything in the div.... Then to center the individual divs that you need to you can do the same thing in the div,

.

I think what you have above would work if instead of id="container" you had

Answer 1

body {
margin: 0;
background-color: #666;
}

#container {
margin: 0 auto 0 auto;
text-align: center;
width: 90%;
border:1px solid #E2E2E2;
background-color: #E2E2E2;
}

Answer 2

Unfortunately, not as easy as that!
You can't use CSS for centering your pages (or divisions).
Reason? You need to detect the browsers... and each one responds differently. IE6 will work some centering, IE7 won't (left over bug, as usual).
You also have to take care of the resolution of the browsers and adjust your images accordingly.
So, put a script at the top of the page to detect the browsers AND the resolution:



...
GetW and GetH work on most browsers (at least IE6, IE7, FF, Opera and Netscape).
Then pass on the width to the rest of your code and use

Answer 3

You can do a cheeky and that will do everything in the div.... Then to center the individual divs that you need to you can do the same thing in the div,