CSS CONTRADICTION

No replies

Mon, 2016-06-06 19:50

resourceinfo

Offline

newbie

Last seen: 4 years 3 weeks ago

Timezone: GMT+1

Joined: 2016-06-06

Posts: 1

Points: 2

Hey Folks,

I really need your help here,

I have a html template am working on. Everything worked on well until i decided to change the contact page to a customized contact page suitable for sending of quotes.

when I view the Php contact form alone on my browser it looks good and perfect but when I insert it in the contact page of the template, it contradicts with the contact page and changes some other things on the page. Kindly see below the code:

<style type="text/css">
body{
	font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif; 
	font-size:12px;
}
p, h1, form, button{border:0; margin:0; padding:0;}
.spacer{clear:both; height:1px;}
/* ----------- My Form ----------- */
.myform{
	margin:0 auto;
	width:400px;
	padding:14px;
}
	/* ----------- basic ----------- */
	#basic{
		border:solid 2px #DEDEDE;	
	}
	#basic h1 {
		font-size:14px;
		font-weight:bold;
		margin-bottom:8px;
	}
	#basic p{
		font-size:11px;
		color:#666666;
		margin-bottom:20px;
		border-bottom:solid 1px #dedede;
		padding-bottom:10px;
	}
	#basic label{
		display:block;
		font-weight:bold;
		text-align:right;
		width:140px;
		float:left;
	}
	#basic .small{
		color:#666666;
		display:block;
		font-size:11px;
		font-weight:normal;
		text-align:right;
		width:140px;
	}
	#basic input{
		float:left;
		width:200px;
		margin:2px 0 30px 10px;
	}
	#basic button{ 
		clear:both;
		margin-left:150px;
		background:#888888;
		color:#FFFFFF;
		border:solid 1px #666666;
		font-size:11px;
		font-weight:bold;
		padding:4px 6px;
	}
 
 
	/* ----------- stylized ----------- */
	#stylized{
		border:solid 2px #b7ddf2;
		background:#ebf4fb;
 
	}
	#stylized h1 {
		font-size:14px;
		font-weight:bold;
		margin-bottom:8px;
	}
	#stylized p{
		font-size:11px;
		color:#666666;
		margin-bottom:20px;
		border-bottom:solid 1px #b7ddf2;
		padding-bottom:10px;
	}
	#stylized label{
		display:block;
		font-weight:bold;
		text-align:right;
		width:140px;
		float:left;
	}
	#stylized .small{
		color:#666666;
		display:block;
		font-size:11px;
		font-weight:normal;
		text-align:right;
		width:140px;
	}
	#stylized input{
		float:left;
		font-size:12px;
		padding:4px 2px;
		border:solid 1px #aacfe4;
		width:200px;
		margin:2px 0 20px 10px;
	}
	#stylized button{ 
		clear:both;
		margin-left:160px;
		width:125px;
		height:31px;
		background:#444;
		text-align:center;
		line-height:31px;
		color:#FFFFFF;
		font-size:11px;
		font-weight:bold;
	}
 
</style>
</head>
 
<body>
 
<div id="stylized" class="myform">
 
<form id="form1" id="form1" action="mail.php" method="POST">
 
    <label>Name
        <span class="small">Add your name</span>
    </label>
<input type="text" name="name">
    <label>Email
        <span class="small">Enter a Valid Email</span>
    </label>
<input type="text" name="email">
    <label>Phone
        <span class="small">Add a Phone Number</span>
    </label>
<input type="text" name="phone">
 
<br />
<br />
 
    <label>Website
        <span class="small">Your Website</span>
    </label>
 <input type="text" name="website">
 
 <label>Budget
		<span class="small">Select Budget</span>
		</label>
<select name="dropdown" size="1">
<option value="Under 50,000">Under 50,000</option>
<option value="Under 100,000">Under 100,000</option>
<option value="Under 150,000">Under 150,000</option>
<option value="Under 250,000">Under 250,000</option>
<option value="Above 250,000">Above 250,000</option>
</select>
<br />
<br />
<br />
 
 <label>Priority  
        <span class="small">Priority Level</span>
    </label>
 
<select name="priority" size="1">
<option value="Low">Low</option>
<option value="Normal">Normal</option>
<option value="High">High</option>
<option value="Emergency">Emergency</option>
</select>
<br />
<br />
<br />
    <label>Type
        <span class="small">Type of Contact</span>
    </label>
<select name="type" size="1">
<option value="update">Website/Graphics</option>
<option value="change">Digital Marketing</option>
<option value="addition">Database Management</option>
<option value="new">Mobile Marketing</option>
<option value="update">Training</option>
<option value="change">Mobile App Development</option>
<option value="addition">System Management</option>
<option value="new">Search Engine Optimization</option>
<option value="new">Others</option>
</select>
<br />
<br />
<br />
 
 
    <label>Message
        <span class="small">Type Your Message</span>
    </label>
<textarea name="message" rows="6" cols="25"></textarea><br />
 
    <button type="submit" value="Send" style="margin-top:15px;">Submit</button>
<div class="spacer"></div>
 
