Styling a Form

[goodespeler]

I'm trying to turn this into xhtml/css:


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?

[whizard]

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

[goodespeler]

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.

[goodespeler]

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.

[whizard]

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

Dan

Edit:
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;
}

[goodespeler]

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

[whizard]

Check out my edit
Dan

[goodespeler]

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

[goodespeler]

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

[whizard]

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

[goodespeler]

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

[goodespeler]

How does it render now in each browser?

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