How to center text field?

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • dougancil
    Contributor
    • Apr 2010
    • 347
    #1

    How to center text field?

    I have a text field that I'm using and I'm trying to align it to match it with a submit button. I had to convert a psd file to html and sliced the image that I'm replacing about as big as I can in the space where the text field will go. I've tried aligning it with CSS and in IE and in Opera (and other browsers) one version will look fine, but the other browsers will show the alignment off. Does any one have any idea how to align the text area in the center in all browsers?

    here is the code I have for the text field:


    Code:
    <td rowspan="5" align="right" valign="bottom" bgcolor="#cecece"><form name="form1" method="post" action="">
        <label for="textfield"></label>
        <div align="right">
          <input type="text" name="textfield" id="textfield">
          </div>
        </form></td>
    Thank you

    Doug
    Tags: None
    • Death Slaught
      Top Contributor
      • Aug 2007
      • 1137
      #2
      1. You should never use tables for layout.
      2. You're using deprecated attributes
      3. I'm assuming that the one browser displaying it "correctly" is IE. There's a 101% chance that it's not.


      Use the text-align property. Input is an inline element, so if you give it's containing division (a block element) the text-align property with a value of center - the input will center.

      However, since you have placed it within a table, it will not work.


      Regards, Death

        Comment

        • dougancil
          Contributor
          • Apr 2010
          • 347
          #3
          Death,

          Unfortunately because I have to convert from a psd to html, and how photoshop converts things, it winds up being a table. There's really no way around that because I can't hand code the psd files without slicing them into "usable" sections. The deprecated attributes are coming from Dreamweaver, none of that code that you see was hand written. You are correct when you say that IE is the one browser that's viewing the file correctly. Opera, Safari and Firefox all show the text area at the bottom of the table. As you can see I have a few limitations on how I can achieve what I need to achieve.

            Comment

            • Death Slaught
              Top Contributor
              • Aug 2007
              • 1137
              #4
              Please post the rest of the table. Without it it's difficult to provide a solution.


              Thanks, Death

                Comment

                • dougancil
                  Contributor
                  • Apr 2010
                  • 347
                  #5
                  here's the rest of the table:

                  Code:
                  <html>
