Form Inputs Disappear with CSS

[bluephoenix]

Help!

I'm designing a form and styling it with CSS. It displays fine in IE but Netscape is having some problems. In Netscape, the text input fields and the submit button don't display.

Can someone please look at my code and point out where I went wrong? Thanks.

-Tim

<style type="text/css">
<!--
	form > * {
		font-family: arial, sans, sans-serif;
		font-size: 10pt;
	}

	fieldset {
		border: none; 
		padding: none; 
		margin: none;
	}

        #form {
		width: 26em;
		float: left;
	}

	#postformbox {
		width: 25em;
		border: 1pt solid black;
		background: url('../img/background.gif');
		background-position: bottom left;
		background-repeat: repeat-x;
	}

	#postform {
		margin: 0px;
	}

	.postformheader{
		text-align: left;
		font-size: xx-small;
	}

	#postformheaderleft {
		float: left;
	}

	#postformheaderright {
		float: right;
	}

	.postformlabel {
		width: 5em;
		float: left;
		text-align: right;
	}

	.postforminput {
		float: right;
	}

	.postforminput input {
		width: 19.5em;
		margin-right: 0.25em;
	}

	#postformtext {
		width: 24.5em;
		height: 10em;
		margin-left: 0.25em;
	}

	.postformbutton {
		width: 100%;
	}

	#postformbuttonleft{
		width: 49.5%;
		float: left;
	}

	#postformbuttonright{
		width: 49.5%;
		float: right;
	}
-->
</style>

...

    <div id="form">
       ...
      <div id="postformbox">
        <form id="postform" action="support.php" method="post">
          <fieldset>
            <span id="postformheaderleft" class="postformheader">Submit New Post</span>
            <span id="postformheaderright" class="postformheader"><?=date("~r");?></span>
          </fieldset>
          <fieldset>
            <span class="postformlabel">Name:</span>
            <span class="postforminput"><input type="text" id="name" name="name" /></span>
          </fieldset>
          <fieldset>
            <span class="postformlabel">Email:</span>
            <span class="postforminput"><input type="text" id="email" name="email" /></span>
          </fieldset>
          <fieldset>
            <span class="postformlabel">Subject:</span>
            <span class="postforminput"><input type="text" id="subj" name="subj" /></span>
          </fieldset>
          <fieldset>
            <textarea id="postformtext" cols="15" rows="5" name="text"></textarea>
          </fieldset>
          <fieldset>
            <span id="postformbuttonleft">
              <script type="text/javascript">
                <!--
                document.write('<input type="button" value="Preview" ' +
                               'class="postformbutton" onclick="fpreview();" />');
                //-->
              </script></span>
            <span id="postformbuttonright">
              <input type="submit" value="Submit" class="postformbutton" /></span>
          </fieldset>
        </form>
      </div>
    </div>

