Form Input Fields Off Center (Vertically)

[djcubez]

Here's a screenshot:

[img]http://djcubez.com/pictures/error/wtf.jpg[/img]

Here's the code:

[code]<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td height="30" width="650"><a href="#"><img src="images/bar_mid_link.jpg" /></a></td>
<form><td valign="top" height="30" width="300"><img src="images/bar_mid_username.jpg" /><input class="bar_mid_field" type="text" name="username" /><img src="images/bar_mid_password.jpg" /><input class="bar_mid_field" type="password" name="password" /></td></form>
</tr>
</table>[/code]

And here's a snippet from the style.css:

[code].bar_mid {
background-image: url("images/bar_mid.jpg");
background-repeat: repeat-x;
}
.bar_mid_field {
height: 15px;
width: 75px;
}[/code]

[AndyB]

There's something wrong with your code. Might be a browser issue, might be a CSS issue, might be .... who knows what. At least post a working URL where we can see the problem in action, or post enough code to investigate.

[djcubez]

Yea I'm sorry about that, check my post in a few minutes it will be edited with new information.

I tried using a "margin-bottom:" but different browsers read it differently so when it was on in another browser it was off in the other.

[AndyB]

I don't think having a form start and end tag as orphans stuffed in the middle of a set of table elements is helping.  Far better to have the form start and end outside the table, or start and end within the same td element.  Do you have any CSS that controls the margins/padding around a form? And what it is meant to look like?

[djcubez]

No, no margins or padding. Also, even if I move the form tags around it stays the same no matter if they're or not.

http://www.djcubez.com/secret/ogrc/ Here's the link.

[fenway]

It's a line-height issue... images have a different base than block elements.

[djcubez]

I understand but I don't. What should I change the height of?

[fenway]

Images have different baselines than text... you'll have to determine which combination of vertical alignment solves the problem.