Search Box Out of Alignment?

[sharkey]

Hello people as you can see from Natu Health (http://www.natu.co.uk). I have been having abit of problem with the aligment of the search box and go button in both IE and Mozilla ever since i added the search text image.

Anyhelp straightening them is greatly appreciated.
Cheers
Chris

[KDLA]

You may want to float that image and add to that div:

#sesh img {display: inline-block; margin: 0; padding: 0;}


If that doesn't work, you may want to set a font-size & line-height for your div and input.

KDLA

[toicontien]

The real issue is stemming from the "SEARCH" image and the INPUTs. Images are aligned vertically on a text line, to the bottom edge of letters like a, e, and o. The INPUTs are vertically aligned to the very bottom edge of the text line, where letters like y, j and q end. To solve your problem, give your FORM an Id of something like "frmSearch". Then add the following styles to your CSS:

#frmSearch * {
vertical-align: middle;
}
This will set every tag's vertical alignment to the same thing, and should shore up any discrepancies.

On an unrelated note, you've got a FORM tag inside SPAN tags. SPAN tags are inline tags, like <a>, STRONG, and EM. You want to use the block level DIV tag if you're going to put a FORM tag in it. In HTML, block elements can contain block and inline elements, but inline elements, like the SPAN tag, can only contain other inline elements. I also realize you're using XHTML, which being based on XML allows you to intermix inline and block elements to your heart's content, but since the HTML file is being sent with a text/html content type, browsers treat that page as normal HTML.

[sharkey]

Hello this has helped alot but im still having some problems the search image has now moved down. And in Mozilla how can i get it to look like it does in IE.

Thanks again people much appreciated dont know what id do without yous:)

[Centauri]

Try #frmSearch * {
vertical-align: bottom;
}

Cheers
Graeme

[sharkey]

Hello Centauri thanks very much that has corrected most of it in Mozilla but now IE is acting up with the search image and go button.


Thanks again mate youve helped me a few times on here recently and really appreciate it.

[toicontien]

Vertical-align middle is what you want. Everything is vertically aligned to the middle of that box. Just tried it in Firefox and it looks just fine.

[sharkey]

hello just tried middle and it doesnt work in Mozilla but makes most of it correct in IE.

Ahh this is getting frustrating damn browser differences.

Anyhelp is still greatly appreciated:D

Natu Health (http://www.natu.co.uk)

EDIT:
Everything is fine in mozilla when you set verticle-align to bottom but IE is still having problems with the search image and the go button.

[toicontien]

I just went to http://www.natu.co.uk/ in both Firefox and IE6. It looks fine. Which version of IE are you having problems with? 5, 6, 7? Windows or Mac?

[sharkey]

Im running Windows Vista so it will probably be the latest version so 7.

Thanks for replying mate. the problem is that the search image next to the box has dropped a couple of pixels throwing it out of alignment plus the go button has lowerd a pixel or two aswell.