Search Box alignment in different browsers

[davebarnes]

The website: DEFENSICS. Defend. Then Deploy. - Codenomicon

The problem: the search box in the upper-right corner has different vertical alignment depending upon the browser.

IE 6 under Windows and Safari 3 under Mac OS X have the white box correctly aligned with the text to the left.

Firefox 2 under Mac OS X and Firefox 2 under Windows have the box positioned too low.

The code of interest begins at approximately line 37.
I have placed the form in a table cell to "constrain" it.
I have applied CSS to "<input name="query" type="text"..."

Any ideas would be appreciated as my CSS skills are not the strongest.

thanks,
dave

[imvain2]

Without copying the html and testing this, I'm not sure if it will work.

But, in the td that holds your text box, and the tds that hold your menu items try adding either valign="top" or valign="bottom". Whatever one you add make sure you add the same across all of the td stated above.

Hope this works.

[iany]

Dave,
I suspect that what imvain2 suggests will sort your problem as there doen't appear to be anything in the style sheet that would have any affect on the search box. However, if you are going to crack CSS, there are some things you could do to make sure that things work.
First - make sure that your xhtml validates.

[Invalid] Markup Validation of http://www.vectorgreen.com/ - W3C Markup Validator

Although as you are using tables, I prefer to leave as 4.01 hml DocType.

As IE6 is not a compliant browser, always best to build in FireFox. As IE7, Safari and Opera are compliant (more or less), they will render ok too. Then all you have to do is tweak for IE6.

AND FINALLY, well you would expect me to say this, ditch the tables and fly without a safety net and build a true CSS site. Eric Meyer's discussion group will give you all the help and support you will ever need.

If you need any help, Dave, let me know via a pm.

Cheers and good luck

[wige]

Another thing that might work is removing the height attribute from the table containing the links - this is a big difference between IE and FF. Then, removing the margin-top from the form field should put everything into a straight line, although you may need to tweak the margins here and there. Finally, you can give the containing table itself a margin-top if you feel the line becomes too close to the top of the window.

[jomariet]

I've had success with this issue by giving the input field a margin/padding attribute in the style sheet. It is a page element so you don't give it a . or #.

input {margin: 0px; padding: 0px;}

tweak the margin/padding to look the way you want it to.


JM

[kruser]

Not sure, but it appears that the td widths do not add up to the table width??

Best Regards,
Randy
Illinois Real Estate Mobi