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 3 of 3
  1. #1
    New Coder
    Join Date
    Jun 2008
    Posts
    76
    Thanks
    11
    Thanked 0 Times in 0 Posts

    Form acting strange in FF

    Hey guys,

    I've created my contact form, works great in IE and Chrome, but in FF it looks really strange, http://fier.co.uk/contact.php I would really appreciate some help fixing it for firefox

    HTML
    Code:
    <div id="left">
    
    <form id="quote" class="fl" method="post" action="contact/contact.php"> 
             <fieldset class="info">           
                <label for="name"><p>Name<small>Required</small> </label> <input type="text" id="name" name="name"/> 
                <label for="email"><p>Email Address</p><small>Required</small> </label> <input type="text" id="email" name="email"/> 
                <label for="telephone"><p>Phone Number</p></label> <input type="text" id="telephone" name="telephone"/> 
                <label for="url"><p>Current Website</p></label> <input type="text" id="url" name="url"/>  
                <label for="subject"><p>Subject</p></label> <input type="text" id="subject" name="subject"/>  
                <label for="details"><p>Message</p><small>Required</small></label>          
              <textarea id="details" name="details" rows="5" cols="60"></textarea> 
            </fieldset> 
            <button name="submit" id="submit" value="submit" class="fr">send</button> 
    
            </form>
    
                    </div><!-- end left -->
    CSS
    Code:
    @charset "utf-8";
        
    .fr{float:right;}
    *form#quote{width:450px;}
    small {font-family:Arial, Helvetica, sans-serif; color:#FFF; font-size:10px;}
    
    #contact-form label { float:left; }
    #contact-form input[type=text] { float:right; }
    
    
    input
    {
    	padding: 6px 5px;
    	border: 1px solid #CCCCCC;
    	float:left;
    	width:320px;
    	margin-bottom:20px;
    	-moz-border-radius:3px;
    	-webkit-border-radius:3px;
    }
     
    button#submit{
    display:block;
    padding:5px;
    text-align:center;
    border:none;
    cursor:pointer;
    margin-top:20px;
    margin-right:50px;
    background:#0c2037;
    font-variant:small-caps;
    font-weight:bold;
    color:#fff;
    	-moz-border-radius:3px;
    	-webkit-border-radius:3px;
    	position:absolute;
    margin-left:392px;
    
    }
     
    button#submit:hover{background-color:#142946;}
      
     
    label { font-weight: normal; 
    clear:both;
    float:left;
    width:105px;
    font-weight:bold;
    }
    
    label small{width:100%; display:block; font-weight:400}
      
    span.req{color:red;
    font-weight:bold;
    font-size:11px;
    }
     
    
    textarea
    {
    padding: 6px 5px;
    	height: 145px;
    	width: 320px;
    		-moz-border-radius:3px;
    	-webkit-border-radius:3px;
    }
    Maybe it's something really simple I'm missing?

    Thanks for your time.

  • #2
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    Mostly your p tags in the form are in the wrong places. As always, validate your html and css for those lists of errors.

    Firefox is performing correctly.

  • Users who have thanked drhowarddrfine for this post:

    Crispy (11-29-2009)

  • #3
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    You have not closed some of your tags. Under XHTML Doctype rules are strict: all the tags must be closed. For instance: every <p> must have a </p> end tag.

    On the contrary, some other place I see you have some extra end tags which close nothing. For instance you have a wrong line (line 81 I presume) : </ul></li>
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • Users who have thanked Kor for this post:

    Crispy (11-29-2009)


  •  

    Posting Permissions

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