making image search button align with form field input

Forum Moderators: open

Message Too Old, No Replies

making image search button align with form field input

mgm_03

4:15 pm on Jul 30, 2005 (gmt 0)

I have been trying CSS, tables, both....I can't get the image (substituting for a plain html button) to align vertically with a form field input ...maddening.

I'd show the problem but I think links are not allowed ...?

moltar

4:44 pm on Jul 30, 2005 (gmt 0)

You can't get it 100% perfect in all browser, but you can improve it by using relative positioning and moving it the way you want.

tedster

6:08 pm on Jul 30, 2005 (gmt 0)

Rendering problems like this can come from the DTD your page is using. Does this thread give you any help?

Quirks Mode vs. Standards Mode [webmasterworld.com]

mgm_03

4:03 pm on Jul 31, 2005 (gmt 0)

The solution to my problem was to use an inline style like so:
<div>
<FORM method=GET action="http://www.google.com/search">
<INPUT TYPE=text name=q size=12 maxlength=255 value="">
<INPUT type=image name=btnG src="/images/search.gif" style="vertical-align:top;">
<input type=hidden name=domains value="example.com">
<input type=hidden name=sitesearch value="example.com" >
</FORM>
</div>

Regarding the thread about quirks and standard mode: You made a good effort to clear up a very frustrating issue but the contributors made it hard to make sense of everything ("he said, she said").

I think it is the responsibility of the standards organizations to provide helpful workarounds as you did with the 'Tan Hack' ...given that in the real world standards are inconsistently implemented by browsers ... at least not yet.

This is the doctype I always use :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

[edited by: tedster at 9:41 pm (utc) on July 31, 2005]
[edit reason] use example.com in code [/edit]

tedster

9:51 pm on Jul 31, 2005 (gmt 0)

So in the end, there was a CSS solution. Glad you got it fixed.

This is the doctype I always use :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Did you realize you were not using xhtml style tags in the code sample you posted? Sorry I forgot to mention validation earlier - before tackling rendering problems it's a very good idea to make sure your html and css are valid. Otherwise you can put yourself in a position where there actually IS no way to get cross-browser rendering, short of browser sniffing and separate pages.

W3C Validator - HTML [validator.w3.org]
W3C Validator - CSS [jigsaw.w3.org]