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

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>

temp02 · Jun 28, 2012

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 · Jul 2, 2012

Thanks! Worked perfectly!

Processor	Intel Core 2 Quad Q6600 @ 2.8GHz
Motherboard	Gigabyte X48T-DQ6
Cooling	Zalman 9500 LED CPU Cooler
Memory	2x 2GB Corsair DDR3 XMS3 DHX - 1600MH/PC3-12800
Video Card(s)	Gigabyte HD4870 1GB
Storage	2x Seagate 320GB Barracuda (RAID 0) 3x 1TB Samsung F3, 140GB WD Maxtor (10,000rpm)
Display(s)	2x 20" LG Flatron L204WS
Power Supply	Powercool 850W
Software	Windows 7 Ultimate x64

Processor	Intel Core 2 Quad Q6600 @ 2.8GHz
Motherboard	Gigabyte X48T-DQ6
Cooling	Zalman 9500 LED CPU Cooler
Memory	2x 2GB Corsair DDR3 XMS3 DHX - 1600MH/PC3-12800
Video Card(s)	Gigabyte HD4870 1GB
Storage	2x Seagate 320GB Barracuda (RAID 0) 3x 1TB Samsung F3, 140GB WD Maxtor (10,000rpm)
Display(s)	2x 20" LG Flatron L204WS
Power Supply	Powercool 850W
Software	Windows 7 Ultimate x64

Vertically align text in search button...

Akumos

temp02

New Member

Akumos