Question

There is a defect in the following website where the search text box doesn’t align correctly with the button, all other browsers seen fine. Can’t figure out what is causing it can anyone help please?

http://www.martrainhaulage.com/

Answer 1

1/
Maybe add a width on floating header div.search?

header div.search {
  width: 211px; /* approx */
}

2/
Or does this test code do anything? (not for production!)

<!--[if IE 7]><style type="text/css">
  * { zoom: 1; /* and even less production-ready: position: relative; */ }
</style><![endif]-->

It’ll give every element the hasLayout. If it solves your problem as is, you must then hunt down which element(s) really need(s) hasLayout to display properly. Could be form, its parent or one of its children … Then only give hasLayout to this element.

3/
You could also use display: inline-block on each three children of form (without whitespace in HTML code between them) and tell IE6/7

 each_element_with_display_inlineblock {
   display: inline;
   zoom: 1; /* or nothing if it already has a width, height or any property giving it hasLayout */
 }