...

View Full Version : Form CSS Firefox vs. IE



halifaxer
03-01-2009, 08:53 PM
I'm confused. I know the following css attributes work in both IE and Firefox but when I seem to have them all wrapped up in a form the way I do... something goes wrong in Firefox and the red for background doesn't apply. Any idea?



form {
background-color:red;width:200px; }
form input,textarea {
float:left;margin-bottom:5px;margin-left:5px;width:85px; }
form label {
float:left;margin-bottom:5px;margin-left:10px;width:90px; }
form p {
font: bold 10px verdana;margin-top:10px;margin-bottom:10px;text-align:right; }
form span {
display:block;margin-bottom:5px;width:200px; }


<form>
<p>
<span>
<label>Name:</label>
<input type="text" />
</span>
<span>
<label>Location:</label>
<input type="password" />
</span>
<span>
<label>Comment:</label>
<textarea></textarea>
</span>
<span>
<label>&nbsp;</label>
<input type="submit" value="Submit" />
</span>
</p>
</form>

Strange, no?

PitbullMean
03-01-2009, 09:53 PM
HTML

<form id="form">

<div class="label">Name:</div>
<input class="input" type="text" />

<div class="label">Location:</div>
<input class="input" type="password" />

<div class="label">Comment:</div>
<textarea></textarea>

<br>
<input type="submit" value="Submit" />

</form>





CSS

#form {
background-color:red;width:200px;
font: bold 10px verdana;
margin-top:10px;
margin-bottom:10px;
text-align:right; }

.input,textarea {
display:block;
float:left;
margin-bottom:5px;
margin-left:5px;
width:85px; }

.label {
display:block;
float:left;
margin-bottom:5px;
margin-left:10px;
width:90px; }

drhowarddrfine
03-02-2009, 04:27 AM
What's happening is <form> is being covered up by the contents. Changing padding will probably reveal the red. Firefox is performing correctly. I'm sure IE is at fault but I don't have a Windows box to look at it right now.

PitbullMean
03-02-2009, 01:44 PM
What's happening is <form> is being covered up by the contents. Changing padding will probably reveal the red. Firefox is performing correctly. I'm sure IE is at fault but I don't have a Windows box to look at it right now.

That's not necessarily true cause, I tried his form code in a blank page and the red wouldn't show, So I just recoded it and the red shows now.

metadragon
03-02-2009, 02:37 PM
Happens to me all the time. one work in firefox and not IE.

abduraooft
03-02-2009, 02:46 PM
You need to clear your floats

form {
background-color:red;width:200px; overflow:auto;
}

See www.quirksmode.org/css/clearing.html or
www.positioniseverything.net/easyclearing.html

PitbullMean
03-02-2009, 02:53 PM
nice fix abduraooft, guess im just a goof for clean code lol.

drhowarddrfine
03-02-2009, 06:36 PM
The original markup is more appropriate form usage.

Apostropartheid
03-02-2009, 06:43 PM
I would agree. Neither are particularly well-formed. Ideally, I would use something like this:


<form action="" method="get">
<fieldset>
<label for="name">Name</label>
<input type="text" id="name" name="name"/>
<label for="location">Location</label>
<input type="text" id="location" name="location"/>
<label for="comment">Comment</label>
<textarea id="comment" name="comment"></textarea>
<input type="submit" value="Submit"/>
</fieldset>
</form>

drhowarddrfine
03-02-2009, 08:44 PM
Yep. .

halifaxer
03-04-2009, 11:18 PM
Dudes, many thanks for all your thoughts. Didn't mean to start such a debate. I agree the <p> and <span> tags make it look messy but it's visually more effective than the first suggestion from PitbullMean. Plus, it's perfectly valid mark up, I did check to make sure.

The overflow:auto did the trick.

Cheers all!

PitbullMean
03-04-2009, 11:27 PM
How is that mess more visually effective then the suggestion i gave. It works and its easier to edit when you want to make changes. so before you slam someones coding style look in the mirror.

Apostropartheid
03-04-2009, 11:33 PM
There's nothing personal about it, but the first example uses more semantic, meaningful code, i.e. using the actual label element rather than a meaningless division. I would say the example code I gave is superior to both, because it uses the rightful fieldset (although this is up for debate: you can, if you don't think that a fieldset should be used, use a division instead), and has proper use of the label element, linking each to its appropriate input field. "It works" isn't really an accepted justification for code on the web: tables "work", as does not using a doctype. No one insulted you. Please do not infer this.

abduraooft
03-05-2009, 07:27 AM
A big ditto to the above, and I'd add a <legend> tag too into that fieldset.
See how to make a Prettier and Accessible Forms (http://http://www.alistapart.com/articles/prettyaccessibleforms)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum