Jump to content

Archived

This topic is now archived and is closed to further replies.

djcubez

Form Input Fields Off Center (Vertically)

Recommended Posts

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]

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
It's a line-height issue... images have a different base than block elements.

Share this post


Link to post
Share on other sites
Images have different baselines than text... you'll have to determine which combination of vertical alignment solves the problem.

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.