Can't center survey buttons

Discussion in 'CSS' started by jacinta, Aug 13, 2009.

0
  1. #1
    I'm using proprietary survey software and css to create an online survey.

    I need to center the survey's buttons on the page but can't work out what I'm doing wrong and time is against me. I've tried a few different things but nothing has worked.

    This is the original css file (sorry its so long)

    HTML {
    }
    BODY {
    background-image: url(images/defaultbg.jpg);
    font-family: arial;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 25px;
    padding: 20px;
    }
    TABLE {
    margin: 0px;
    padding: 0px;
    font-family: arial;
    font-size: 12px;
    }
    TD {
    padding: 0px;
    margin: 0px;
    /* text-align: center; */
    }

    /* Survey page (all survey content is contained in this table)
    */

    TABLE.page {
    border: 0px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    }
    TABLE.sections {
    text-align: center;
    margin: 0px;
    width: 100%;
    border: 0px;
    }
    TD.sections {
    border: 0px;
    text-align: left;
    padding-left:2px;
    padding-right:2px;
    padding-top:2px;
    padding-bottom:2px;
    }
    TD.topLeftCorner {
    width: 10px;
    height: 35px;
    background-image: url(images/topleft.gif);
    }
    TD.topRightCorner {
    width: 10px;
    height: 35px;
    background-image: url(images/topright.gif);
    }
    TD.leftSide {
    width: 10px;
    background-image: url(images/left.gif);
    }
    TD.rightSide {
    width: 10px;
    background-image: url(images/right.gif);
    }
    TD.bottomLeftCorner {
    width: 10px;
    height: 30px;
    background-image: url(images/bottomleft.gif);
    }
    TD.bottomRightCorner {
    width: 10px;
    height: 30px;
    background-image: url(images/bottomright.gif);
    }

    /* survey header */
    TABLE.header {
    width: 100%;
    }
    TD.header {
    text-align: center;
    }
    /* Login screen */
    TD.login {
    padding-left: 10px;
    }
    /* Survey title */
    TD.title {
    background-image: url(images/top.gif);
    color: #8d8d8d;
    font-size: 14px;
    font-weight: bold;
    text-align: left;
    vertical-align: middle;
    padding-top: 4px;
    padding-bottom: 1px;
    padding-left: 3px;
    }
    /* Language selection */
    TD.langSelector {
    font-size: 10px;
    padding: 2px;
    text-align: right;
    }
    SELECT.langSelector {
    font-size: 9px;
    font-family: verdana,arial;
    }
    /* Survey introduction */
    TD.introduction {
    font-size: 12px;
    color:#5d5d5d;
    padding: 5px;
    }
    /* Section title */
    TD.sectionText {
    font-size: 12px;
    font-weight: normal;
    padding: 2px;
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: left;
    }
    /* Section title */
    TD.sectionTitle {
    background-color:#DDDDDD;
    color: #8d8d8d;
    font-size:12px;
    font-weight: bold;
    padding: 0px;
    height:17px;
    }
    SPAN.sectionTitle {
    width:100%;
    }
    /* Question table */
    TABLE.questionTbl {
    color:#5d5d5d;
    margin: 0px;
    padding:0px;
    }
    TD.question {
    padding: 0px;
    }
    TD.questionNo {
    background-color:#EEEEEE;
    font-family: arial;
    font-size: 12px;
    padding: 2px;
    padding-left: 3px;
    }
    TD.questionText {
    background-color:#bfcfcc;
    font-family: arial;
    vertical-align:middle;
    padding: 2px;
    color:#5d5d5d;
    font-size: 12px;
    font-weight: normal;
    }
    TD.questionInput {
    padding-bottom: 10px;
    padding-top: 5px;
    }
    TD.questionFreeText {
    padding-bottom: 5px;
    }
    TD.textBefore {
    padding: 5px;
    }
    TD.textAfter {
    }
    .afterLastQuestion,.spaceAfterFirstSectionText,.beforeFirstQuestion,.spaceBeforeSectionText,.spaceAfterSectionText {
    margin: 0px;
    border: 0px;
    height: 0px;
    }
    .spaceBeforeFirstSectionText {
    padding: 8px;
    }
    .betweenQuestions {
    padding: 6px;
    height: 12px;
    }
    SELECT,TEXTAREA {
    border: #BBBBBB 1px solid;
    color:#5d5d5d;
    padding: 1px;
    }

    /* Essay */
    INPUT.essayText {
    border: #BBBBBB 1px solid;
    color:#5d5d5d;
    padding: 1px;
    }
    /* Essay */
    INPUT.questionFreeText {
    border: #BBBBBB 1px solid;
    color:#5d5d5d;
    padding: 1px;
    }
    SELECT.essayDropdown {
    }
    INPUT.essayCheckbox {
    }
    /* Rating question */
    TABLE.rating {
    font-family: arial;
    color:#5d5d5d;
    font-size: 12px;
    margin-left: 5px;
    }
    TD.ratingMinMax {
    font-family: arial;
    color:#5d5d5d;
    font-size: 12px;
    margin-left: 5px;
    }
    TD.ratingNumbers {
    font-family: arial;
    color:#5d5d5d;
    font-size: 12px;
    margin-left: 5px;
    }
    TD.ratingNA {
    font-family: arial;
    color:#5d5d5d;
    font-size: 12px;
    margin-left: 5px;
    }
    TD.ratingRadio {
    font-family: arial;
    color:#5d5d5d;
    font-size: 12px;
    margin-left: 5px;
    }
    TD.ratingEmpty {
    font-family: arial;
    color:#5d5d5d;
    font-size: 12px;
    margin-left: 5px;
    }
    INPUT.ratingRadio {
    font-family: arial;
    color:#5d5d5d;
    font-size: 12px;
    margin-left: 5px;
    }
    /* Numeric question */
    TABLE.numeric {
    margin-left: 5px;
    }
    TD.numericPrefix {
    font-family: arial;
    color:#5d5d5d;
    font-size: 12px;
    margin-left: 5px;
    }
    TD.numericPostfix {
    font-family: arial;
    color:#5d5d5d;
    font-size: 12px;
    margin-left: 5px;
    }
    TD.numericInput {
    }
    INPUT.numericInput {
    border: #BBBBBB 1px solid;
    color:#5d5d5d;
    padding: 1px;
    }
    /* Dropdown question */
    TABLE.dropdown {
    margin-left: 5px;
    }
    TD.dropdown {
    }
    SELECT.dropdown {
    }
    /* question */
    TABLE.Choice {
    font-family: arial;
    color: #5d5d5d;
    font-size: 12px;
    margin-left: 5px;
    }
    TD.Button {
    border:none;
    font-family: arial;
    font-size: 12px;
    margin-left: 5px;
    align: center;
    }
    input.Button {
    /*border: none;
    padding-left: 5px;
    margin-left: 5px;
    color:#5d5d5d;
    font-size: 12px;
    padding:0px;*/
    text-align: center;
    }

    TD.Text {
    font-family: arial;
    color:#5d5d5d;
    font-size: 12px;
    margin-left: 5px;
    }
    TD.Image {
    font-family: arial;
    color:#5d5d5d;
    font-size: 12px;
    margin-left: 5px;
    }
    INPUT.multipleOther {
    font-family: arial;
    color:#5d5d5d;
    font-size: 12px;
    margin-left: 5px;
    border: #BBBBBB 1px solid;
    }
    INPUT.multipleButton {
    font-family: arial;
    color:#5d5d5d;
    font-size: 12px;
    margin-left: 2px;
    margin-top: 1px;
    }
    td.multipleText {
    font-family: arial;
    color:#5d5d5d;
    font-size: 12px;
    vertical-align: text-top;
    }
    td.multipleButton {
    vertical-align: top;
    }

    /* Matrix question */
    TABLE.matrix {
    border-collapse:collapse;
    margin: 10px;
    margin-left: 5px;
    margin-bottom: 10px;
    /* border-collapse:separate; */
    }
    TD.matrixHeading {
    border: 0px;
    font-weight: bold;
    }
    TD.matrixCell {
    border: #DDDDDD 1px solid;
    color:#5d5d5d;
    padding: 2px;
    font-size: 12px;
    }
    TD.matrixEmpty {
    border: none;
    }
    INPUT.matrixCheckbox {
    }
    INPUT.matrixRadio {
    }
    INPUT.matrixText {
    text-align: left;
    border: #BBBBBB 1px solid;
    color:#5d5d5d;
    padding: 1px;
    }
    SELECT.matrixDropdown {
    text-align: left;
    }
    /* Upload files screen */
    Table.uploadPage {
    padding:0px;
    margin: 0px;
    width: 100%;
    background-image: url(images/bg.gif);
    }
    TD.uploadTitle {
    padding: 5px;
    color: #5d5d5d;
    font-weight: bold;
    text-align: center;
    }
    TD.uploadHelp {
    padding:5px;
    }
    TD.upload {
    padding-left:5px;
    padding-right:5px;
    padding-bottom:0px;
    }
    SELECT.uploadSelectImage {
    }
    TD.uploadPreview {
    }
    TD.uploadButtons {
    padding:5px;
    padding-bottom:0px;
    text-align: right;
    }
    Input.uploadField {
    width: 100%;
    border: #BBBBBB 1px solid;
    color:#5d5d5d;
    padding: 1px;
    }
    /* ProgressBar */
    TD.progressBar {
    /*
    controls position of the progress bar, f.exp:
    TEXT-ALIGN: center;
    */
    }
    TABLE.progressBar {
    /*
    controls width of the progress bar, f.exp:
    width: 50%;
    */
    }
    TD.progressBarFill {
    /*
    controls the filled part of the progress bar f.exp:
    BACKGROUND-COLOR: #000000;
    */
    BACKGROUND-COLOR: #919191;
    }
    TD.progressBarBlank {
    /*
    controls the blank part of the progress bar f.exp:
    BACKGROUND-COLOR: #FFFFFF;
    */
    }
    TD.progressBarText {
    /*
    controls the text(percentage) of the progress bar
    */
    }

    TD.buttons {
    /*
    controls the table cell where survey buttons are located
    * /
    background-image: url(images/bottom.gif);
    padding: 20px;
    padding-bottom: 30px;
    padding-top: 30px;
    height: 30px;
    align: left;
    vertical-align: top;
    }

    TD.thankYouNote {
    /*
    controls the table cell where survey thank-you note is displayed
    */
    padding: 5px;
    padding-top: 20px;
    padding-bottom: 20px;
    }
    /* survey footer */
    Table.footer {
    width: 100%;
    margin: 10px;
    }
    TD.footer {
    text-align: center;
    }
    /* Save and come back */
    TD.saveAndComeBack {
    padding: 10px;
    }
    /* Dialog */
    TD.dialog {
    padding: 5px;
    padding-top: 20px;
    padding-bottom: 20px;
    }
     
    jacinta, Aug 13, 2009 IP
  2. AssistantX

    AssistantX Peon

    Messages:
    173
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I am not completely sure how your page functions without the HTML code, however setting whatever element you have surrounding the button to CSS "text-align: center;" should solve the problem. If that doesn't work, set the button directly to "margin-left: auto; margin-right: auto;".
     
    AssistantX, Aug 14, 2009 IP