Form Not Showing Correctly In Browsers...

I am confused

My form or what I would it to look like is correct in dreamweaver, but when I uploaded in and use IE it doesnt show right...

What I am trying to do is add some spacing between the text box and start button.. I have added some padding to that section which look likes it works in dreamweaver..

css code


.rightbox #keyword {
float:left;
width:122px;
padding: 0px 10px 0px 0px;


}


Source code

<form id="form2" name="form2" method="post" action="">
<label>
<input type="text" name="keyword" id="keyword" />
</label>
</form>
<p><img src="images/startbutton.jpg" width="51" height="21" /></p>


website http://www.supreme-host.com/web/categories.php

Try using margin instead of padding, but keep the values the same.

Uhm… well, your “button” is outside the form (and in a paragraph for some inexplicable reason) so this ain’t gonna work anyway. Also you can’t style form controls very much, especially to work equally well in all browsers.

Other issues:

The name attribute is not allowed/necessary on any element other than form controls (input, select, textarea).
Form controls must be inside some block element in the form, they can’t be direct children of the form.
Use labels with text with form controls for better accessibility and user friendliness.


Try this:


<form id="search" method="post" action="">
<fieldset>
<legend>Product Search</legend>
<div>
<label for="category">Search by category</label>
<select name="category" id="category">
<option>category 1</option>
<option>category 2</option>
</select>
</div>
<div>
<label for="keyword">Search by keyword</label>
<input type="text" name="keyword" id="keyword" />
</div>
</fieldset>
<div class="submit"><input type="image" src="images/startbutton.jpg" /></div>
</form>


#search fieldset {
margin: 0;
padding: 0;
border: 0;
}
#search legend {display: none;}
#search div {margin: 10px 0;}
#search #keyword {
float: left;
margin-right: 10px;
}

.rightbox #keyword {
float:left;
width:122px;
margin: 0px 10px 0px 0px;


}


padding is inside the box. margin is outside the box.

Other problems. (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.supreme-host.com%2Fweb%2Fcategories.php)


/edit ... Holy Cow :eek: A 3-way tie!