Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    New Coder
    Join Date
    Feb 2008
    Posts
    37
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Form CSS Firefox vs. IE

    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?

    Code:
    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; }
    Code:
    <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?

  • #2
    Regular Coder
    Join Date
    Oct 2007
    Location
    Glencoe, Ontario, Canada
    Posts
    340
    Thanks
    19
    Thanked 27 Times in 27 Posts
    Code:
    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>

    Code:
    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; }
    Last edited by PitbullMean; 03-01-2009 at 09:58 PM.
    Eric "PitbullMean" Melo
    Always Start your layout with*{border:0; margin:0; padding:0;}
    Be sure to Thank ALL Users who give assistance.

  • #3
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    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.

  • #4
    Regular Coder
    Join Date
    Oct 2007
    Location
    Glencoe, Ontario, Canada
    Posts
    340
    Thanks
    19
    Thanked 27 Times in 27 Posts
    Quote Originally Posted by drhowarddrfine View Post
    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.
    Eric "PitbullMean" Melo
    Always Start your layout with*{border:0; margin:0; padding:0;}
    Be sure to Thank ALL Users who give assistance.

  • #5
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Happens to me all the time. one work in firefox and not IE.

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,849
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    You need to clear your floats
    Code:
    form {
    background-color:red;width:200px; overflow:auto;
    }
    See www.quirksmode.org/css/clearing.html or
    www.positioniseverything.net/easyclearing.html
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    Regular Coder
    Join Date
    Oct 2007
    Location
    Glencoe, Ontario, Canada
    Posts
    340
    Thanks
    19
    Thanked 27 Times in 27 Posts
    nice fix abduraooft, guess im just a goof for clean code lol.
    Eric "PitbullMean" Melo
    Always Start your layout with*{border:0; margin:0; padding:0;}
    Be sure to Thank ALL Users who give assistance.

  • #8
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    The original markup is more appropriate form usage.

  • #9
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    I would agree. Neither are particularly well-formed. Ideally, I would use something like this:
    Code:
    
    <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>

  • #10
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    Yep. .

  • #11
    New Coder
    Join Date
    Feb 2008
    Posts
    37
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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!

  • #12
    Regular Coder
    Join Date
    Oct 2007
    Location
    Glencoe, Ontario, Canada
    Posts
    340
    Thanks
    19
    Thanked 27 Times in 27 Posts
    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.
    Eric "PitbullMean" Melo
    Always Start your layout with*{border:0; margin:0; padding:0;}
    Be sure to Thank ALL Users who give assistance.

  • #13
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    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.

  • #14
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,849
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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