Velocity Reviews

Velocity Reviews (http://www.velocityreviews.com/forums/index.php)
-   HTML (http://www.velocityreviews.com/forums/f31-html.html)
-   -   Fieldset CSS Centering (http://www.velocityreviews.com/forums/t164494-fieldset-css-centering.html)

effendi@epitome.com.sg 03-14-2006 04:20 PM

Fieldset CSS Centering
 
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 03-14-2006 04:58 PM

Re: Fieldset CSS Centering
 
effendi@epitome.com.sg wrote:

>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
--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve@pugh.net> <http://steve.pugh.net/>

effendi@epitome.com.sg 03-15-2006 02:23 AM

Re: Fieldset CSS Centering
 
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 03-15-2006 08:24 AM

Re: Fieldset CSS Centering
 
effendi wrote:

> 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

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact


Steve Pugh 03-15-2006 08:36 AM

Re: Fieldset CSS Centering
 
effendi@epitome.com.sg wrote:


>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
--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve@pugh.net> <http://steve.pugh.net/>

effendi@epitome.com.sg 03-15-2006 02:41 PM

Re: Fieldset CSS Centering
 
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 03-15-2006 02:52 PM

Re: Fieldset CSS Centering
 
effendi@epitome.com.sg wrote in
<1142433686.353819.70950@j52g2000cwj.googlegroups. com>

> 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
> }


Missing semi-colon?

--
PeterMcC
If you feel that any of the above is incorrect,
inappropriate or offensive in any way,
please ignore it and accept my apologies.

Steve Pugh 03-15-2006 05:59 PM

Re: Fieldset CSS Centering
 
"PeterMcC" <peter@mccourt.org.uk> wrote:
>effendi@epitome.com.sg wrote in
><1142433686.353819.70950@j52g2000cwj.googlegroups .com>


>> 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?


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
--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve@pugh.net> <http://steve.pugh.net/>


All times are GMT. The time now is 04:56 PM.

Powered by vBulletin®. Copyright ©2000 - 2014, vBulletin Solutions, Inc.
SEO by vBSEO ©2010, Crawlability, Inc.