Fieldset CSS Centering

[effendi]

I created a CSS file which defined the attributes of my fieldset.
However, inspite of trying various combination, I cannot "centre" my
fieldset, it is flushed to the left.

Here is my CSS file.

body {
text-align:center; /* for IE */
align:center;
}
div#formfields { width:800px;
align:center
}

fieldset {
background-color: #E3EEF7;
width:800px; /* or a percentage, or whatever */
margin-bottom: 10px
align:center
}


TEXTAREA {
font-weight : Normal;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
border-color : 888888;
border-style : solid;
border-width : 1px;
Font-color : 000000;
display: block;
width: 498px;
float: left;
margin-bottom: 10px;
}

INPUT, Select {
font-weight : Normal;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
border-color : 888888;
border-style : solid;
border-width : 1px;
Font-color : 000000;
display: block;
width: 150px;
float: left;
margin-bottom: 10px;
}

..Buttons{
align:center
}


label{
width: 150px;
font-size: 11px;
text-align: right;
width: 150px;
float: left;
padding-right: 20px;
display: block;
margin-bottom: 10px
}


br {
clear: left;
}


td {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #333333;
text-decoration: none;
}

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #333333;
text-decoration: none;
}

tr {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #333333;
text-decoration: none;
}

a:link { font-family: Arial, Helvetica, sans-serif; font-style:
normal; color: #666666}
a:visited { font-family: Arial, Helvetica, sans-serif; font-style:
normal; color: #820034}
a:active { font-family: Arial, Helvetica, sans-serif; font-style:
normal; color: #666666}


Can any tell me what I did wrong?

Thanks in advance

 

[Steve Pugh]

I created a CSS file which defined the attributes of my fieldset.
However, inspite of trying various combination, I cannot "centre" my
fieldset, it is flushed to the left.

Here is my CSS file.

body {
text-align:center; /* for IE */
align:center;
}
div#formfields { width:800px;
align:center
}

There's no such CSS property as align.

fieldset {
background-color: #E3EEF7;
width:800px; /* or a percentage, or whatever */
margin-bottom: 10px
align:center
}

Can any tell me what I did wrong?

You made up a CSS property.

To center a block set the margin-left and margin-right properties to
auto. Works in all modern and semi-modern browsers (even IE6 if you
trigger Standards mode).

Steve

 

[effendi]

Steve,

Thanks, I removed the align: center. However,it doens't seem to have
any effect. I believe its due to the IE issue. How do you open IE in
Standard more?

 

[Toby Inkster]

Thanks, I removed the align: center. However,it doens't seem to have
any effect. I believe its due to the IE issue. How do you open IE in
Standard more?

I assume the question is one about Standards mode and Quirks mode.

Try: http://gutfeldt.ch/matthias/articles/doctypeswitch.html

 

[Steve Pugh]

Thanks,

For what? Please quote the post you are replying to.

I removed the align: center.

Did you add anything as well?

However,it doens't seem to have
any effect. I believe its due to the IE issue.

WEll did you test in browsers other than IE?

How do you open IE in
Standard more?

You include a doctype that triggers standards mode on the first line
of your document? See http://hsivonen.iki.fi/doctype/

Any more help will need a URL.

Steve

 

[effendi]

Thanks to Steve and Toby

To answer Steve, yes I tired in Firefox and the alignment was ok. I
finally found that the source of my problem was this piece of code:-

div#formfields { width:800px;

align:center
}

I removed that and all the elements were centred.

The only problem I am still facing is the fact that my buttons are
still left aligned. In spite of the fact that I gave the butons a clas
called "buttons"

with the following code


Input.Buttons{
color:#050;
font-family:'trebuchet ms',helvetica,sans-serif;
font-size: 11px;
margin-left: auto
margin-right: auto
}

 

[PeterMcC]

(e-mail address removed) wrote in

Thanks to Steve and Toby

To answer Steve, yes I tired in Firefox and the alignment was ok. I
finally found that the source of my problem was this piece of code:-

div#formfields { width:800px;


I removed that and all the elements were centred.

The only problem I am still facing is the fact that my buttons are
still left aligned. In spite of the fact that I gave the butons a clas
called "buttons"

with the following code


Input.Buttons{
color:#050;
font-family:'trebuchet ms',helvetica,sans-serif;
font-size: 11px;
margin-left: auto
margin-right: auto
}

Missing semi-colon?

 

[Steve Pugh]

(e-mail address removed) wrote in
<[email protected]>

Missing semi-colon?

That and the fact that margin: auto won't center inline elements like
input. And based on what the OP has literally written there's also the
mismatch between class="buttons" and .Buttons. Without a URL, who
knows?

And that's not even getting into the other problems like pixels for
font size and colour with no background colour.

Steve