SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2006
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Contact Form looks good in IE and FF but not Safari

    I have a problem with a contact form. It display perfect in FF and surprisingly IE too. In safari though it messes up, the text area gets pushed to the bottom of the page leaving a big nasty gap. I have found the line in the css that is causing the problem:

    display: block;

    When I delete this, it display fine in Safari but not IE or FF.

    Any ideas how to fix it?

    Thanks

  2. #2
    SitePoint Guru babyboy808's Avatar
    Join Date
    Nov 2004
    Location
    dublin
    Posts
    602
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Can you post your code please

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2006
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Here is the code

    Here is the html for the code:

    Code:
    <div class="emailform">
    
    
    <form method="post" class="emailform" action="contact-us.html" >
    <fieldset>        
    <input type="hidden" name="send" value="true" /><br />
    <label for="name">Your Name:</label> 
    
    <input type="text" name="name" id="name" value="" /><br />
    <label for="email">Your Email Address:</label> 
    
    <input type="text" name="email" id="email" value="" /><br />
    
    <label for="message">Message:</label>
    <textarea cols="40" rows="10" name="message" id="message"></textarea>
    
    <label>&nbsp;</label>
    
    <input type="submit" value="Submit" class="button" /><br />
    </fieldset> 
    </form>
    </div>
    and here is the relevent css:

    Code:
    form.emailform label { 
    	width: 168px; /* label width *//* label margin = (input left margin) - (label width) */
    	margin-right: 10px; /* label margin */
    }
    form.emailform label.long, form.emailform p.label {
    	margin-left: 120px; /* subjective */
    	width: 390px; /* (textarea width) + (label width) + (label margin) - (left margin) */
    }
    form.emailform label span {
    	color: #900; /* color of required asterisk */
    }
    form.emailform textarea, form.emailform select {
    	margin-left: 150px; 
    	width: 204px; /* subjective */
    }
    
    form.emailform input {
    	margin-left: 150px; /* (label width) + (label margin) */
    	width: 200px; /* subjective */
    }
    
    form.emailform input.button {
    margin: 10px 0 0 129px;
    	float:left;
    	width: 80px; /* subjective */
    }
    
    
    
    
    form.emailform textarea { 
    	width: 265px; /* subjective, recommend: (3/2)(input width) */
    }
    form.emailform p.desc {
    	margin-left: 210px; /* (label width) + (label margin) */
    }
    form.emailform .checks label {
    	margin-left: 220px; /* (label width) + 2(label margin) */
    }
    form.emailform .checks input {
    	margin-left: 210px; /* (label width) + (label margin) */
    }
    
    /*
    	The following makes Internet Explorer 6.x play nicely. 
    	These fix the double float margin bug.
    */
    * html form.emailform .checks input { 
    	margin-left: 105px;  /* (1/2)((label width) + (label margin)) */
    }
    * html form.emailform .checks label { 
    	margin-left: 210px; /* (label width) + (label margin) */
    	height: 1em; 
    }
    
    
    /*********************************************************************************
    	DO NOT EDIT BELOW THIS LINE
    *********************************************************************************/
    
    
    form.emailform {
    	margin: 0 0 1em;
    }
    
    form.emailform label {
    	/* 
    		A label must precede the form element in the HTML
    		You must keep the top padding for some browsers to keep the label and the form element looking on the same line
    	*/
    	float: left;
    	text-align: left;
    	padding-top: 0.2em;
    	font-weight: bold;
    	font-size: 1em;
    }
    
    form.emailform label:after { 
    	/* 
    		Creates a ":" after LABELs. This only works in some browsers 
    	*/
    	content: ""; 
    }
    
    form.emailform label.long {
    	/*
    		If your label text does not fit in the left-hand side, consider this class
    	*/
    	float: none;
    	display: block;
    	text-align: left;
    }
    
    form.emailform label.long:after {
    	content: "";
    }
    
    
    
    form.emailform input, form.emailform textarea, form.emailform select {
    	/*
    		These items must immediately follow the LABEL item associated with it and followed by a BR (see below).
    		The following width must be 10pixels wider than the width of the LABEL.
    	*/
    	/* The following code messes up the form in safari:
    	
    	
    	display: block;*/
    	
    	display: block;
    	margin-bottom: -0.5em;
    }
    
    
    
    form.emailform select[multiple="multiple"] {
    	/*
    		Mozilla has some weird concept of how to display multiple select boxes.
    		For some reason, display: block; does not affect it.
    		For more information, see https://bugzilla.mozilla.org/show_bug.cgi?id=342531
    		This fixes that problem. DON'T FORGET YOUR BR TAG AFTER SELECT!
    	*/
    	margin-left: 0px;
    }
    form.emailform br { 
    	/* 
    		Always include a BR tag at the end of a line of items -- generally immediately following one of an INPUT, SELECT or TEXTAREA.
    		Within div.checks, include the BR after the LABEL
    	*/
    	clear: left;
    } 
    
    form.emailform input[type="radio"], form.emailform input[type="checkbox"], 
    form.emailform input[type="hidden"] { 
    	/* 
    		Keeps Mozilla browsers (and others) from making the RADIO and CHECKBOXES too wide and/or tall.
    		Also removes unnecessary borders from these browsers (They don't respond as expected) 
    	*/
    	width: auto; 
    	height: 0.8em; 
    	border: 0;
    }
    
    form.emailform input[type="hidden"] {
    	/*
    		Firefox doesn't want to make them actually hidden, so I'll force it.
    	*/
    	display: none;
    }
    
    form.emailform p.desc {
    	/*
    		Use this immediately following an item that needs a longer description than can be handled by the LABEL.
    		The left margin should be the same as INPUT, TEXTAREA and SELECT objects.
    	*/
    	display: block;
    	margin-top: -0.4em;
    	margin-bottom: 1em;
    	font-style: italic;
    	font-size: 0.9em;
    }
    
    
    /* 
    	The following section is for reversing the display of CHECKBOX and RADIO INPUTs.
    	Surround the section of items with <fieldset class="checks"></fieldset> or <div class="checks"></div>.
    	It is highly recommended to use FIELDSET over DIV when there are multiple items.
    	In the section, the INPUT precedes the LABEL and the BR comes last (after the label).
    */
    form.emailform .checks label {
    	/*
    		Overrides for previously defined stuff and changes.
    		Left margin must be 10pixels more than "form.emailform input, form.emailform select" etc.
    	*/
    	float: none;
    	width: auto;
    	clear: none;
    	display: block;
    	text-align: left;
    	height: 20em;
    	padding-top: 0;
    	margin-bottom: -1em;
    }
    
    form.emailform .checks label:after { 
    	/* 
    		Makes the ":" not generated after the LABEL. 
    	*/
    	content: ""; 
    } 
    
    form.emailform .checks input {
    	/*
    		Left margin is the same value as "form.emailform input, form.emailform select" etc.
    	*/
    	float: left;
    	text-align: right;
    	margin-bottom: 0.5em;
    	width: auto;
    }
    
    /* 
    	End reverse checks/radios section
    */
    
    
    /*
    	I found my own IE CSS display bug. I call it the "IE sucks, so it redraws the top border all over the fieldset like a jerk bug."
    */
    * html form.emailform input, * html form.emailform textarea, * html form.emailform select,
    * html form.emailform .checks input, * html form.emailform .checks label, 
    * html form.emailform p.desc {
    	margin-top: 0;
    	margin-bottom: 0;
    }
    * html form.emailform fieldset br {
    	/*
    		Hooray! We have a fix!
    		For some crazy reason, IE lets me style its BR tag.
    	*/
    	line-height: 0.5em;
    	font-size: 0.5em;
    }
    
    input.button {
    	padding-left: 5px;
    	padding-right: 5px;
    	background: url(images/but-bg.gif) no-repeat bottom right;
    	border: 1px solid #808080;
    }


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
  •