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)

New User

5+ Year Member

joined:Apr 29, 2010
votes: 0

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 June 3, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Aug 9, 2008
posts: 961
votes: 0

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?

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members