</form>
 
</div> <!-- end of form class -->

The above is for the customized contact page. And the below is for the contact page html

<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>
 
    <!-- Basic Page Needs
  ================================================== -->
	<meta charset="utf-8">
	<title>21st Empire | The Best Website Design Company In Nigeria, Africa,Lagos, System Administration Company In Nigeria | VoIP, Robocall, Graphics Design Company, Digital Marketing Company, Web Consulting Company In Nigeria, Content Marketing Agency In Nigeria, SEO In Nigeria</title>
	<meta name="description" content="Free Responsive Html5 Css3 Templates | zerotheme.com">
	<meta name="author" content="www.zerotheme.com">
 
 
    <!-- Mobile Specific Metas
	================================================== -->
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 
    <!-- CSS
	================================================== -->
  	<link rel="stylesheet" href="css/zerogrid.css">
	<link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" href="css/lightbox.css">
 
 
	<!-- Custom Fonts -->
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
 
 
	<link rel="stylesheet" href="css/menu.css">
	<script src="js/jquery1111.min.js" type="text/javascript"></script>
	<script src="js/script.js"></script>
 
 
	<!--[if lt IE 8]>
       <div style=' clear: both; text-align:center; position: relative;'>
         <a href="http://windows.microsoft.com/en-US/internet-explorer/Items/ie/home?ocid=ie6_countdown_bannercode">
           <img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." />
        </a>
      </div>
    <![endif]-->
    <!--[if lt IE 9]>
		<script src="js/html5.js"></script>
		<script src="js/css3-mediaqueries.js"></script>
	<![endif]-->
	<style type="text/css">
 
}
p, h1, form, button{border:0; margin:0; padding:0;}
.spacer{clear:both; height:1px;}
/* ----------- My Form ----------- */
.myform{
	margin:0 auto;
	width:400px;
	padding:14px;
}
	/* ----------- basic ----------- */
	#basic{
		border:solid 2px #DEDEDE;	
	}
	#basic h1 {
		font-size:14px;
		font-weight:bold;
		margin-bottom:8px;
	}
	#basic p{
		font-size:11px;
		color:#666666;
		margin-bottom:20px;
		border-bottom:solid 1px #dedede;
		padding-bottom:10px;
	}
	#basic label{
		display:block;
		font-weight:bold;
		text-align:right;
		width:140px;
		float:left;
	}
	#basic .small{
		color:#666666;
		display:block;
		font-size:11px;
		font-weight:normal;
		text-align:right;
		width:140px;
	}
	#basic input{
		float:left;
		width:200px;
		margin:2px 0 30px 10px;
	}
	#basic button{ 
		clear:both;
		margin-left:150px;
		background:#888888;
		color:#FFFFFF;
		border:solid 1px #666666;
		font-size:11px;
		font-weight:bold;
		padding:4px 6px;
	}
 
 
	/* ----------- stylized ----------- */
	#stylized{
		border:solid 2px #b7ddf2;
		background:#ebf4fb;
 
	}
	#stylized h1 {
		font-size:14px;
		font-weight:bold;
		margin-bottom:8px;
	}
	#stylized p{
		font-size:11px;
		color:#666666;
		margin-bottom:20px;
		border-bottom:solid 1px #b7ddf2;
		padding-bottom:10px;
	}
	#stylized label{
		display:block;
		font-weight:bold;
		text-align:right;
		width:140px;
		float:left;
	}
	#stylized .small{
		color:#666666;
		display:block;
		font-size:11px;
		font-weight:normal;
		text-align:right;
		width:140px;
	}
	#stylized input{
		float:left;
		font-size:12px;
		padding:4px 2px;
		border:solid 1px #aacfe4;
		width:200px;
		margin:2px 0 20px 10px;
	}
	#stylized button{ 
		clear:both;
		margin-left:160px;
		width:125px;
		height:31px;
		background:#444;
		text-align:center;
		line-height:31px;
		color:#FFFFFF;
		font-size:11px;
		font-weight:bold;
	}
 
</head>
 
<body>
<div class="wrap-body">
 
	<!--////////////////////////////////////Header-->
	<header class="zerogrid">
		<div class="logo"><img src="images/logo.png" alt=""/></div>
		<div id='cssmenu' class="align-center">
			<ul>
			   <li><a href='index.html'><span>Home</span></a></li>
			   <li><a href='portfolio.html'><span>Portfolio</span></a>
				  <ul >
 
					 </li>
 
					 </li>
				  </ul>
			   </li>
			   <li><a href='about.html'><span>About</span></a></li>
			   <li><a href='#'><span>Store</span></a></li>
			   <li class='last active'><a href='contact.html'><span>Contacts</span></a></li>
			</ul>
		</div>
