SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)

    Pure CSS Form problem?

    Hello, this is the first time for me trying to set-up a form so I am a little lost. I have managed to make a pure css form, and it works (or rather looks) perfect across all browsers. My problem is when I add the action= and the info on top of the form telling it what to do all the browsers add a different amount of margin to the whole contact form. Some add it to the top, some add it to the bottom, and some don't add any (like 50px worth).

    Did I code it incorrectly? Should I use a class to style the inputs instead of using the input names themselves to style them? Or should I simply code the top form info differently (ie action=, etc)? Thanks for any info. Heres the actual page http://www.littleaboutalot.com/contact.php

    <form name="formmail" method="post" action= "http://www.littleaboutalot.com/cgi-sys/formmail.cgi">
    <input type="hidden" name="realname" value="FormMail Profile">
    <input type=hidden name="subject" value="email@gmail.com">
    <input type="hidden" name="redirect" value="http://www.littleaboutalot.com/thankyou.php">
    <input type="hidden" name="recipient" value="email@gmail.com">

    <label for="first name">First Name</label>
    <input id="first name" name="first name" class="iehover">
    <br>
    <label for="last name">Last Name</label>
    <input id="last name" name="last name" class="iehover">
    <br>
    <label for="email">Email</label>
    <input id="email" name="email" class="iehover">
    <br>
    <label for="comments">Comments</label>
    <textarea id="comments" name="comments" class="iehover"></textarea>
    <br>
    <input type="button" value="Submit" class="submit iesubmithover">

    </form>

    And The CSS

    label, input {
    display: block;
    width: 300px;
    float: left;
    margin-bottom: 1em;
    }
    textarea {
    display: block;
    width: 300px;
    height: 140px;
    float: left;
    margin-bottom: 1em;
    }
    label {
    text-align: right;
    width: 150px;
    padding-right: 20px;
    }
    input.submit {
    width: 5em;
    float: none;
    margin-left: 171px;
    }
    br {
    clear: left;
    }
    form input, form submit, form textarea {
    background: #EEEEDF;
    }
    input:hover, submit:hover, textarea:hover {
    background: #FEFEF8;
    }
    input:focus, submit:focus, textarea:focus {
    background: #FEFEF8;
    outline: 0;
    }
    * html .iehover { /* IE6 hover */
    m: expression(this.onmouseover = new Function("this.className = 'iehover-hover';"));
    }
    * html .iehover:hover, * html .iehover-hover{ /* IE6 hover */
    background: #FEFEF8;
    m: expression(this.onmouseout = new Function("this.className = 'iehover';"));
    }
    * html .iesubmithover { /* IE6 hover */
    width: 5em;
    float: none;
    margin-left: 171px;
    m: expression(this.onmouseover = new Function("this.className = 'iesubmithover-hover';"));
    }
    * html .iesubmithover:hover, * html .iesubmithover-hover { /* IE6 hover */
    width: 5em;
    float: none;
    margin-left: 171px;
    background: #FEFEF8;
    m: expression(this.onmouseout = new Function("this.className = 'iesubmithover';"));
    }

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Do you have a screenshot of where these differences are. I just tried in Opera, Firefox and ie6,7 and it all looks the same to me with or without the action="".

    Of course I may be looking in the wrong place with my un-trained eyes

    As long as you have zeroed the margins then they should look the same e.g. form{margin:0;padding:0)

  3. #3
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul, I was wrong about part of it - only firefox is changing the margins - the rest are fine. I don't have the ability to do screen shots - that is unless you know of a free service that offers that? Thanks!

    form without action=, etc
    http://www.littleaboutalot.com/contact.php

    and form with action=, etc
    http://www.littleaboutalot.com/contact2.php

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    It looks like its the hidden inputs upsetting things. If its only Firefox giving you the problem then add this.

    Code:
    input[type="hidden"] {position:absolute;left:-999em}

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Note that your ID's must be single tokens and not two words.

    Code:
    id="first name"
    It should be:

    Code:
    id="first-name"
    It must be consecutive characters without a space. You have a number of other similar errors.

  6. #6
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    OK thanks I'll fix those. Can I do without the input hiddens - if so what does that do or not do?

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    The hidden inputs are the way you transfer some data to the formail cgi program so you will need them.

    Just use the code I gave and they will have no visual impact on the layout.

  8. #8
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Worked like a charm - much thanks Paul! But what are these - never seen them before in css [ ]. And aside from the obviuos what is this code doing exactly?
    input[type="hidden"] {position:absolute;left:-999em}.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Ok.

    Its an attribute selector that selects an element based on the attribute and value that it contains. IE6 doesn't understand them but most other modern browsers do (to some extent).

    Read the entry in the reference that has a good explanation.

    http://reference.sitepoint.com/css/attributeselector

    The code above targets only inputs that have the type attribute with a value of "hidden" (<input type="hidden" ) and to stop them impacting on the layout the position:absolute removes them from the flow and places them miles off the left of the screen where they can't be seen. (display:none could have been used instead of absolute positioning but its better to get into good practices from the start.)

  10. #10
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot Paul - your the man! Hope you have a good weekend!


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
  •