Align image and text input

Forum Moderators: not2easy

Message Too Old, No Replies

Align image and text input

line-height or vertical-align

Hindsight

8:02 pm on Dec 29, 2010 (gmt 0)

When I display this image after the textbox, the image is shifted up and whitepsace is added above the textbox and below the image. The font is 10px and the image is 18px in height, but if you look at the image, it isn't taking up all of the space, as such, I would expect there to be NO space above or below both the image and the textbox.

To see how I would expect it to look, change the input font-size to 14px.

Why is the image shifting up like this and causing the line height to be larger than it needs to be? Is there a good/common way of addressing this behavior?


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>

<style type="text/css"">
p {
 border: 1px solid black;
}

input {
 font-family: verdana;
 font-size: 10px;
}
</style>

</head>
<body>

<p>
<input type="text" name="d1" value="" size="40" maxlength="35"><img src="content/img/btn_search.gif" width="47" height="18" alt="" border="1">
</p>

</body>
</html>

birdbrain

10:19 pm on Dec 29, 2010 (gmt 0)

Hi there Hindsight,

try it like this...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
  "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 
<head> 
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<meta name="language" content="english">  
<meta http-equiv="Content-Style-Type" content="text/css"> 
 
<title>Untitled</title> 
 
<style type="text/css"> 
p { 
  border:1px solid #000; 
  overflow:hidden; 
 } 
input { 
  float:left; 
  margin-right:4px; 
  font-family: verdana,sans-serif; 
  font-size:10px; 
 } 
img { 
  float:left; 
  width:47px; 
  height:18px; 
 } 
</style> 
 
</head> 
<body> 
 
<p> 
 <input type="text" name="d1" value="" size="40" maxlength="35"> 
 <img src="content/img/btn_search.gif" alt="search"> 
</p> 
 
</body> 
</html>

birdbrain

Hindsight

11:12 pm on Dec 29, 2010 (gmt 0)

Thank you very much birdbrain..... it looks perfect. However, I don't understand why the float fixed it. Can you explain why this works?

birdbrain

2:56 pm on Jan 1, 2011 (gmt 0)

Hi there Hindsight,

your code will probably work OK with...


input {
 vertical-align:top; 
 font-family: verdana; 
 font-size: 10px; 
 }

...but as I tend to use the float attribute for horizontal alignments,
I overlooked the simple solution to your problem. :)

birdbrain

birdbrain

2:57 pm on Jan 1, 2011 (gmt 0)

Sorry I just had another of my "Senior Moments" and forgot that I had already submitted my reply.:(

birdbrain