[me']

I'll point out what I think is the problem first, then go one to say how your code could be improved.

At the beginning of the <script> tag, you've got comments. This means that some browsers will ignore whatever comes after the <!--, depending on whether or not they understand that HTML comments should be hidden inside <script> tags. Try //<!--, or better still, //<![CDATA[ and //]]> for XHTML comments.

Next: your code is just about as unsemantic as you can get. You've got divitis, spanitis, iditis and classitis! Try using <form> instead of <div id="form">. Use <label> instead of some of the spans you've got there. Here's the same code, but more semantically richer:

<form>
  <h5>Submit New Post</h5>

  <label for="name">Name:</label>
  <input name="name" type="text" />

  <label for="email">Email:</label>
  <input name="email" type="text" />

  <label for="subj">Subject</label>
  <input name="subj" type="text" />

  <textarea id="postformtext" cols="15" rows="5"></textarea>

  <div id="buttons">
    <input type="submit" value="Submit" />
    <input type="button" onclick="fpreview()" value="Preview" />
  </div>
    <![CDATA[ you could use your js detection script if you wanted. ]]>
</form>

Some CSS:

form {
  border: 1px solid #000; 
    /*why are you using pts for border widths?*/
  width: 25em;
  background: url(../img/background.gif) repeat-x bottom left;}
label {
  display: block;
  width: 5em;
  text-align: right;
  float: left;}
input {
  float: right;
  width: 19.5em;
  margin-right: 0.5em;}
textarea { margin-left: 0.25em; }
    /*let the cols and rows attributes do the sizing*/
#buttons input { width: 49.5%; float: left }

/* alternatively, you could get rid of the <div id="buttons"> 
if you were prepared to sacrifice browser support:

input[type="submit"], input[type="button"] {
  width: 49.5%;
  float: left;
  margin: 0}

*/

HTH

[bluephoenix]

Thank you for your help.

I used comment tags to hide the JavaScript from non-JavaScript-enabled browsers. I was taught in college that <!-- and closing with //--> was the appropriate syntax; while the script element delimits the script's code, <!-- --> actually hides it so that it doesn't display as page content. The // before the closing --> circumvents a possible "erroring out" of the script.

The same principle applies to the style element, though the // isn't needed when closing the comment.

As far as my code's unsemenatic-ness is concerned, you're probably right. I'm using the div element as a generic, non-descript block element. The id and class makes CSSing and scripting easier. I've never run across the label element before so it was new to me; Thanks for pointing it out!

I'm using points as the measurement for borders simply because it's a measurement I use often. Stroke's almost always measured in pt sizes in such applications as Illustrator, Flash, etc. It's just force of habit for me... but it's a measurement I understand, too.

I certainly wouldn't want to sacrafice brower compatability, though. "Know they audience," right? The page will be viewed on Konqueror, Mozilla, IE and Lynx. A sharp look that degrades nicely to text browsers is a must!

Below's my code at this point.

<style type="text/css">
    <!--
    * {
	font-family: Arial, Sans, sans-serif;
	font-size: 10pt;
    }

    form {
	width: 40ex;
	border: 1pt solid black;
	text-align: right;
	background: url("../img/background.gif");
	background-position: bottom left;
	background-repeat: repeat-x;
	padding: 0.25ex 0.75ex;
    }

    #formheader {
	text-align: left;
	font-size: xx-small;
	color: #900;
	font-weight: bold;
    }

    label {
	margin-right: 0.75ex;
    }

    input {
	width: 29.75ex;
    }

    .button {
	width: 49%;
    }

    textarea {
	width: 39.5ex;
    }

    fieldset {
	border: none;
	margin: 0px;
	padding: 0px;
    }

    #mesg label {
	display: none;
    }

    #preview {
	width: 40ex;
	border: 1pt solid black;
	padding: 0.25ex 0.75ex;
	margin-top: 1em;
	display: none;
    }

    #btns {
	text-align: center;
    }

    -->
</style>
  ...
<script type="text/javascript">
    <!--
    function stripHTML(text) {
      if (text) {
        text = text.replace(/</g, "&lt;");
        text = text.replace(/>/g, "&gt;");
        return text;
        }
        else return null;
    }

    function formPreview()
    {
      text = document.getElementById('body').value;
      text = stripHTML(text);
      if (text) {
          document.getElementById('preview').innerHTML = text.replace(/\r/g, "<br />;");
          document.getElementById('preview').style.display = "block";
          }
      else document.getElementById('preview').style.display = "none";

      return true;
    }
    //-->
</script>
...
<form action="post.php" method="post">
  <div id="formHeader">Post New Thread</div>
  <fieldset id="name">
    <label>Name:</label>
    <input type="text" name="name" />
  </fieldset>
  <fieldset id="mail">
    <label>E-Mail:</label>
    <input type="text" name="mail" />
  </fieldset>
  <fieldset id="subj">
    <label>Subject:</label>
    <input type="text" name="subj" />
  </fieldset>
  <fieldset id="mesg">
    <label>Message:</label>
    <textarea name="body" id="body" cols="34" rows="5"></textarea>
  </fieldset>
  <div id="btns">
    <script type="text/javascript">
        <!--
        document.write("<input type='button' class='button' value='Preview' " +
                       "onclick='formPreview();' />");
        //-->
    </script>
    <input type="submit" class="button" value="Post" />
  </div>
</form>

<div id="preview"> </div>

-Tim

[me']

Originally posted by bluephoenix
I was taught in college that <!-- and closing with //--> was the appropriate syntax;

It was during HTML (although surely it was //<!-- and not just <!--), but now we have XHTML, it's better to use XML comments, <![CDATA[ and ]]> (CDATA is short for character data.). Although, you might need to set your mime type to application/xhtml+xml, I don't actually know.

So did that actually solve your problem? Or is it still there?

A note on browser compatability: my first solution, wrapping the buttons in <div id="buttons"> will work in all browsers. However, it's superfluous markup, and in my opinion, my CSS only solution is much better, save for lack of support.

Ironically, there's another solution which I didn't think of at the time, and that is using <button> instead of <input type="submit">, and that's better semantically, and it would get rid of the extra div, but guess what. It's not well supported (no names, naturally).