SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Addict
    Join Date
    Jan 2007
    Posts
    296
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Creating A form with equal columns

    I have created a form which I am quite happy with replacing my old table layout for the form. However I have 2 problems with it.

    Firstly I would like the words that describe the input box and the input box all on one line but so they look like 2 equal size columns or something like 40% text and 60% input box.

    Secondly for some reason in IE6 the fieldset seems to expand above the legend. In FF it works perfectly and looks nice and neat but in IE it seems to expand a further 1 cm above the legend. Is there a fix to sort this out???

    Cheers


    CSS

    Code:
    form {width: 350px; font: 12px "Arial", Helvetica, Sans-serif; display:block;  margin: auto; padding: 0px;}
    /* fieldset styling */
    fieldset {font: Bold 14px "Arial", Helvetica, Sans-serif; margin: 1em 0; /*  space out the fieldsets a little*/ padding: 1em; border : 1px solid #ccc; background-color:#fafafa;}
    
    /* legend styling */
    legend {font-weight: bold; color: #e72130;}
    
    .pform {font: 12px "Arial", Helvetica, Sans-serif; margin: 2px 0px; padding: 0px;}
    
    /* style for  labels */
    label {width: 100px;}
    
    textarea {width: 300px;height: 200px;}
    
    input.text{width: 200px;}
    
    select{width: 200px;}
    
    .required {font: Bold 16px "Arial", Helvetica, Sans-serif; color:#e72130;}
    .submit {width: 100px; background-color: #e72130; font-weight: bold; font-size: 12px; color: #fff;}

    Code:
    <fieldset>
      <legend>Your Contact Details</legend>
      
    
    <p class="pform">
    <label for="title">Title:</label>
    <select name="salutation" id="salutation" class="select" > 
    <option value="" selected>--None--</option> 
    <option value=Mr.>Mr.</OPTION> 
    <option value=Mrs.>Mrs.</option> 
    <option value=Ms.>Ms.</option> 
    <option value=Dr.>Dr.</option> 
    <option value=Prof.>Prof.</option> 
    <option value=Ing.>Ing.</option> 
    <option value=IR.>IR.</option>
    </select>
    </p>
      
    <p class="pform">
    <label for="firstname"><span class="required">*</span> First Name:</label>
    <input name="first_name" id="first_name" type="text" class="text" maxLength=40 />
    </p>
    
    <p class="pform">
    <label for="lastname"><span class="required">*</span> Last Name:</label>
    <input name="last_name" id="last_name" type="text" class="text" maxLength=40 />
    </p>
    
    <p class="pform">
    <label for="email"><span class="required">*</span> E-Mail:</label>
    <input name="email" id="email" type="text" class="text" maxLength=80 />
    </p>
    
    <p class="pform">
    <label for="company"><span class="required">*</span> Company:</label>
    <input name="company" id="company" type="text" class="text" maxLength=80 />
    </p>
      
    <p class="pform">
    <label for="phone"><span class="required">*</span> Phone:</label>
    <input name="phone" id="phone" type="text" class="text" maxLength=40 />
    </p>
    
    <p class="pform">
    <label for="state/province">State/Province:</label>
    <input name="00N20000000wFV8" id="00N20000000wFV8" type="text" class="text" maxlength="40" />
    </p>
    
    <p class="pform">
    <label for="zip">Zip:</label>
    <input name="00N20000000wFVN" id="00N20000000wFVN" type="text" class="text" maxlength="20" />
    </p>
    
    </fieldset>
    
    <fieldset>
      <legend>Description</legend>
    <p class="pform">
    <label for="message"><span class="required">*</span> Message: </label>
    <textarea name="description" id="description" cols="35" rows="10"></textarea>
    </p>
    </fieldset>
    
    
    <input name="submit" onclick="return Process_Form()" type=submit value="Submit Query" class="submit"  ;>
    
    </form>

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You want to read "The Legends of Style" by John "Tyssen" Faulds for dealing with fieldsets and legends.

    I'd also look into using more semantic markup to break up your form controls - they don't look like paragraphs to me.

  3. #3
    SitePoint Zealot milenko1054's Avatar
    Join Date
    Jan 2004
    Location
    Ohio
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To answer your question about the equal size columns, one way to do what you suggest is to float both the label and the input elements and set the label's display to block. Here's an example:

    Code:
    label, input, textarea {
      width: 64&#37;;
      display: block;
      float: left;
      clear: none;
    }
    
    label {
      width: 34%;
    }
    As for the paragraphs, to me the definition of a paragraph seems to include your usage but discussing semantics is like discussing religion or politics so I won't belabor that point!

    What I do like about using paragraphs to enclose horizontally aligned label and field combos is that it allows consistent spacing, highlighting, etc. of form rows through the paragraph styles. Just seems a little cleaner to me than applying styles to each individual label or form field for this purpose. You could also use a div in place of the paragraph if that seems more appropriate to you.


  4. #4
    SitePoint Addict
    Join Date
    Jun 2007
    Location
    Sydney, Australia
    Posts
    253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello.

    Adding the following to your CSS code will fix the IE legend issue. Thanks goes to Pmob for giving me the code, when I had the issue.

    Code:
    /* Start IE-Mac Hide \*/
    legend 
    {
    *top: -1.5em;
    *position: relative;
    }
    
    fieldset
    {
    *position: relative;
    }
    /* End IE-Mac Hide */
    Putting an * infront of each property is an IE CSS filter which works in every version of IE, including IEmac, which is why it also used the IE-Mac Hide. Alternatively you can just put it in conditional comments, without the * and without the IE-Mac Hide.

    Good Luck!

  5. #5
    SitePoint Addict
    Join Date
    Jun 2007
    Location
    Sydney, Australia
    Posts
    253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As for what Dan said, about using more semantic markup, you could use an <ol> and <li> instead of <p> if you like. You would then also want to set list-style to none and remove any margin and padding from the list. The Sitepoint book, "The Art and Science of CSS" gave me that idea.

  6. #6
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just so you know, the * html hack does not work in Internet Explorer 7 (and frankly, doesn't need to).

  7. #7
    SitePoint Addict
    Join Date
    Jun 2007
    Location
    Sydney, Australia
    Posts
    253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I did not use the * html hack, you must be reading too fast!

  8. #8
    SitePoint Addict
    Join Date
    Jun 2007
    Location
    Sydney, Australia
    Posts
    253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    acually, I just noticed that using the hack I did, CSS does not validate. Therfore, you are probably better off using Conditional Comments.

    Im interested, is there An IE5,6,7 Filter that Validates, does anyone know?

    EDIT: The following should work and should be valid CSS. However once again, you may prefer to use conditional comments:

    Code:
    *:first-child+html legend
    {
    top: -1.5em;
    position: relative;
    }
    *:first-child+html fieldset
    {
    position: relative;
    }
    
    /* Start IE-Mac Hide \*/
    * html legend
    {
    top: -1.5em;
    position: relative;
    }
    
    * html fieldset
    {
    position: relative;
    }
    /* End IE-Mac Hide */

  9. #9
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, you're right. I saw the * and just assumed you had * html in there. As you noticed just the * by itself causes the style rule to become invalid. * html will target IE 5/6 while *:first-child+html will target IE 7. Both are perfectly valid, though the latter is frowned upon.

    You also don't need to hide those style rules from Mac-IE either. Nobody uses it anymore, it's not available for download, and it's not even supported these days.

  10. #10
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    znebojsa, you'd be much better off using Tyssen's method for "Legends of Style" which Dan posted earlier in the thread than trying to get consistency cross browser by styling the fieldset or legend directly.

    http://www.sitepoint.com/forums/show...14&postcount=2



    Off Topic:

    Dan, where's Stewie gone?

  11. #11
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:

    He's dressed up as Agent Smith for Halloween.

  12. #12
    SitePoint Addict
    Join Date
    Jun 2007
    Location
    Sydney, Australia
    Posts
    253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dan:
    Just wondering, why is "*:first-child+html" frowned upon?

    And also, Are you saying that the IE-Mac hide should never be used, even when giving IE haslayout (height: 1&#37

  13. #13
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm saying that the backslash comment hack ( /* \*/) shouldn't be used anymore because IE-Mac is no longer supported. And as far as I know, it doesn't actually set hasLayout - since IE just treats it as a normal comment anyway.

    As for the IE 7 hack, it's frowned upon because IE 7 is a "moving target" and what may be broken today may be fixed next week and pushed out via Automatic Updates.

  14. #14
    SitePoint Addict
    Join Date
    Jun 2007
    Location
    Sydney, Australia
    Posts
    253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dan, why is *:first-child+html frowned upon? Because using it, who knows that will hapen in IE8, or is there another reason? Is there another, better way to target IE7 only, which validates?

    Also, do you think that IE-Mac Hides do not ever need to be used (anymore) even when giving IE haslayout? (height: 1%)

    Quote Originally Posted by csswiz View Post
    znebojsa, you'd be much better off using Tyssen's method for "Legends of Style" which Dan posted earlier in the thread than trying to get consistency cross browser by styling the fieldset or legend directly.
    Why? The OP just wanted to fix the IE issue, not style the legend differently.

  15. #15
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    read the article and you'll find out why

    As for height: 1&#37;; I've found that in most cases (except those cases where a height has been defined in an element's parent) that you can stick the 1% height declaration/property value in the style rule itself without having to hack it in for IE. And no, you don't need to hide it from Mac IE since nobody uses it anymore. I think fewer people are using Mac-IE than Netscape 4, if that means anything to you.

    As for targeting IE 7, it's best to re-write the code so that it works in IE 6/7, Firefox, Opera and Safari/Konqueror without having to hack (or use those thrice-wretched conditional comments to deliver separate stylesheets). It can be frustrating at times, but the rewards are well worth it.

  16. #16
    SitePoint Addict
    Join Date
    Jun 2007
    Location
    Sydney, Australia
    Posts
    253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So you are saying, you can make any webpage work in IE6 and 7, without any filter hacks?

  17. #17
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just about, yes (there are some exceptions for IE 6, there shouldn't be any for IE 7).


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
  •