Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 2 of 2
  1. #1
    Senior Member
    Join Date
    Apr 2005
    Location
    Hatfield, England
    Posts
    855
    Member #
    9790
    I am having some trouble with styling this form. In firefox it is all but perfect apart from from problem 1. In IE7, i am having some trouble with pixel perfect sizing.

    Problem 1 is that the word Content is at the bottom of my form instead of the top. How do I move it to the top of the box?

    Problem 2 is that in IE7 the size of the box is about 4 pixels off. I need this form to be pixel perfect for the desired effect.

    Link to Picture

    Any help on either of these would be greatly appreciated.

    HTML
    HTML Code:
    	<div class="formleftcolumn">
    		<form action="{$currentpage}" method="post">
    			<p>E-Mail Address <input type="text" name="email" size="55" maxlength="50" /><br />
    			Name/Company <input type="text" name="company" size="55" maxlength="50" /><br />
    			Phone Number <input type="text" name="phonenumber" size="55" maxlength="50" /><br />
    			Skype <input type="text" name="skype" size="55" maxlength="50" /><br />
    			Content <textarea rows="10" name="content" cols="38"></textarea><br />
    			<input class="submitbutton" type="submit" name="sendmail" value="Submit" /></p>
    		</form>	
    	</div>
    CSS
    Code:
    .formleftcolumn {float:left; margin-right:5px;}
    .formleftcolumn p {margin:0px; padding:0px; text-align:right; }
    .formleftcolumn p input {margin:3px 0 0 0; padding:0px;}
    #Form {border:solid 1px #FFF; line-height:23px; padding:10px 0 0 40px; height:310px;}
    input {background-color:#4f4a42; border:1px solid #FFF; color:#FFF; }
    input.submitbutton:hover {background-color:#FFF; border:1px solid #4f4a42; color:#4f4a42; }
    textarea {background-color:#4f4a42; border:1px solid #FFF; color:#FFF; width:352px;}

  2.  

  3. #2
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    First of all, all of the labels for your form fields should be in label elements. Second of all, once you've got that, if you float the label with `Content' in it left, you should get the desired effect. The pixel difference is likely due to the scrollbar. Unfortunately, my only recommendation would be applying an IE-specific style via a conditional comment include.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 02:57 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com