Text Input In Form Doesn't Line Up

HTML & CSS
1

Below is the page I am working on and I want the input text field to align perfectly with the “GO” button. Currently when I view it in Safari the form field is beside the Go button but appears to be pushed down and has extra space above it. Can someone take a look and tell me why this is happening?

LINK-
http://www.securehostserver.info/fbc/

Thanks,
Todd

2
Off Topic:

Tables? No labels, titles? Tisk tisk…

Try removing the bottom padding on email and use this:

#form1 input {vertical-align:middle;}
3

I was adding the table to try and line things up better. Obviously didn’t work. How would I style the simple form WITHOUT tables? Care to show me?

…adding the css now…

4
Off Topic:

Oops, you did have labels. Sorry. :blush:

You could do it as simply as this:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Form</title>
	
<style type="text/css" media="all">
body {background: #f7f7f7;}
label {position:absolute; left: -9999px;}
form input {vertical-align:middle;}
</style>
	
</head>

<body>
<form id="form1" name="form1" method="post" action="">
<label for="email"></label><input name="email" type="text" id="email" tabindex="1" value="email address" size="26" />
<label for="go">Submit</label><input type="image" src="i/btn_go.gif" name="go" id="go" value="Go" alt="Go" tabindex="1" />
</form>

</body>
</html>
5

I notice you’ve made some changes. don’t forget to remove the margin in red:

input#email {margin: 0 2px [COLOR="Red"]8px[/COLOR] 0; padding: 0; height: 24px;}
6

Wow! Thanks! It lines up nicely AND it is semantic. Thank you!

Could you provide a fix for the About page linked below? I removed some of the content so that the height of the page is shorter and it created an entirely new problem with the background image not filling the page. I just added height: 100% to the #wrapper but it did not fix the issue. Can you take a look at this link below?

LINK-
http://www.securehostserver.info/fbc/about/

7

Content doesn’t really have anything to do with that bg image. In a case like that, it’s best to choose a background color for the page that complements the bg image, and fade out the bg image at the bottom so that it merges into that bg color.

EDIT: O, I see you have the bg image on the wrapper. Move that background image to the body element instead.