On my Joomla Website, I am using a template which uses the following CSS rule to make the content pane centred:
clear:both;
margin:0 auto;
width:920px;
This seems to work perfectly well in FF/Chrome, but when loaded in IE, all is glued to the left side of the window. What's the issue with this? margin: 0 auto; seems like a sensible, straight-forward rule. Why does IE not obey?
Check that your DOCTYPE does not look like this:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- --><?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
because then, IE will be in Quirksmode (no boxmodel)
Another option is to use the following:
position:absolute;left:50%;
margin:0 0 0 -460px;
width:920px;
which will center the div in its parent.
Sometimes, it may help to expand the options explicitly:
margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
I had this same problem, what worked for me was:
position:absolute;left:50%; margin:0 0 0 -460px; width:920px;
Which is mentioned by Rowan. Thanks!!