Web Analytics Made Easy -
StatCounter Margin/padding issue - CodingForum

Announcement

Collapse
No announcement yet.

Margin/padding issue

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Margin/padding issue

    Hi, I've just added a contact form to my website but for some reason when I change browsers or change the size it moves to the right as if it has a padding or margin

    see this pictures to see the problem I am getting.

    http://projectclick.co.uk/issue.png

    Here's the url to the website: http://www.projectclick.co.uk/Version3/contact.html

    Please get the full html code from the website, the html code for the contact form is:

    Code:
    <div id="contactFormContainer">
            <div id="contactForm">
            	<div class="loader"></div>
    			<div class="bar"></div>
                <form action="mail.php" class="contactForm" name="cform" method="post">
                        <div class="input_boxes">
                        <p><label for="name">Name</label><span class="name-missing">Please enter your name</span><br />
                        <input id="name" type="text" value="" name="name" /></p>
                        <p><label for="e-mail">E-mail</label><span class="email-missing">Please enter a valid e-mail</span><br />
                        <input id="e-mail" type="text" value="" name="email" /></p>
                        <p><label for="message">Message</label><span class="message-missing">Say something!</span><br />
                        <textarea id="message" rows="" cols="" name="message"></textarea></p>
                     </div>   
                     <input class="submit" type="submit" name="submit" value="Submit Form" onfocus="this.blur()"  />
                </form>
          </div>
          <div class="contact"></div>    
    </div>

    and here's the code to the css

    Code:
    body {background:#fff; font-family:Verdana, Geneva, sans-serif; font-size:12px; line-height:20px; color:#545353;}
    
    	
    /* Positions the contact form so it doesn't interfere with any other content, as well as a z-index above any other elements on the page */	
    #contactFormContainer {
    	position:absolute;
    	left:560px;
    	z-index:1;
    	}
    	
    /* Hides the whole contact form until needed */	
    #contactForm {
    	height:250px;width:758px;
    	background:#333333; 
    	border:1px solid #000;
    	padding:7px 12px; 
    	color:#fff;
    	display:none;
    	}   
    
    /* Loading bar that will appear while the ajax magic is happening */
    .bar{
    	display:none; 
    	background:url(../images/ajax-loader.gif) no-repeat center; 
    	margin-top:100px; 
    	height:40px; width:230px;
    	}
    	
    /* Hides the confirmation message until needed */	
    #messageSent {display:none;}
    
    /* This hides the form validation alert messages until needed */
    #contactForm span { 
    	display:none; 
    	font-size:9px; 
    	line-height:10px; 
    	padding-left:6px; 
    	color:#f5c478;
    	}
    	
    /* Some styling for the contact button */
    #contactFormContainer .contact {
    	height:47px; width:211px;
    	background:url(../images/contact_me.png); 
    	position:absolute; 
    	left:285px; bottom:-44px; 
    	cursor:pointer;
    	}
    			
    /* Hides the darkening layer for the Modal effect. The z-index is necessary for layering purposes, and be sure to keep the positioning/height/width the same */	
    #backgroundPopup{
    	display:none; 
    	position:fixed; 
    	_position:absolute; 
    	height:100%; width:100%; 
    	top:0; left:0;
    	background:#000; 
    	z-index:11;
    	}  
    	
    /* Form styling from here on out. There is nothing in here that you HAVE to use to get this to work */	
    #contactForm textarea, #contactForm input {
    	width:180px; 
    	background:#6d6d6d url(../images/contact_input.png) repeat-x top; 
    	color:#fff; 
    	border:1px solid #8a8a8a; 
    	height:15px; 
    	line-height:14px; 
    	font-size:11px; 
    	padding:2px 2px 0px;
    	}
    #contactForm input {background-position:0px -20px;}
    #contactForm textarea {height:114px; font-family:Verdana, Geneva, sans-serif;}
    #contactForm .submit {
    	border:1px solid #aba8a8; 
    	background:#e5e5e5; 
    	text-transform:uppercase; 
    	color:#4d4d4d; 
    	font-weight:bold; 
    	padding:7px 16px 7px 14px; 
    	height:37px; width:124px; 
    	cursor:pointer; 
    	float:left; 
    	margin-top:196px;
    	}
    #contactForm .submit:active {background:#cacaca; }
    #contactForm label {padding-left:4px; font-weight:bold;}
    #contactForm p {padding-bottom:8px;}
    #contactForm .input_boxes {float:left; width:204px;}

  • #2
    Your page is invalid. 1st validate it on http://validator.w3.org/

    Comment

    Working...
    X