<head>
<title>MSB secondary page template</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="site_layout.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (MSB secondary page template.psd) -->
<div id="container">
  <div id="site_layout">
    <div class="css" id="site_layout.css">
      <table id="Table_01" width="1260" height="811" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td colspan="26">
            <img src="images/MSB-secondary-page-template_01.gif" width="1259" height="24" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="1" height="24" alt=""></td>
          </tr>
        <tr>
          <td colspan="20" rowspan="2">
            <img src="images/MSB-secondary-page-template_02.gif" width="1036" height="48" alt=""></td>
          <td colspan="2">
            <img src="images/MSB-secondary-page-template_03.jpg" width="60" height="22" alt=""></td>
          <td colspan="4" rowspan="5">
            <img src="images/MSB-secondary-page-template_04.gif" width="163" height="65" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="1" height="22" alt=""></td>
          </tr>
        <tr>
          <td colspan="2" rowspan="4">
            <img src="images/MSB-secondary-page-template_05.gif" width="60" height="43" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="1" height="26" alt=""></td>
          </tr>
        <tr>
          <td colspan="19">
            <img src="images/MSB-secondary-page-template_06.gif" width="873" height="8" alt=""></td>
          <td rowspan="5">
            <img src="images/MSB-secondary-page-template_07.jpg" width="163" height="58" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="1" height="8" alt=""></td>
          </tr>
        <tr>
          <td colspan="3" rowspan="5">
            <img src="images/MSB-secondary-page-template_08.gif" width="166" height="51" alt=""></td>
          <td rowspan="5">
            <img src="images/MSB-secondary-page-template_09.jpg" width="120" height="51" alt=""></td>
          <td rowspan="5">
            <img src="images/MSB-secondary-page-template_10.gif" width="16" height="51" alt=""></td>
          <td rowspan="5">
            <img src="images/MSB-secondary-page-template_11.jpg" width="120" height="51" alt=""></td>
          <td colspan="13">
            <img src="images/MSB-secondary-page-template_12.gif" width="451" height="1" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="1" height="1" alt=""></td>
          </tr>
        <tr>
          <td rowspan="4">
            <img src="images/MSB-secondary-page-template_13.gif" width="19" height="50" alt=""></td>
          <td colspan="2" rowspan="4">
            <img src="images/MSB-secondary-page-template_14.jpg" width="119" height="50" alt=""></td>
          <td colspan="2" rowspan="4">
            <img src="images/MSB-secondary-page-template_15.gif" width="22" height="50" alt=""></td>
          <td colspan="4" rowspan="4">
            <img src="images/MSB-secondary-page-template_16.jpg" width="118" height="50" alt=""></td>
          <td rowspan="4">
            <img src="images/MSB-secondary-page-template_17.gif" width="19" height="50" alt=""></td>
          <td colspan="2" rowspan="4">
            <img src="images/MSB-secondary-page-template_18.jpg" width="118" height="50" alt=""></td>
          <td rowspan="4">
            <img src="images/MSB-secondary-page-template_19.gif" width="36" height="50" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="1" height="8" alt=""></td>
          </tr>
        <tr>
          <td rowspan="3">
            <img src="images/MSB-secondary-page-template_20.gif" width="8" height="42" alt=""></td>
          <td colspan="2">
            <img src="images/MSB-secondary-page-template_21.jpg" width="58" height="24" alt=""></td>
          <td colspan="3" rowspan="3">
            <img src="images/MSB-secondary-page-template_22.gif" width="157" height="42" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="1" height="24" alt=""></td>
          </tr>
        <tr>
          <td colspan="2" rowspan="2">
            <img src="images/MSB-secondary-page-template_23.gif" width="58" height="18" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="1" height="17" alt=""></td>
          </tr>
        <tr>
          <td>
            <img src="images/MSB-secondary-page-template_24.gif" width="163" height="1" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="1" height="1" alt=""></td>
          </tr>
        <tr>
          <td rowspan="4">
            <img src="images/MSB-secondary-page-template_25.gif" width="148" height="665" alt=""></td>
          <td colspan="15">
            <img src="images/MSB-secondary-page-template_26.jpg" width="571" height="221" alt=""></td>
          <td colspan="8">
            <img src="images/MSB-secondary-page-template_27.jpg" width="405" height="221" alt=""></td>
          <td colspan="2" rowspan="4">
            <img src="images/MSB-secondary-page-template_28.gif" width="135" height="665" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="1" height="221" alt=""></td>
          </tr>
        <tr>
          <td rowspan="3">
            <img src="images/MSB-secondary-page-template_29.gif" width="1" height="444" alt=""></td>
          <td colspan="22">
            <img src="images/MSB-secondary-page-template_30.gif" width="975" height="402" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="1" height="402" alt=""></td>
          </tr>
        <tr>
          <td colspan="6" rowspan="2">
            <img src="images/MSB-secondary-page-template_31.gif" width="388" height="42" alt=""></td>
          <td colspan="2">
            <img src="images/MSB-secondary-page-template_32.jpg" width="44" height="21" alt=""></td>
          <td colspan="2" rowspan="2">
            <img src="images/MSB-secondary-page-template_33.gif" width="12" height="42" alt=""></td>
          <td>
            <img src="images/MSB-secondary-page-template_34.jpg" width="77" height="21" alt=""></td>
          <td rowspan="2">
            <img src="images/MSB-secondary-page-template_35.gif" width="10" height="42" alt=""></td>
          <td colspan="3">
            <img src="images/MSB-secondary-page-template_36.jpg" width="53" height="21" alt=""></td>
          <td colspan="7" rowspan="2">
            <img src="images/MSB-secondary-page-template_37.gif" width="391" height="42" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="1" height="21" alt=""></td>
          </tr>
        <tr>
          <td colspan="2">
            <img src="images/MSB-secondary-page-template_38.gif" width="44" height="21" alt=""></td>
          <td>
            <img src="images/MSB-secondary-page-template_39.gif" width="77" height="21" alt=""></td>
          <td colspan="3">
            <img src="images/MSB-secondary-page-template_40.gif" width="53" height="21" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="1" height="21" alt=""></td>
          </tr>
        <tr>
          <td colspan="25">
            <img src="images/MSB-secondary-page-template_41.jpg" width="1250" height="14" alt=""></td>
          <td>
            <img src="images/MSB-secondary-page-template_42.gif" width="9" height="14" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="1" height="14" alt=""></td>
          </tr>
        <tr>
          <td>
            <img src="images/spacer.gif" width="148" height="1" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="1" height="1" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="17" height="1" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="120" height="1" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="16" height="1" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="120" height="1" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="19" height="1" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="96" height="1" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="23" height="1" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="21" height="1" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="1" height="1" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="11" height="1" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="77" height="1" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="10" height="1" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="20" height="1" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="19" height="1" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="14" height="1" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="104" height="1" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="36" height="1" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="163" height="1" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="8" height="1" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="52" height="1" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="6" height="1" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="22" height="1" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="126" height="1" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="9" height="1" alt=""></td>
          <td></td>
          </tr>
      </table>
    </div>
  </div>
</div>
<!-- End Save for Web Slices -->
</body>
</html>

                    Comment

                    • Death Slaught
                      Top Contributor
                      • Aug 2007
                      • 1137
                      #6
                      Where are you wanting the input to be within the table?

                        Comment

                        • Vkas
                          New Member
                          • Feb 2009
                          • 78
                          #7
                          you can use text-align Property in TD and TR , table tag
                          try using this property in the tag which you want to center

                            Comment

                            • dougancil
                              Contributor
                              • Apr 2010
                              • 347
                              #8
                              the input replaces this image:

                              <td rowspan="5">
                              <img src="http://bytes.com/images/MSB-secondary-page-template_07.jpg " width="163" height="58" alt=""></td>


                              line 38 & 39.

                                Comment

                                • Death Slaught
                                  Top Contributor
                                  • Aug 2007
                                  • 1137
                                  #9
                                  Now I see what you mean. Everything completely disappears except the input field. I'm not really sure what's causing this and I don't have time to play with it right now.

                                  Regards, Death

                                    Comment

                                    Previous template Next
                                    Working...