Textarea font size and font?

HTML & CSS
1

Hi all

I have a simple contact form here

http://www.ttmt.org.uk/forum/contact.html

In all browser Mac and PC apart from Safari the text the message textarea is a different size and font from the other input text areas.

How do I fix this ?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>Form</title>
	<style type="text/css" media="screen">
  	 html, body, div, span, applet, object, iframe,
     h1, h2, h3, h4, h5, h6, p, blockquote, pre,
     a, abbr, acronym, address, big, cite, code,
     del, dfn, em, font, img, ins, kbd, q, s, samp,
     small, strike, strong, sub, sup, tt, var,
     b, u, i, center,
     dl, dt, dd, ol, ul, li,
     fieldset, form, label, legend,
     table, caption, tbody, tfoot, thead, tr, th, td {
     	margin: 0;
     	padding: 0;
     	border: 0;
     	outline: 0;
     	font-size: 100%;
     	vertical-align: baseline;
     	background: transparent;
     }
     body {
     	line-height: 1;
     }
     ol, ul {
     	list-style: none;
     }
     blockquote, q {
     	quotes: none;
     }
     blockquote:before, blockquote:after,
     q:before, q:after {
     	content: '';
     	content: none;
     }
     :focus {
     	outline: 0;
     }
     ins {
     	text-decoration: none;
     }
     del {
     	text-decoration: line-through;
     }
     table {
     	border-collapse: collapse;
     	border-spacing: 0;
     }
     html, body{
       font-size:100%;
       font-family:"Helvetica Neue", Helvetica, sans-serif; 
     }
     
     
    form{
      width:270px;
      float:left;
      margin:30px;
    }
    form label{
      color:#333;
      font-size:.9em;
      margin-bottom:3px;
    }
    form label,
    form input{
      float:left;
    }

    form input,
    form textarea{
      background:#eee;
      width:100%;
      border-width:0;
      padding:.35em .2em;
      margin-bottom:8px;
      font-size:.9em;
    }
    form textarea{
      height:150px;
    }
    form input:focus,
    form textarea:focus{
      background:#ddd;
    }
	</style>
</head>

<body>
  <form action="" method="post">
    <label for="name">Name:</label>
    <input type="text" name="name:" value="" id="name">
    <label for="email">Email:</label>
    <input type="text" name="email" value="" id="email">
    <label for="subject">Subject:</label>
    <input type="text" name="subject:" value="" id="subject">
    <label for="message">Message:</label>
    <textarea row="2" col="20"></textarea>
  </form>    
</body>
</html>
2

Stomme poes,

Thanks for your reply

What’s not valid about the html code ?

3

After making your form markup valid, I’d say just give the textarea its own font declaration. You can indeed
textarea {
font-size: something bigger;
}
and it will grow.

I don’t have Helvetica-Neue so I don’t know how it looks on your machine.

4

You might need to specify the font for the textarea (and input) explicity:

input, textarea {
    font-family:"Helvetica Neue", Helvetica, sans-serif; 
}

EDIT: didn’t see Stomme’s post, but still, the textarea has its own default font unless you specify it (so it seems), and that font seems to appear smaller than the label font.

5

You missed the Big One Robert : )

6

A lot of things were wrong with the markup mainly not closing the <input /> no form action (which I suspect is because it’s a test page) and the <textarea> having a proprietary ‘row’ and ‘col’ value should have been ‘rows’ and ‘cols’. Plus some <label> issues.

7

Plus really the labels themselves should have been wrapped within a block

That’s my personal beef… because everyone does it (puts inlines as direct children of forms).

8

Yes, Poes originally I was going to leave that one out. Albeit I think the W3C error message; “reference to non-existent ID message” might have been too cryptic for some people. As it’s like a tongue-twister with the missing ID actually being called ‘message’.

Plus really the labels themselves should have been wrapped within a block but regarding the ID <textarea rows=“2” cols=“20” id=“message”></textarea> should sort that one.

9

Why don’t you run it though the HTML validator and see what it says?

If the message is too weird and cryptic you can ask what it means, but I know it’s important for web coders to be familiar with both the validator and what its errors mean. : )