Styling a Form

I'm trying to turn this into xhtml/css:
http://siezingtheday.powweb.com/searchbox.gif

Here are a few things to note...

The black background is an image with a slight gradiant. The magnifying glass should be the submit button.

Styling the actual input field seems to be pretty easy. Getting the search button/image to look right is where it get's hard.

Any advice?

just do

<input type="image" name="submit" src="path_to_magnifying_glass_image" />

to use the image as a submit button, and place it next to the text field.

HTH
Dan

Here's what I've got so far in terms of code:
http://joshuamcginnis.com/search.html

For the life of me, I can't get the button to line up.

Here, take a look at:
http://joshuamcginnis.com/search.html

The submit and input fields are right next to each other, but for some reason, the submit is always a few pixel's higher than the input field. It's much more noticeable in FireFox.

Your image is 40px high... so shouldn't your text field be the same height?

Dan


This CSS works for me in FF2:

#keyword{
color: #fff;
vertical-align:bottom;
margin-bottom:5px;
margin-top: 40px;
width: 290px;
height: 27px;
padding: 3px 3px 3px 5px;
background: #fff url(labelbg.gif) repeat-x top left;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
}


#submit{
background: url(submit.gif) no-repeat left top;
height: 40px;
width: 40px;
margin-left: -10px;
vertical-align:bottom;
border: none;
text-indent: -999%;
line-height: 2px;
}

No, the submit.gif image is 35 pixels high and 40 wide.

Check out my edit
Dan

Yea, that was based off one of the methods I tried. I'm still seeing alignment issues in both FF and IE.

Gettin' close. This is where I was last night. Not sure where to take it from here.

at http://joshuamcginnis.com/search.html, I changed

#submit
{
vertical-align:bottom;
}

to:
vertical-align:baseline;

and it lined up.

I dont have a developer extension on IE, so I couldnt test it there

Dan

Worked great in FireFox, but made IE much worse...

How does it render now in each browser?

Use this url: http://joshuamcginnis.com/