Sat, 2003-11-15 15:17
Hello,
I am trying to use CSS to centre my DIV tag which has a border around it within my flexible width window.
I seems to work fine in Netscape 6.2 but I cannot get it to work in Internet Explorer 6.
Please visit : http://www.option3.customerdemo.com/div-problem.htm
You should see the error message window which I am trying to centre within the page.
I have used auto margins for the DIV tag which I know works in Netscape, but I also used text align center which I heard is the fix for Explorer. None of these work for IE.
The HTML code in question is:
<div id="errormessage">
<h1>--- ERROR ---</h1>
<p>This is an error</p>
</div>
The CSS style related to the above is:
body
{background-color: #CCCCCC;
padding: 0px;
margin: 20px;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: center;
}
div.outer { margin-left: auto; margin-right: auto; }
#errormessage
{
border: thin dashed #CC0000;
width: 200px;
margin-left: auto;
margin-right: auto;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: xx-small;
text-align: center;
}
#errormessage h1
{
padding: 4px;
text-align: center;
margin: 0px auto;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: x-small;
color: #CC0033;
}
#errormessage p
{
padding: 4px;
text-align: center;
margin: 0px auto;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: x-small;
color: #CC0033;
}
Thanks in advance
Vince
Sat, 2003-11-15 15:54
#1
Cannot center DIV tag in IE using CSS - tried evrything!
I managed to find a CSS solution to the problem.
http://www.option3.customerdemo.com/div-problem2.htm
What I did was set the table cell class to be text align: center. This simply means that all objects within this table cell will be defaulted to be centered. Hence all I would need to do is overide the styling to have the alignment I desire. Not sure how elegent this solution is but I guess it is
a localised version of text aligning the body tag.
.cellcontent {
background-color: #FFFFCC;
width: 80%;
vertical-align: top;
margin: 0px;
padding: 16px;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: center; <<<<<<<<< THE CHANGE
}
Any comments on this?
Vince
Sat, 2003-11-15 23:14
#2
Cannot center DIV tag in IE using CSS - tried evrything!
Vince, you apparently want #errormessage to be centered,
but you are applying the side auto margins to a wrapper div.
Divs are not like tables, in that while tables default to the
minimum width possible, divs default to the width of the
container (the body element). If this wrapper is full width,
centering it does nothing.
Rather you should auto margin #errormessage itself. The
container, either the outer div or the body, does get the
'text-align: center', but only as a hack for IE5.x/win.