Entry
How can I specify the width and/or height of a button?
How can I specify the font size of the button?
How can I further style a button?
Jun 30th, 2003 13:20
Christopher VonFeldt, Martin Honnen,
First of all there are two button elements namely
<INPUT TYPE="button" VALUE="button face here">
which is around in NN2+ and IE3+ while the new HTML 4
<BUTTON>button face content here can be any HTML markup</BUTTON
is supported by IE4+ and NN6+ only.
Now for dimensions: NN4 has some undocumented
WIDTH="pixelValue"
and
HEIGHT="pixelValue"
attributes for
INPUT TYPE="button"
so
<INPUT TYPE="button" WIDTH="200" HEIGHT="200"
VALUE="JavaScript.FAQTS.com"
>
gives you a very large button with NN4. (This entry could need feedback
whether NN2 and/or NN3 support that too).
You can change the font size of the button in NN4 by wrapping into a
FONT element e.g.
<FONT SIZE="+2">
<INPUT TYPE="button" WIDTH="200" HEIGHT="200"
VALUE="JavaScript.FAQTS.com"
>
</FONT>
IE4+ and NN6 do not support the WIDTH/HEIGHT attributes but safely
ignore them to allow us to style our buttons using CSS. So with IE4+
and NN6 you simply write the desired style settings
<INPUT TYPE="button"
STYLE="width: 200px; height: 200px; font-size: larger;"
VALUE="JavaScript.FAQTS.com"
>
Taken together we could try
<FONT SIZE="+2">
<INPUT TYPE="button" WIDTH="200" HEIGHT="200"
STYLE="width: 200px; height: 200px; font-size: larger;"
VALUE="JavaScript.FAQTS.com"
>
</FONT>
to have a button looking similar in NN4+ and IE4+ but unfortunately NN4
picks up both the FONT SIZE setting as well as the CSS font-size. So
the only solution here will be check for the browser and to
document.write different sections of html as needed.
IE4/5 even allow you to have line breaks in your button face value with
<INPUT TYPE="button"
VALUE="Kibology
for
all"
>
but again NN4 picks that up wrongly (control characters appear) so only
use it with IE4/5. Anyway the BUTTON element around in IE4+ and NN6 is
much more powerful as it allows abritrary HTML markup (well no nested
BUTTONs are allowed) to design the button face:
<BUTTON STYLE="text-align: center">
Kibology
<BR>
for
<BR>
all
</BUTTON>
Again we have the full power of CSS for example
<BUTTON
STYLE="background-color: orange; color: white; font-size: 18pt;">
JavaScript.FAQTS.com
</BUTTON>
------------------------------------------------------------
same thing, only different!
...
<head>
<style>
.buttons {
padding-right: 0pt;
padding-left: 0pt;
font-size: 8pt;
padding-bottom: 0pt;
color: black;
padding-top: 0pt;
font-family: verdana, geneva, arial, helvetica, sans-serif;
spacing: 0pt
}
</style>
...
<INPUT
TYPE="button"
WIDTH="400"
HEIGHT="20"
class="buttons"
VALUE="JavaScript.FAQTS.com">
