SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Textarea font size and font ?

    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 ?


    Code:
    <!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. #2
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    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.

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    You might need to specify the font for the textarea (and input) explicity:

    Code:
    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.

  4. #4
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Stomme poes,

    Thanks for your reply

    What's not valid about the html code ?

  5. #5
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    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. : )

  6. #6
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    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. #7
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    You missed the Big One Robert : )

  8. #8
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    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. #9
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    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).


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •