Jump to content


Photo

Form Input Fields Off Center (Vertically)


  • Please log in to reply
7 replies to this topic

#1 djcubez

djcubez
  • Members
  • PipPipPip
  • Advanced Member
  • 43 posts
  • LocationMilwaukee, WI

Posted 14 October 2006 - 10:15 PM

Here's a screenshot:

Posted Image

Here's the 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>

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

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



#2 AndyB

AndyB
  • Staff Alumni
  • Advanced Member
  • 5,465 posts
  • LocationToronto

Posted 14 October 2006 - 10:36 PM

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.
Legend has it that reading the manual never killed anyone.
My site

#3 djcubez

djcubez
  • Members
  • PipPipPip
  • Advanced Member
  • 43 posts
  • LocationMilwaukee, WI

Posted 15 October 2006 - 01:09 AM

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.

#4 AndyB

AndyB
  • Staff Alumni
  • Advanced Member
  • 5,465 posts
  • LocationToronto

Posted 15 October 2006 - 01:46 AM

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?
Legend has it that reading the manual never killed anyone.
My site

#5 djcubez

djcubez
  • Members
  • PipPipPip
  • Advanced Member
  • 43 posts
  • LocationMilwaukee, WI

Posted 15 October 2006 - 02:12 AM

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.

#6 fenway

fenway
  • Staff Alumni
  • MySQL Si-Fu / PHP Resident Alien
  • 16,199 posts
  • LocationToronto, ON

Posted 15 October 2006 - 03:55 PM

It's a line-height issue... images have a different base than block elements.
Seriously... if people don't start reading this before posting, I'm going to consider not answering at all.

#7 djcubez

djcubez
  • Members
  • PipPipPip
  • Advanced Member
  • 43 posts
  • LocationMilwaukee, WI

Posted 15 October 2006 - 05:34 PM

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

#8 fenway

fenway
  • Staff Alumni
  • MySQL Si-Fu / PHP Resident Alien
  • 16,199 posts
  • LocationToronto, ON

Posted 15 October 2006 - 05:59 PM

Images have different baselines than text... you'll have to determine which combination of vertical alignment solves the problem.
Seriously... if people don't start reading this before posting, I'm going to consider not answering at all.




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users