Fieldset CSS Centering

Discussion in 'HTML' started by effendi@epitome.com.sg, Mar 14, 2006.

  1. Guest

    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
    , Mar 14, 2006
    #1
    1. Advertising

  2. Steve Pugh Guest

    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 <> <http://steve.pugh.net/>
    Steve Pugh, Mar 14, 2006
    #2
    1. Advertising

  3. Guest

    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?
    , Mar 15, 2006
    #3
  4. Toby Inkster Guest

    Toby Inkster, Mar 15, 2006
    #4
  5. Steve Pugh Guest

    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 <> <http://steve.pugh.net/>
    Steve Pugh, Mar 15, 2006
    #5
  6. Guest

    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
    }
    , Mar 15, 2006
    #6
  7. PeterMcC Guest

    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;
    >> 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.
    PeterMcC, Mar 15, 2006
    #7
  8. Steve Pugh Guest

    "PeterMcC" <> wrote:
    > wrote in
    ><>


    >> 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 <> <http://steve.pugh.net/>
    Steve Pugh, Mar 15, 2006
    #8
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. =?Utf-8?B?SSBhbSBTYW0=?=

    <fieldset> tag

    =?Utf-8?B?SSBhbSBTYW0=?=, May 24, 2005, in forum: ASP .Net
    Replies:
    0
    Views:
    510
    =?Utf-8?B?SSBhbSBTYW0=?=
    May 24, 2005
  2. =?Utf-8?B?a3N0cml5aG9u?=

    Getting Drillthrough result from pivottable fieldset

    =?Utf-8?B?a3N0cml5aG9u?=, Jul 23, 2005, in forum: ASP .Net
    Replies:
    4
    Views:
    1,278
    =?Utf-8?B?a3N0cml5aG9u?=
    Jul 25, 2005
  3. RobM
    Replies:
    19
    Views:
    9,478
    brucie
    Nov 16, 2004
  4. luke

    <fieldset> & CSS

    luke, Mar 12, 2005, in forum: HTML
    Replies:
    2
    Views:
    1,463
    Disco Octopus
    Mar 14, 2005
  5. Peter Smit

    Fieldset not showing

    Peter Smit, Jan 20, 2007, in forum: HTML
    Replies:
    9
    Views:
    4,466
    Peter Smit
    Jan 20, 2007
Loading...

Share This Page