Text input and submit button alignment
Have you ever had to make a search box and an image submit button only to discover that the two don’t align quite right? Or maybe they do match up, but in IE6 it’s off by 1 pixel? I don’t know if you’re as obsessive as I am about these things, but I’ll post a quick fix nonetheless.
I’ll be using my own search and submit button for this tutorial.
This is how my setup looks without any styling to fix the positions:
See how the image submit button is aligned a little higher than the search input text-box?
So here’s the fix for the CSS:
#search input.text
{
border:1px solid #000;
font-size:11px;
margin:0 0 0 2px;
width:150px;
height:13px;
}
#search input.image
{
vertical-align:bottom;
}
Here’s the HTML to go with it:
<html>
<body>
<div id="search">
<input class="text" type="text">
<input class="image" type="image" src="images/search.jpg">
</div>
</body>
</html>
So right now it should look like this:
That’s better right? One slight problem. Can you guess what it is? Yup, its IE once again.
Luckily there’s an easy fix.
Just modify the CSS like so:
#search input.text
{
border:1px solid #000;
font-size:11px;
margin:0 0 0 2px;
width:150px;
height:13px;
}
#search input.image
{
vertical-align:bottom;
}
*html #search input.image
{
position:relative;
top:-1px;
}
Explanation:
There’s that “*html” hack again. Remember that only IE6 and lower versions recognize this.
Now it should look fine in IE6 and most browsers.
There’s one slight problem with the “*html” hacks. They aren’t recognized in IE7. So what do you do?
One of the easier ways is to create a separate CSS file for IE7 alone.
Conditional:
<!--[if IE 7]> <link href="iestyle.css" rel="stylesheet" type="text/css" /> <![endif]-->
Explanation:
Include this directly after you link to your regular CSS file in the <head></head> tags. I used the name “iestyle.css,” but you can name the file whatever you want.
This is what it should look like in the “iestyle.css” file:
iestyle.css
#search input.image
{
position:relative;
top:-1px;
}
Explanation:
Basically put whatever “*html” hack you used in the regular CSS file in the “iestyle.css” file, only WITHOUT the “*html.” Otherwise, IE7 won’t recognize it.
Final product:
Now it should look right through all the browsers! Yay!
RSS feed for comments on this post
