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 1 of 1

Thread: CSS Form error

  1. #1
    New Coder
    Join Date
    Oct 2012
    Posts
    97
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Exclamation CSS Form error

    Hi, I am trying to implement a form with 3 stages into my page. However the first part of the body section seems to interfere with the form, so when I click the next button, the form disappears instead of showing stage 2.

    When I remove the code which I have placed in between ///////////// and ///////////, the form works fine.

    I cannot work out why this is happening, so any help is much appreciated.

    Here is the code for the page

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Welcome to e-aquatics</title>
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <!--[if lt IE 9]>
    <script src="_scripts/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="_css/normalize.css" />
    <link href="_css/main1.css" rel="stylesheet" media="screen, projection">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    
    <link rel="stylesheet" href="_css/CareGuideform.css" />
    
    <script src="_css/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="_css/myscript.js" type="text/javascript"></script>
    
    <!--[if lt IE 8]>
    	<style>
    		legend {
    			display: block;
    			padding: 0;
    			padding-top: 30px;
    			font-weight: bold;
    			font-size: 1.25em;
    			color: #FFD98D;
    			margin: 0 auto;
    		}
    	</style>
    <![endif]-->
    </head>
    <body class="no-js">
    
    ///////////////////////
    
    <header id="pageHeader">
      <hgroup>
        <h1>e-aquatics</h1>
        <h2>Buy and Sell your aquatics here!</h2>
      </hgroup>
    </header>
    <div id="mainNav">
      <h2>Site navigation</h2>
      <ul>
        <li><a href="aboutUs.htm" title="About Us" class="aboutUs">About <em>What is e-aquatics.com?</em></a> </li>
        <li><a href="search.htm" title="Search" class="search">Search <em>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Search items for sale&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</em></a></li>
        <li><a href="care.htm" title="Care Guides" class="care">Care Guides <em>Care Guides for tropical and marine fish</em></a></li>
        <li><a href="contact.htm" title="Contact Us" class="contact">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Contact Us <em>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Send us a message</em></a></li>
      </ul>
    </div>
    
    //////////////////////////////
    
    <section id="content">
      <article id="index">
        <section class="index">
    	
    	<div class="nav">
    	<ul>
    		<li id="activetab" title="Login Info">Step 1</li>
    		<li title="Other Info">Step 2</li>
    		<li title="Comments">Step 3</li>
    	</ul>
    </div>
    
    <form id="myform" class="group" action="thanks.html" method="POST">
    
    <div id="message"></div>
    
    	<fieldset id="login" title="Login Info">
    		<legend>Login Info</legend>
    		<ol>
    			<li>
    				<label for="myname">Name *</label>
    				<input type="text" name="myname" id="myname" title="Please enter your name" autofocus placeholder="Last, First" required />
    			</li>
    			<li>
    				<label for="myemail">Email *</label>
    				<input type="email" name="myemail" id="myemail" required autocomplete="off" />
    			</li>
    			<li>
    				<label for="mypassword">Password</label>
    				<input type="password" name="mypassword" id="mypassword" />
    			</li>
    		</ol>
    		<div class="buttonnav next">next</div>
    	</fieldset>
    	<fieldset id="other" class="hidden" title="Other Info">
    		<legend>Other</legend>
    		<ol>
    			<li>
    				<label for="myurl">Website *</label>
    				<input type="url" name="myurl" id="myurl" required />
    			</li>
    			<li>
    				<label for="mytelephone">Telephone</label>
    				<input type="tel" name="mytelephone" id="mytelephone" />
    			</li>
    			<li class="singleline">
    				<input type="checkbox" id="subscribeitem" name="subscribe" CHECKED value="yes" />
    				<label for="subscribeitem">Subscribe to our mailing list?</label>
    			</li>
    			<li>
    				<label for="reference">How did you hear about us?</label>
    				<select name="reference" id="reference">
    					<option>Choose...</option>
    					<option value="friend">A friend</option>
    					<option value="facebook">Facebook</option>
    					<option value="twitter">Twitter</option>
    				</select>
    			</li>
    		</ol>
    		<div class="buttonnav prev">prev</div>
    		<div class="buttonnav next">next</div>
    	</fieldset>
    	<fieldset id="comments"  class="hidden" title="Comments">
    	<legend>Comments</legend>
    		<ol>
    			<li>
    				<div class="grouphead">Request Type</div>
    				<ol>
    					<li>
    						<input type="radio" name="requesttype" value="question" id="questionitem" />
    						<label for="questionitem">Question</label>
    					</li>
    					<li>
    						<input type="radio" name="requesttype" value="comment" id="commentitem" />
    						<label for="commentitem">Comment</label>
    					</li>
    				</ol>
    			</li>
    			<li>
    				<label for="mycomments">Comment</label>
    				<textarea name="mycomments" id="mycomments"></textarea>
    			</li>
    		</ol>
    		<div class="buttonnav prev">prev</div>
    		<button type="submit">send</button>
    	</fieldset>
    </form>
        </section>
      </article>
      <aside>
        <nav id="archives">
          <h2>Navigation</h2>
          <ul>
            <li><a href="index.html" title="home">Home</a></li>
            <li><a href="register.htm" title="register">Register</a></li>
            <li><a href="search.htm" title="search">Search</a></li>
            <li><a href="careguides.htm" title="guides">Care Guides</a></li>
            <li><a href="wanted.htm" title="wanted">Wanted</a></li>
            <li><a href="contact.htm" title="contact">Contact</a></li>
            <li><a href="faq.htm" title="faq">FAQ</a></li>
            <li><a href="about.htm" title="about">About</a></li>
            <li><a href="suggestion.htm" title="suggestion">What can you do to help?</a></li>
            
          </ul>
        </nav>
        <section class="ad1">
         
        </section>
        <section class="ad2">
       
        </section>
      </aside>
    </section>
    <footer id="pageFooter">
      <form action="http://e-aquatics.com" method="post" class="search-form">
        <label for="search">Looking for something?</label>
        <input type="search" placeholder="Search" title="Search" class="q" name="search" id="search">
        <input type="submit" class="submit" value="Go" name="submit">
      </form>
      <p><a href="http://www.twitter.com/a-aquatics">Follow us on twitter</a></p>
      <p class="notice">&copy; 2013 e-aquatics.com</p>
    </footer>
    </body>
    </html>
    This is the css for the form

    Code:
    form * {
    	background: transparent;
    }
    
    input[type=text],input[type=password],input[type=submit],input[type=email],input[type=url],input[type=tel],input[type=number],input[type=datetime],textarea,button, select {
    	-webkit-appearance: none;
    	-moz-appearance: none;
    	border: none;
    	background: white;
    	-webkit-border-radius: 0;
    	-moz-border-radius: 0;
    	border-radius: 0;
    	padding: 5px;
    	margin: 0;
    	margin-bottom: 10px;
    }
    
    .group:before, .group:after { content: "\0020"; display: block; height: 0; overflow: hidden; }  
    .group:after { clear: both; }  
    .group { zoom: 1; }  
    
    
    #myform {
    	font: normal .8em/1em Arial, Helvetica, Geneva, sans-serif;
    	width: 80%;
    	margin: 0 auto;
    	max-width: 500px;
    	background: transparent;
    
    	-webkit-border-radius: 10px;
    	-moz-border-radius: 10px;
    	border-radius: 10px;
    
    
    	-webkit-box-shadow: 10px 10px 20px #20242C;
    	-moz-box-shadow: 10px 10px 20px #20242C;
    	box-shadow: 10px 10px 20px #20242C;
    }
    
    #myform fieldset {
    	border: none;
    	margin: 0;
    	padding: 0;
    }
    
    #myform fieldset:before {
    	content:attr(title);
    	display: block;
    	padding: 0;
    	padding: 20px 10px 3px 10px;
    	font-weight: bold;
    	font-size: 1.25em;
    	color: #777;
    	margin: 0 auto;
    	text-shadow: 1px 1px 1px #FFF;
    }
      
    #myform legend {
    	display: none;
    }
    
    
    #myform ol {
    	margin: 0px;
    	padding: 0px;
    }
     
    #myform ol li {
    	position: relative;
    	list-style: none;
    	padding: 8px;
    	border-top: 1px solid #EEE;
    	border-bottom: 1px solid #888;
    }
    
    #myform ol li:first-child {
    	border-top:none;
    }
    
    #myform ol li:last-child {
    	border-bottom:none;
    }
    
    #myform ol li ol li {
    	padding-bottom: 0;
    	display: inline;
    	padding: 0px;
    	border-top: none;
    	border-bottom: none;
    }
    
    #myform ol li ol li label {
    	font-weight: normal;
    	display: inline;
    	cursor: pointer
    }
    
    #myform ol li.singleline label {
    	font-weight: normal;
    	display: inline;
    }
    
    #myform ol li label, .grouphead {
    	font-weight: bold;
    	display: block;
    	margin-bottom: 5px;
    	color: #454D4D;
    	text-shadow: 1px 1px 1px #FFF;
    	padding-left: 5px;
    }
    
    #myform ol li input, #myform textarea {
    	display: block;
    	width: 96%;
    	padding: 5px;
    	margin: 0 auto;	
    	outline: none;
    	border: 1px solid #999;
    
    	background: #CCCCCC;
    	background: -webkit-linear-gradient(#FFFFFF,#DDDDDD) no-repeat;
    	background: -moz-linear-gradient(#FFFFFF,#BBBBBB) no-repeat;
    	background: -o-linear-gradient(#FFFFFF,#BBBBBB) no-repeat;
    	background: -ms-linear-gradient(#FFFFFF,#BBBBBB) no-repeat;
    	background: linear-gradient(#FFFFFF,#BBBBBB) no-repeat;
    	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#BBBBBB',GradientType=0 );
    
    	-webkit-border-radius: 5px;
    	-moz-border-radius: 5px;
    	border-radius: 5px;
    }
    
    #myform ol li ol li input {
    	width: auto;
    	display: inline;
    }
    
    #myform ol li input[type="checkbox"] {
    	width: auto;
    	display: inline;
    }
    
    #myform textarea {
    	height: 75px;
    }
    
    #myform ol li select {
    	width: 200px;
    	width: 50%;
    	min-width: 100px;	
    	color: #EEE;
    	font-weight: bold;
    	border: 0;
    
    	background: #93481A;
    	background: -webkit-linear-gradient(#93481A,#6D2F0E);
    	background: -moz-linear-gradient(#93481A,#6D2F0E);
    	background: -o-linear-gradient(#93481A,#6D2F0E);
    	background: -ms-linear-gradient(#93481A,#6D2F0E);
    	background: linear-gradient(#93481A,#6D2F0E);
    	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#93481A', endColorstr='#6D2F0E',GradientType=0 );
    
    	-webkit-border-radius: 8px;
    	-moz-border-radius: 8px;
    	border-radius: 8px;
    }
    
    #myform button, #myform .buttonnav {
    	width: 100px;
    	width: 20%;
    	min-width: 100px;
     	height: 24px;
    	float: right;
    	padding: 0;
    	margin-right: 10px;
    	margin-top: 5px;
    	border: 0;
    	color:#FFF;
    	font-weight: bold;
    	cursor: pointer;
    	
    	background: #466E82;
    	background: url(arrows.png) no-repeat right top, #466E82;
    	background: url(arrows.png) no-repeat right top, -webkit-linear-gradient(#466E82,#2C4552);
    	background: url(arrows.png) no-repeat right top, -moz-linear-gradient(#466E82,#2C4552);
    	background: url(arrows.png) no-repeat right top, -ms-linear-gradient(#466E82,#2C4552);
    	background: url(arrows.png) no-repeat right top, -o-linear-gradient(#466E82,#2C4552);
    	background: url(arrows.png) no-repeat right top, linear-gradient(#466E82,#2C4552);
    	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#466E82', endColorstr='#2C4552',GradientType=0 );
    	
    
    	-webkit-border-radius: 8px;
    	-moz-border-radius: 8px;
    	border-radius: 8px;
    }
    
    #myform button:hover, #myform .buttonnav:hover {
    	background: url(arrows.png) no-repeat right top, #93481A;
    	background: url(arrows.png) no-repeat right top, -webkit-linear-gradient(#93481A,#6D2F0E);
    	background: url(arrows.png) no-repeat right top, -moz-linear-gradient(#93481A,#6D2F0E);
    	background: url(arrows.png) no-repeat right top, -ms-linear-gradient(#93481A,#6D2F0E);
    	background: url(arrows.png) no-repeat right top, -o-linear-gradient(#93481A,#6D2F0E);
    	background: url(arrows.png) no-repeat right top, linear-gradient(#93481A,#6D2F0E);
    	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#93481A', endColorstr='#6D2F0E',GradientType=0 );
    }
    
     #myform .buttonnav {
    	display:inline-block;
     	height: 19px;
     	padding-top: 5px;
     	text-align: center;
     	margin-bottom: 10px;
    
    	zoom: 1;
    	*display:inline;
    }
    
    
     #myform .buttonnav.prev {
      	margin-left: 10px;
     	float: none;
    
    	background: url(arrows.png) no-repeat left bottom, #466E82;
    	background: url(arrows.png) no-repeat left bottom, -webkit-gradient(linear, 0 0, 0 100%, from(#466E82) to(#2C4552));
    	background: url(arrows.png) no-repeat left bottom, -webkit-linear-gradient(#466E82,#2C4552);
    	background: url(arrows.png) no-repeat left bottom, -moz-linear-gradient(#466E82,#2C4552);
    	background: url(arrows.png) no-repeat left bottom, -ms-linear-gradient(#466E82,#2C4552);
    	background: url(arrows.png) no-repeat left bottom, -o-linear-gradient(#466E82,#2C4552);
    	background: url(arrows.png) no-repeat left bottom, linear-gradient(#466E82,#2C4552);
    	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#93481A', endColorstr='#6D2F0E',GradientType=0 );
    }
    
    
     #myform .buttonnav.prev:hover {
     	margin-left: 10px;
     	float: none;
    
    	background: url(arrows.png) no-repeat left bottom, #93481A;
    	background: url(arrows.png) no-repeat left bottom, -webkit-linear-gradient(#93481A,#6D2F0E);
    	background: url(arrows.png) no-repeat left bottom, -moz-linear-gradient(#93481A,#6D2F0E);
    	background: url(arrows.png) no-repeat left bottom, -ms-linear-gradient(#93481A,#6D2F0E);
    	background: url(arrows.png) no-repeat left bottom, -o-linear-gradient(#93481A,#6D2F0E);
    	background: url(arrows.png) no-repeat left bottom, linear-gradient(#93481A,#6D2F0E);
    }
    
    
    .hidden {
    	display: none;
    }
    
    .nav ul {
    	display: block;
    	width: 80%;
    	margin: 0 auto;
    	margin-top: 50px;
    	max-width: 500px;
    	padding: 0;
    	padding-left: 40px;
    }
    
    .nav li {
    	list-style: none;
    	display: inline-block;
    	padding: 5px 10px;
    	margin-right: 5px;
    	color: #FFF;
    	font-size: .9em;
    	background: #93481A;
    	
    	-webkit-border-radius: 10px 10px 0 0;
    	-moz-border-radius:  10px 10px 0 0;
    	border-radius:  10px 10px 0 0;
    	
    	-webkit-box-shadow: inset 0 -3px 4px #6E3614;
    	-moz-box-shadow: inset 0 -3px 4px #6E3614;
    	box-shadow: inset 0 -3px 4px #6E3614;
    	
    	cursor: pointer;
    	
    	zoom: 1;
    	*display:inline;
    
    }
    
    .nav li#activetab {
    	background: #466E82;
    	font-weight: bold;
    	color: #FFF;
    
    	-webkit-box-shadow: none;
    	-moz-box-shadow: none;
    	box-shadow: none;
    }
    
    @media only screen and (max-device-width: 480px) {
    
    	.nav ul {
    		margin-top: 5px;
    	}
    
    }
    
    #thanks {
    	font: normal .8em/1em Arial, Helvetica, Geneva, sans-serif;
    
    	background: url(greytexture.jpg) #DDD;
    
    	-webkit-border-radius: 10px;
    	-moz-border-radius: 10px;
    	border-radius: 10px;
    
    	width: 80%;
    	margin: 0 auto;
    	max-width: 500px;
    	-webkit-box-shadow: 10px 10px 20px #20242C;
    	padding: 20px;
    }
    
    #thanks h2 {
    	color: #a3643d;
    }
    
    .message {
    	position: relative;
    	top: 15px;
    	width: 300px;
    	margin: 0 auto;
    	margin-bottom: 5px;
    	color: #FFF;
    	padding: 5px;
    	text-align: center;
    
    	-webkit-border-radius: 10px;
    	-moz-border-radius: 10px;
    	border-radius: 10px;
    	background-color: #466e82;
    }
    
    .alert {
    	position: absolute;
    	right: 15px;
    	top: 28px;
    	color: #FFF;
    	padding: 5px 10px;
    	text-align:center;
    
    	-webkit-border-radius: 10px;
    	-moz-border-radius: 10px;
    	border-radius: 10px;
    	background-color: #93481a;
    	
    }
    I have attatched the main1.css file which is the stylesheet for the page.


    Please help!
    Attached Files Attached Files


 

Tags for this Thread

Posting Permissions

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