# Vertically align text in search button...



## Akumos (Jun 28, 2012)

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


```
<!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>
```


----------



## temp02 (Jun 28, 2012)

Is this what you wanted?

```
<!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 (Jul 2, 2012)

Thanks! Worked perfectly!


----------

