Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

align inputs in ie6 and ie7



11:50 pm on Jun 1, 2011 (gmt 0)

5+ Year Member

Hi I'm having problems getting my search box and it's search button to line up properly in ie6 & 7. In FF opera and safari and ie8 they seem ok, in that the button and the search input are beside each other.

The problem can be seen [belfastswimmingteacher.com ]


9:40 am on Jun 3, 2011 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member

Hi barricades [webmasterworld.com] and welcome to WebmasterWorld :)

Can you explain what you mean by "line-up" - it could mean many different things!

When I looked at your code yesterday the part that seemed troublesome was:
<form ...>
<div class="input text">
<label for="...">Search for</label>
<input name=".." type="text" id="..." />
<div id="..." class=".."></div>
<div class="submit"><input type="submit" value="Search" /></div>
The highlighted div was being used to apply a border effect, but as divs are display:block, it was being drawn below the first input, and that was causing div.submit to be drawn on the next "line" so that it was below the first input - not "beside" as you described. However, that was an issue in all browsers/versions I tested, not just ie6&7, so perhaps that isn't the problem.

I just checked again and although the html hasn't changed, the second input is now floating right, and the styling removed from the div highlighted above. That means the inputs are on the left/right side of the page, even further away from each other, and the second input is still below the first.

So can you explain what you are wanting to achieve more clearly?

Featured Threads

Hot Threads This Week

Hot Threads This Month