...

View Full Version : Styling a Form



goodespeler
06-26-2007, 03:16 PM
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?

whizard
06-26-2007, 03:58 PM
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
06-26-2007, 04:14 PM
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
06-26-2007, 04:30 PM
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
06-26-2007, 04:30 PM
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;
}

goodespeler
06-26-2007, 04:35 PM
No, the submit.gif image is 35 pixels high and 40 wide.

whizard
06-26-2007, 04:41 PM
Check out my edit
Dan

goodespeler
06-26-2007, 04:44 PM
Yea, that was based off one of the methods I tried. I'm still seeing alignment issues in both FF and IE.

goodespeler
06-26-2007, 04:49 PM
Gettin' close. This is where I was last night. Not sure where to take it from here.

whizard
06-26-2007, 05:02 PM
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
06-26-2007, 05:06 PM
Worked great in FireFox, but made IE much worse...

goodespeler
06-27-2007, 12:15 AM
How does it render now in each browser?

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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum