1. Welcome to TechPowerUp Forums, Guest! Please check out our forum guidelines for info related to our community.

Vertically align text in search button...

Discussion in 'Programming & Webmastering' started by Akumos, Jun 28, 2012.

  1. Akumos

    Akumos

    Joined:
    Nov 30, 2008
    Messages:
    552 (0.25/day)
    Thanks Received:
    28
    Location:
    Birmingham, England...
    Hi All.. I'm trying to centre the text on my sear ch button but it's not working... tried everything!!

    Also, IE8 puts a line break before the date... so annoying!

    Thanks for looking!!

    http://www.josephleckie.site88.net

    PHP:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Joseph Leckie Academy - Walsall</title>
    <link href='http://fonts.googleapis.com/css?family=Lato:400,300' rel='stylesheet' type='text/css'>
    <style type="text/css">

    <!--
    #txtSearch {
        border: 2px solid #980434;
        border-radius: 15px;
        height: 26px;
        vertical-align: middle;
        width: 180px;
        font-family: Comic Sans MS;
        line-height: 26px;
    }

    #btnSearch {
        background: none repeat scroll 0 0#;
        color: #FFFFFF;
        height: 24px;
        width: 80px;
        border: 2px solid #980434;
        background-color: #994878;
        text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
        font-family: Lato;
        font-weight: bold;
        font-size: 10px;
        padding: 7px 0px 7px 0px;
    }
    #apDiv1 {
        position:absolute;
        left:50%;
        top:0px;
        width:1024px;
        height:800px;
        z-index:1;
        margin-left: -512px;
    }
    #apDiv2 {
        left:0px;
        top:0px;
        width:1024px;
        height:34px;
        z-index:2;
        line-height: 30px;
        background-color: #994878;
        text-align: left;
        color: white;
        vertical-align: middle;
    }
    body,td,th {
        font-family: 'Lato';
        font-size: 12px;
        font-weight: bold;
    }
    -->
    </style>
    </head>

    <body>
    <div id="apDiv1">
    <div id="apDiv2">
      <table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
        <tr>
          <th width="569" height="34" scope="col">&nbsp;&nbsp;&nbsp;<? echo (date("l j F , Y")); ?></th>
          <th width="75" height="34" scope="col">&nbsp;</th>
          <th width="380" height="34" scope="col"><form id="form1" name="form1" method="post" action="">
            
              <div align="right">
                <input name="txtSearch" type="text" id="txtSearch" value=" Search Website" />
                
                
                &nbsp; 
                <input type="submit" name="btnSearch" id="btnSearch" value="SEARCH" />
    &nbsp;&nbsp;              </div>
          </form>
          </th>
        </tr>
      </table>
    </div>
    </div>

    </body>
    </html>


     
  2. temp02 New Member

    Joined:
    Mar 18, 2009
    Messages:
    493 (0.23/day)
    Thanks Received:
    166
    Is this what you wanted?
    PHP:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Joseph Leckie Academy - Walsall</title>
        <link href='http://fonts.googleapis.com/css?family=Lato:400,300' rel='stylesheet' type='text/css' />
        <style type="text/css">
            #txtSearch
            {
                border: 2px solid #980434;
                border-radius: 15px;
                height: 26px;
                vertical-align: middle;
                width: 180px;
                font-family: "Comic Sans MS";
                line-height: 26px;
                text-align: center;
            }

            #btnSearch
            {
                background: none repeat scroll 0 0;
                color: #FFFFFF;
                height: 30px;
                width: 80px;
                border: 2px solid #980434;
                background-color: #994878;
                text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
                font-family: Lato;
                font-weight: bold;
                font-size: 10px;
                padding: 7px 0px 7px 0px;
                text-align: center;
                vertical-align: middle;
            }

            #apDiv1
            {
                position: absolute;
                left: 50%;
                top: 0px;
                width: 1024px;
                height: 800px;
                z-index: 1;
                margin-left: -512px;
            }

            #apDiv2
            {
                left: 0px;
                top: 0px;
                width: 1024px;
                height: 34px;
                z-index: 2;
                line-height: 30px;
                background-color: #994878;
                text-align: left;
                color: white;
                vertical-align: middle;
            }

            body, td, th
            {
                font-family: 'Lato';
                font-size: 12px;
                font-weight: bold;
            }
        </style>
    </head>
    <body>
        <div id="apDiv1">
            <div id="apDiv2">
                <table cellpadding="0" cellspacing="0" width="100%" align="left" border="0">
                    <tbody>
                        <tr>
                            <th scope="col" height="34" width="569">
                                &nbsp;&nbsp;&nbsp;
                                <? echo (date("l j F , Y")); ?>
                            </th>
                            <th scope="col" height="34" width="75">
                                &nbsp;
                            </th>
                            <th scope="col" height="34" width="380">
                                <form id="form1" name="form1" method="post" action="">
                                    <div align="right">
                                        <input name="txtSearch" id="txtSearch" value=" Search Website" type="text" />
                                        &nbsp;
                                        <input name="btnSearch" id="btnSearch" value="SEARCH" type="submit" />
                                        &nbsp;&nbsp;
                                    </div>
                                </form>
                            </th>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </body>
    </html>
    There where a couple of minor errors that could cause IE to parse the elements wrongly.
    other than that, it looks fine in FF, but I still slapped a couple of text-aligns.
    Also move all your CSS to an external file, than include it on the header, it's not only cleaner but also easier to maintain.
    Good luck.
     
    Akumos says thanks.
  3. Akumos

    Akumos

    Joined:
    Nov 30, 2008
    Messages:
    552 (0.25/day)
    Thanks Received:
    28
    Location:
    Birmingham, England...
    :) Thanks! Worked perfectly!
     

Currently Active Users Viewing This Thread: 1 (0 members and 1 guest)

Share This Page