Hi, Dot W ~
Sometimes making everything fit can be such a struggle, can't it?
Google's Free Web Search gives information on customization here:
://www.google.com/faq_freewebsearch.html#4
Please remember, though, that the height of any table will be
determined by the height of its content, and attempts to limit the
height may cut off a part of the content in some browsers.
Obviously, you need to control the height of the content you want
within a table 25 pixels high - and it is necessary to control the
size of the content. In your case, it is easy, as there is a minimum
amount text (which can be controlled within a form) and the input box,
which can also be controlled by setting a text size within the table.
See: HTML 4 Newbies, HTML Forms Tutorial
- http://www.html4newbies.com/formstutorial.shtml
See: Master CGI, HTML forms tutorial
- http://mastercgi.com/howtoinfo/formtutorial.shtml
See: Net Mechanic, HTML Tip: Controlling Table Size
- http://www.netmechanic.com/news/vol5/html_no15.htm
So, the tweak or hack to keeping the size of your table to the size of
the graphic you submitted (754 pixels wide), which, while not pretty,
works cross-browser and keeps the size of the table and the input
within the table to your 25 pixel height limit. Notice that I did not
limit the table's height to 25 pixels, as doing so actually may make
the table a bit taller in some cases. This is based on the variables
of your viewer's system setting and default size settings within his
browser.
The tweaks listed below is one way to achieve what you want. I used
relative sizing to keep it readable at individual default settings -
and I also reduced the width of the input box to compensate for the
amount of text, plus Google's logo within a single row.
See: http://209.151.82.182/browsertest.html
The tweaks are:
1. The table tag: I changed it to include the width:
<TABLE bgcolor=#FFFFFF cellspacing=0 border=1 width="742">
2. Within the cell, I added font tags like so:
<font face="Verdana,Arial,Helvetica,sans-serif"
size="-1"><b>SEARCH:</b>
3. I reduced the size for the search tag, although I see you have made
a custom search button. The reduction just prior to the search tag is
like so:
<font size="-2"><INPUT type=submit name=sa VALUE="Search">
4. I added some hard spaces - - to move the "Powered by:" over.
You can also divide the single table cell into two; however I ran into
some cross-browser compatibility issues and found working within one
cell worked marvelously.
Search terms:
-- HTML tutorial: controlling table size
-- HTML forms: controlling input sizes
-- html tutorial form input sizes
You can look at the code on the cell above. As I said, it may not be
pretty, but sometimes those HTML tweaks aren't lovely to look while
they do achieve their purpose.
Hope this helps,
Serenata |