<style type="text/css">
 
 
</style>	
	</header>
 
 
 
		<!--////////////////////////////////////Container-->
		<section id="container">
			<div class="wrap-container">
 
				<div class="zerogrid">
					<div class="contact">
						<h3>Contact Information</h3>
						<div class="row">
							<div class="col-1-3">
								<div class="wrap-col">
									<i class="fa fa-home"></i>
									<h4>Address:</h4>
									<span>Chief J.A Keshinro Shopping Complex, Gedegede, Off Ilaje Bus-stop, Ajah, Lagos, Nigeria</span>
								</div>
							</div>
							<div class="col-1-3">
								<div class="wrap-col">
									<i class="fa fa-phone"></i>
									<h4>Phone:</h4>
									<span>0706-300-9035</span>
								</div>
							</div>
							<div class="col-1-3">
								<div class="wrap-col">
									<i class="fa fa-envelope"></i>
									<h4>Email:</h4>
									<span>info@21stempire.com</span>
								</div>
							</div>
						</div>
						<h3>Send Us A Quote</h3>
 
<div id="stylized" class="myform">
 
<form id="form1" id="form1" action="mail.php" method="POST">
 
    <label>Name
        <span class="small">Add your name</span>
    </label>
<input type="text" name="name">
    <label>Email
        <span class="small">Enter a Valid Email</span>
    </label>
<input type="text" name="email">
    <label>Phone
        <span class="small">Add a Phone Number</span>
    </label>
<input type="text" name="phone">
 
<br />
<br />
 
    <label>Website
        <span class="small">Your Website</span>
    </label>
 <input type="text" name="website">
 
 <label>Budget
		<span class="small">Your Budget</span>
		</label>
 
		<select name="dropdown" size="1">
		<option value="Under ₦50,000">Under ₦50,000</option>
		<option value="Under ₦100,000">Under ₦100,000</option>
		<option value="Under ₦150,000">Under ₦150,000</option>
		<option value="Under ₦250,000">Under ₦250,000</option>
		<option value="Above ₦250,000">Above ₦250,000</option>
		</select>
		<br />
		<br />
<br />
 
    <label>Priority  
        <span class="small">Priority Level</span>
    </label>
 
<select name="priority" size="1">
<option value="Low">Low</option>
<option value="Normal">Normal</option>
<option value="High">High</option>
<option value="Emergency">Emergency</option>
</select>
<br />
<br />
<br />
    <label>Type
        <span class="small">Type of Contact</span>
    </label>
<select name="type" size="1">
<option value="update">Website/Graphics</option>
<option value="change">Digital Marketing</option>
<option value="addition">Database Management</option>
<option value="new">Mobile Marketing</option>
<option value="update">Training</option>
<option value="change">Mobile App Development</option>
<option value="addition">System Management</option>
<option value="new">Search Engine Optimization</option>
<option value="new">Others</option>
</select>
<br />
<br />
<br />
 
 
    <label>Message
        <span class="small">Type Your Message</span>
    </label>
<textarea name="message" rows="6" cols="25"></textarea><br />
 
    <button type="submit" value="Send" style="margin-top:15px;">Submit</button>
<div class="spacer"></div>
 
</form>
 
</div> <!-- end of form class -->
 
						</div>
					</div>
				</div>
 
						</div>
					</div>
				</div>
 
			</div>
 
		</section>
 
	<!--////////////////////////////////////Footer-->
	<footer>
		<div class="zerogrid">
			<div class="wrap-footer">
				<div class="row">
					<div class="col-1-2">
					<div class="wrap-col">
						<span class="phone">CALL US:+234-706-300-9035</span><br/>
						<span>Chief J.A Keshinro Shopping Complex, Gedegede, Off Ilaje Bus-stop, Ajah, Lagos, Nigeria</span><br/>
						<span>Email: </p>
<script type="text/javascript">eval(unescape('%64%6f%63%75%6d%65%6e%74%2e%77%72%69%74%65%28%27%3c%61%20%68%72%65%66%3d%22%6d%61%69%6c%74%6f%3a%69%6e%66%6f%40%32%31%73%74%65%6d%70%69%72%65%2e%63%6f%6d%22%3e%69%6e%66%6f%40%32%31%73%74%65%6d%70%69%72%65%2e%63%6f%6d%3c%2f%61%3e%27%29%3b'))</script><p></span><br/>
						<span>Copyright 2016 - Designed by <a href="http://www.21stempire.com" rel="nofollow" target="_blank">21st Empire</a></span>
					</div>
				</div>
					<div class="col-1-2">
						<div class="wrap-col t-right">
							<ul class="social-buttons">
								<li><a href="#"><i class="fa fa-twitter"></i></a>
								</li>
								<li><a href="#"><i class="fa fa-facebook"></i></a>
								</li>
								<li><a href="#"><i class="fa fa-google-plus"></i></a>
								</li>
								<li><a href="#"><i class="fa fa-linkedin"></i></a>
								</li>
							</ul>
						</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
	</footer>
 
	<!-- Google Map -->
	<script>
		$('.maps').click(function () {
		$('.maps iframe').css("pointer-events", "auto");
	});
 
	$( ".maps" ).mouseleave(function() {
	  $('.maps iframe').css("pointer-events", "none"); 
	});
	</script>
 
</div>
</body>
</html>

Your contributions would be highly appreciated.

Tags:

Beginners CSS Questions

User login

Navigation