Alignment of Form Text Field

**DaveTodd** · 04-11-2007, 11:15 AM

I'm trying to get a Search field onto the new website. It aligns fine in FireFox, but IE seems to push it out of line for some reason. It's the SIMPLEST code, yet it still renders differently...any ideas?

The page is up at http://www.safariquip.co.uk/search.html

**JeremyMiller** · 04-11-2007, 12:05 PM

It's because you're using a table for layout and a form has hidden space around it. This should correct the perceived problem:

Replace

HTML Code:

<td>Search: </td>

with

HTML Code:

<td valign="top">Search: </td>

You really ought to look at doing layouts without tables, however.

**willcode4beer** · 04-12-2007, 12:05 PM

First up, I would say clean up the code. But, like Jeremy said, you probably want to ditch the tables too.
Also, using a label to associate the text "search" with the form field will help users with screen readers.
By not using tables, playing with the layout becomes much easier.

Also, cleaning up errors ensures you have a good starting point:

Code:

line 14 column 7 - Warning: <input> proprietary attribute "width"
line 14 column 7 - Warning: <input> proprietary attribute "height"
line 14 column 7 - Warning: <input> proprietary attribute "border"

How about this:

HTML Code:

<!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>
<title>Untitled Document</title>
<style type="text/css">
form#search input,label {
    vertical-align: middle;
}
#terms2 {
    width: 10em;
}
input#image{
    height: 15px;
    width: 15px;
    boder: none;
}
</style>
</head>

<body>
<div id="searchbox">
    <form action="http://www.safariquip.co.uk/cgi-bin/search/ksearch.cgi" method="get"
        name="search" id="search">
        <label for="terms2">
            Search:
        </label>
        <input name="terms2" id="terms2" type="text" class="texta" size="15" />
        <input name="image"  id="image"  type="image"
            src="images/shopping/go.gif" alt="Search" />
    </form>
</div>
</body>
</html>