We help IT Professionals succeed at work.

My Css code has broken my form field styles

EGormly
EGormly asked
on
I have a cut pasted css style sheet, some of it I wrote, most I did not.
I have "broken" my pretty form fields.

They use to be nicely spaced and nice looking when I attached this style sheet to an HTML page and added <form> etc...

now the text boxes, drop downs and general text are tiny and ugly inheriting the body settings.
I realize this CSS is a mess but I need to find out what part of this CSS file is causing the problem.


newstyles.css
Comment
Watch Question

LZ1
Top Expert 2011

Commented:
Can we see a live URL? Or some rendered HTML code as well?

Author

Commented:
I can't give you a live URL, but  rendered is below.
I do know that the form fields and text all complies with whats in the body style and not the proper parts setup for form and text fields.

I stripped all div tags and everything else from an html file and I get a proper nice looking table, so I am assuming at this point that somewhere there is a weird overlap? I am not good with CSS so I can't find it.  There is too much in there to replace line by line.

I put the div tags in one at a time and looked for the culprit but wasn't able to.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta name="description" content="">

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />

<link rel="shortcut icon" href="/favicon.ico">

<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<link rel="stylesheet" href="/ui/css/newstyles.css">

<link rel="stylesheet" href="/ui/css/debug.css" />

<script src="js/jquery-1.6.1.min.js" type="text/javascript"></script>

<script src="scripts/jquery.min.js"></script>

<script src="scripts/jquery.cross-slide.min.js"></script>

<!--[if lt IE 9]><script src="/ui/js/lib/html5shiv.js"></script><![endif]-->



		<!-- Start VideoLightBox.com HEAD section -->

		<link rel="stylesheet" href="engine/css/videolightbox.css" type="text/css" />

		<style type="text/css">#videogallery a#videolb{display:none}</style>



			<link rel="stylesheet" type="text/css" href="engine/css/overlay-minimal.css"/>

			<script src="engine/js/jquery.tools.min.js" type="text/javascript"></script>

			<script src="engine/js/swfobject.js" type="text/javascript"></script>

			<!-- make all links with the 'rel' attribute open overlays -->

			<script src="engine/js/videolightbox.js" type="text/javascript"></script>

		<!-- End VideoLightBox.com HEAD section -->



</head>



<body>

<div id="wrap">

  <div id="header">

    <h1 class="logo"><a href="/" title="Home"><img src="/ui/images/logo-white.png" height="50" alt="MyCompany"></a></h1>

    <p class="cart"></p>

  </div>

  <div id="main">

  

    <nav id="nav">

      <ul>

        <li><a href="/products.asp" title="MyCompany Products">Products</a></li>

        <li><a href="/dealers.asp" title="Find a MyCompany Dealer near you">Find a Dealer</a></li>

        <li><a href="/rebatedetail.asp" title="MyCompany Rebates">Rebates</a></li>

         <li><a href="/repairmenu.asp" title="MyCompany Service &amp; Support">Service &amp; Support</a></li>

        <li><a href="/CompanyInfo.asp" title="Information about MyCompany">Company Info</a></li>

        <li><a href="/contactus.asp" title="Contact MyCompany">Contact Us</a></li>

      </ul>

    </nav>

    

    <section id="content">

      <div id="MainPageContainerTopWhiteMargin"> </div>

      <div id="ContentDealer"> 

      <span class="dealer">

               <section id="content">

    <div id="ContentBody"> 

<p class="centerme">

	<h1>Find a Dealer</h1>



			<p>Locate your nearest MyCompany Dealer</p>

	

	

			<form name="form1" method="post" action="/SearchResults.asp" >





	<fieldset>

		

		<legend>Enter Your Complete Address</legend>

		<ol>

			<li>

				<label for="address">Address <span>(Optional)</span></label><br />

				<input name="address" type="text" />

			</li>

			<li>

				<label for="city">City <span>(Optional)</span></label><br />

				<input type="text" name="city">

			</li>

			<li>

				<label for="state">State or Province <span>(Optional)</span></label><br />

				<input name="state" type="text" size="10" maxlength="2" />

			</li>

	

			<li>

				<label for="zip">ZIP Code</label><br />

				<input name="zip" id="zip" type="text" />

				<p class="help">Don't know the ZIP Code? <a href="/search/dealersbystate" title="Find MyCompany Dealers by State">Try searching by State</a></p>

			</li>

			<!--

			<li>

				<label for="Country">Country</label><br />

				<select name="Country" id="Country">

					<option value="USA" selected>USA</option>

					<option value="Ca">Canada</option>

				</select>

			</li>

		-->

		</ol>

	</fieldset>



	<button name="Submit2" type="submit" value="submit">Find Closest MyCompany Dealer</button>



</form>

		</p>    </section>

</span>

       </div>

    </section>





  </div>

</div><div id="footer" class="footer"> <a href="/products.asp" title="MyCompany Products">Products</a> | 

<a href="/dealers.asp" title="Find a MyCompany Dealer near you">Find a Dealer</a> | 

<a href="/rebatedetail.asp" title="MyCompany Rebates">Rebates</a> | 

<a href="/repairmenu.asp" title="MyCompany Service &amp; Support">Service &amp; Support</a> | 

<a href="/CompanyInfo.asp" title="Information about MyCompany">Company Info</a> | 

<a href="/contactus.asp" title="Contact MyCompany">Contact Us</a> </div>

<div id="footer" class="footer2"> Copyright 2000&ndash;12 MyCompany, Inc.</span> 

<span>All Rights Reserved.</div>

</body>

</html>

Open in new window

Top Expert 2011
Commented:
The bad part is, I'm not sure how it's supposed to look.  But the problem does lie in your CSS for sure. I tidied it up a little bit and here's the entire page rendered:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="generator" content=
    "HTML Tidy for Linux/x86 (vers 11 February 2007), see www.w3.org" />
    <meta name="description" content="" />
    <meta name="viewport" content=
    "width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <link rel="shortcut icon" href="/favicon.ico" />
    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
    <link rel="stylesheet" href="/ui/css/newstyles.css" type="text/css" />
    <link rel="stylesheet" href="/ui/css/debug.css" type="text/css" />
	<style>
		html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video
{
	border:0;
	font-size:100%;
	font:inherit;
	vertical-align:baseline;
	margin:0;
	padding:0;
}

html,body
{
	height:100%;
}

#wrap
{
	min-height:100%;
}

#main
{
	overflow:auto;
	padding-bottom:150px;
}

#footer
{
	margin-top:-150px;
	height:150px;
	color:#839097;
	width:100%;
	clear:both;
	padding-left:20px;
	position:relative;
	left:20px;
}

body
{
	line-height:1;
	color:#063842;
	background-color:#FFF;
	font-family:Helvetica, Arial, sans-serif;
	font-size:.625em;
}

body:before
{
	content:"";
	height:100%;
	float:left;
	width:0;
	margin-top:-32767px;
}

img
{
	max-width:100%;
}

.CompanyInfo
{
	color:#063842;
	background-color:#FFF;
	font-family:Helvetica, Arial, sans-serif;
	font-size:1.625em;
}

table
{
	border-collapse:collapse;
	border-spacing:0;
}

caption,th,td
{
	text-align:left;
	font-weight:400;
	vertical-align:middle;
}

q,blockquote
{
	quotes:none;
}

q:before,q:after,blockquote:before,blockquote:after
{
	content:none;
}

#slideshow
{
	width:506px;
	height:298px;
}

.footer
{
	clear:both;
	float:left;
	width:100%;
	font-size:1.6em;
	height:0;
	background-color:#FFF;
	color:#839097;
	margin:0 2.857% 2em 0;
}

#footer p
{
	font-size:1.5em;
	text-align:left;
	text-indent:20px;
	margin:0;
	padding:2em 0;
}

.footer2
{
	clear:both;
	float:left;
	left:30px;
	width:100%;
	font-size:1.5em;
	height:0;
	background-color:#FFF;
	color:#839097;
	text-indent:100px;
}

#nav
{
	font-family:'KlavikaRegularPlain';
	font-weight:400;
	font-style:normal;
	text-rendering:optimizeLegibility;
	text-transform:uppercase;
	text-align:center;
	vertical-align:top;
	float:left;
	clear:both;
	width:100%;
	border-top:1px solid #FFF;
	border-bottom:1px solid #ddd;
	zoom:1;
	filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFE6E6E6', endColorstr='#FFBABABA');
	background-color:#bababa;
	background-image:linear-gradient(#e6e6e6, #bababa);
}

#nav ul
{
	clear:both;
	text-align:center;
	width:100%;
	margin:0;
}

#nav li
{
	float:left;
	font-size:1.7em;
	list-style:none;
	vertical-align:top;
	text-align:center;
}

#nav a
{
	display:block;
	padding:.75em 1em;
}

#nav a:link,#nav a:visited
{
	text-decoration:none;
	color:#839097;
	text-shadow:#eee 0 1px 0;
}

#nav a:hover,#nav a:visited:hover
{
	text-decoration:none;
	color:#FFF;
	text-shadow:#839097 0 -1px 0;
}

#nav a.current,#nav a.current:visited,#nav a.current:hover,#nav a.current:visited:hover
{
	text-decoration:none;
	color:#546670;
	text-shadow:#eee 0 1px 0;
}

#nav2
{
	border-bottom:none;
}

#nav2 li
{
	width:100%;
	font-size:3em;
	border-bottom:1px solid #FFF;
}

#nav2 a
{
	text-align:center;
	padding:.5em 10%;
}

#subnav
{
	font-family:'KlavikaRegularPlain';
	font-weight:400;
	font-style:normal;
	text-rendering:optimizeLegibility;
	float:left;
	width:24.49%;
}

#subnav a:link,#subnav a:visited
{
	color:#FFF;
	background-color:transparent;
}

#subnav ul
{
	background-color:#546670;
	margin:0;
}

#subnav ul li
{
	font-size:1.5em;
	list-style:none;
	border-top:1px solid #ddd;
}

#subnav ul li a
{
	padding:.5em 1em;
}

#subnav ul li ul li
{
	font-size:1em;
	border-top:1px solid #ddd;
}

#subnav ul li ul li a
{
	padding:.5em 1em .5em 2em;
}

#sidebar_two_column_box
{
	width:240px;
	height:140px;
	border:1px solid #000;
	background:#FFF;
	margin:2em 0;
	padding:1em;
}

.drop-shadow
{
	position:relative;
	width:90%;
}

.drop-shadow:before,.drop-shadow:after
{
	content:"";
	position:absolute;
	z-index:-1;
	bottom:15px;
	left:10px;
	width:50%;
	height:20%;
	max-width:300px;
	-webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
	-moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
	box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
	-webkit-transform:rotate(-3deg);
	-moz-transform:rotate(-3deg);
	-o-transform:rotate(-3deg);
	transform:rotate(-3deg);
}

.drop-shadow:after
{
	right:10px;
	left:auto;
	-webkit-transform:rotate(3deg);
	-moz-transform:rotate(3deg);
	-o-transform:rotate(3deg);
	transform:rotate(3deg);
}

.shadow
{
	-moz-box-shadow:3px 3px 4px #000;
	-webkit-box-shadow:3px 3px 4px #000;
	box-shadow:3px 3px 4px #000;
	-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
	filter:progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}

#MainPageContainerTopWhiteMargin
{
	position:relative;
	top:100px;
	left:0;
	width:100%;
	height:20px;
	background-color:#fff;
	padding-top:20px;
	padding-bottom:30px;
	margin:0;
}

#MainPageContainer
{
	position:absolute;
	left:0;
	float:right;
	width:100%;
	height:296px;
	background-color:#5C666A;
	padding-top:25px;
	padding-bottom:25px;
	margin:0;
}

#NoProductMenuBody
{
	position:absolute;
	left:50px;
	float:left;
	width:850px;
	background-color:#FFF;
	margin:0;
}

#MainPageImageBox
{
	position:absolute;
	left:25px;
	float:left;
	width:506px;
	height:296px;
	background-color:#FFF;
	margin:0 20px 0 10px;
}

#MainPageVideoBox
{
	background-color:#5C666A;
	position:absolute;
	left:555px;
	float:left;
	width:272px;
	height:296px;
	background:#5C666A;
	margin:0;
}

#MainPageAddressBar
{
	position:absolute;
	left:0;
	float:right;
	width:100%;
	height:1500px;
	background-color:#5C666A;
	margin:0;
	padding:25px 125px;
}

#MainPageFooterContainer
{
	position:relative;
	left:0;
	top:410px;
	float:left;
	width:100%;
	height:40px;
	background:#fff;
	margin:0;
}

@font-face
{
	font-family:"KlavikaRegularPlain";
	src:url(/ui/webfonts/klaviregpla-webfont.eot?iefix) format('eot'), url(/ui/webfonts/klaviregpla-webfont.woff) format('woff'), url(/ui/webfonts/klaviregpla-webfont.ttf) format('truetype');
}

.pie-element,#nav,.row .image,.dealer,.ui-tabs-nav li a,button,button:hover,button:active
{
	behavior:url("/css/PIE.htc");
	position:relative;
}

#header
{
	vertical-align:middle;
	background-color:#fdb913;
	#headerwrappermax-width:980px;
	text-align:center;
	height:60px;
	color:#839097;
	width:100%;
	clear:both;
	padding-left:20px;
	padding-top:15px;
	position:relative;
	margin:10px 10px 10px 8.041%;
}

#header .wrapper h1.logo
{
	width:60%;
	margin:85em 50%;
}

#header h1.logo
{
	float:left;
	font-size:1.5em;
	width:22.449%;
	margin:10px 10px 10px 8.041%;
}

#header .cart
{
	float:right;
	margin:.8em 2.041% 0 0;
}

#header .cart img
{
	width:32px;
	vertical-align:middle;
}

#header .cart a
{
	color:#FFF;
}

.row
{
	float:left;
	width:47.143%;
	height:8em;
	margin:0 2.857% 2em 0;
}

.row h2
{
	float:right;
	width:75.758%;
	font-size:2em;
	margin:0;
}

.row .image
{
	float:left;
	width:18.182%;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	-o-border-radius:5px;
	-ms-border-radius:5px;
	-khtml-border-radius:5px;
	border-radius:5px;
}

.row a:link .image,.row a:visited .image
{
	background-color:#fdb913;
}

.ui-tabs
{
	zoom:1;
}

.ui-tabs-nav
{
	float:left;
	clear:both;
	width:100%;
	margin:0 0 2em;
}

.ui-tabs-nav li
{
	float:left;
	list-style:none;
	margin:0 1em 0 0;
}

.ui-tabs-nav li a
{
	display:block;
	text-align:center;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	-o-border-radius:5px;
	-ms-border-radius:5px;
	-khtml-border-radius:5px;
	border-radius:5px;
	padding:.25em .5em;
}

.ui-tabs-nav li.ui-tabs-selected a,.ui-tabs-nav li.ui-state-disabled a,.ui-tabs-nav li.ui-state-processing a
{
	cursor:text;
	background-color:#ddd;
}

.ui-tabs-nav li.ui-tabs-selected a
{
	color:#fdb913;
	cursor:pointer;
}

.ui-tabs-hide
{
	position:absolute;
	left:-9999px;
}

#copyrightstatement
{
	color:#839097;
	width:100%;
	clear:both;
	position:relative;
	left:95px;
}

#copyrightstatement p
{
	color:#839097;
	font-size:1.5em;
	text-align:left;
	margin:0;
	padding:2em 0;
}

.copyright2
{
	clear:both;
	float:left;
	width:100%;
	font-size:1.5em;
	height:0;
	background-color:#FFF;
	color:#839097;
	text-indent:80px;
	margin:0 2.857% 2em 0;
}

.copyright
{
	clear:both;
	float:left;
	width:100%;
	font-size:1.5em;
	height:0;
	background-color:#FFF;
	color:#839097;
	margin:0 2.857% 2em 0;
}

.copyright a:hover
{
	color:#F90;
}

.rebate
{
	clear:both;
	float:left;
	width:100%;
	font-size:2.5em;
	height:0;
	background-color:#FFF;
	color:#839097;
	margin:0 2.857% 2em 0;
}

.overview
{
	font-size:125%;
	float:left;
	width:65.714%;
}

p.back
{
	margin:1em 0;
}

p.breadcrumbs
{
	font-size:1.1em;
	color:#839097;
	margin:2em 0 1em;
}

.disclaimer
{
	margin:0 0 2em;
}

.disclaimer p
{
	font-family:Georgia, "Times New Roman", serif;
	font-style:italic;
	margin:0;
}

.catsalescopy
{
	float:left;
	border:0 solid #839097;
	font-size:2em;
	margin:0;
	padding:2em 2%;
}

.dealer
{
	float:left;
	clear:both;
	width:88.571%;
	border:1px solid #839097;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	-o-border-radius:5px;
	-ms-border-radius:5px;
	-khtml-border-radius:5px;
	border-radius:5px;
	margin:0 0 2em;
	padding:2em 2.857%;
}

.dealer h3
{
	font-size:2.5em;
	margin:0 0 .5em;
}

.dealer .location
{
	float:left;
	width:42.857%;
	margin:0 0 2em;
}

.dealer p.maps,.dealer p.distance
{
	float:right;
	width:42.857%;
}

.dealer .dealer-products p
{
	margin:0 0 .5em;
}

.dealer .dealer-products li
{
	font-size:1.3em;
	display:inline-block;
	width:24%;
}

.product
{
	float:left;
	clear:both;
	width:100%;
	vertical-align:middle;
	margin:0 0 4em;
}

.product .thumb
{
	float:left;
	margin:8px;
}

.product p
{
	float:right;
	width:100%;
	margin:1em 0 0;
}

.product-type
{
	border-top:1px solid #839097;
	float:left;
	clear:both;
	width:100%;
	margin:1em 0;
	padding:1em 0 0;
}

.product-type .thumb
{
	float:left;
	width:15.714%;
}

.product-type h4
{
	font-size:2em;
	float:right;
	width:80%;
	margin:.5em 0;
}

.product-type p
{
	float:left;
	width:42.857%;
	margin:0 0 0 4.286%;
}

.product-type .retail
{
	color:#839097;
	text-decoration:line-through;
}

.product-type button
{
	float:right;
	width:31.429%;
	margin:2em 0 0;
}

#product #info
{
	float:left;
	width:65.714%;
}

#product .product-info
{
	float:left;
	clear:both;
	width:100%;
}

#product .product-info h2
{
	font-size:2.5em;
	margin:0 0 .5em;
}

#product .product-info p,#product .product-info li
{
	font-size:1.3em;
}

#product .more-info
{
	float:right;
	width:31.429%;
	margin:6em 0 0;
}

#product .more-info p
{
	font-size:1.3em;
	margin:0 0 .5em;
}

.books .model-number
{
	margin:0 2em 0 0;
}

.compatibility
{
	float:left;
	width:45%;
	margin:0 5% 0 0;
}

.compatibility h3
{
	text-transform:uppercase;
}

.compatibility .yes
{
	color:green;
}

#cart img,#replacement-cart img
{
	max-width:none;
}

#cart button,#replacement-cart button
{
	display:block;
	float:right;
}

#cart .summary td
{
	text-align:right;
	padding:.5em 1em;
}

#cart .subtotal
{
	border-top:4px solid #ddd;
}

#cart .total
{
	border-bottom:4px solid #ddd;
}

#cart .total td
{
	vertical-align:top;
}

#cart .quantity input
{
	width:auto;
	display:inline;
	margin:0 .5em;
}

#replacement-cart .price input,#replacement-cart .add input
{
	width:auto;
}

.mywrapper
{
	min-height:100%;
	height:auto!important;
	font-size:12px;
	margin:0 auto -4em;
}

.myfooter,.mypush
{
	height:4em;
	font-family:Arial, Helvetica, sans-serif;
	font-size:15px;
	font-weight:400;
}

fieldset ol
{
	margin:0 0 1em;
}

fieldset li
{
	width:100%;
	float:left;
	clear:both;
	list-style:none;
	padding:0 0 .5em;
}

legend
{
	display:block;
	float:left;
	clear:both;
	width:100%;
	font-family:'KlavikaRegularPlain';
	font-weight:400;
	font-style:normal;
	text-rendering:optimizeLegibility;
	font-size:2em;
	margin:0 0 1em;
}

input[type=text],input[type=email],input[type=password],textarea
{
	width:78%;
	background-color:#eee;
	border:1px solid;
	outline:0;
	font-family:Helvetica, Arial, sans-serif;
	-webkit-border-radius:5px 5px;
	-moz-border-radius:5px /;
	-o-border-radius:5px / 5px;
	-ms-border-radius:5px / 5px;
	-khtml-border-radius:5px / 5px;
	border-radius:5px / 5px;
	-webkit-appearance:none;
	border-color:#888 #ccc #eee;
	padding:.25em 1%;
}

select
{
	width:80%;
}

button
{
	display:block;
	cursor:pointer;
	border:1px solid #546670;
	-webkit-border-radius:5px 5px;
	-moz-border-radius:5px /;
	-o-border-radius:5px / 5px;
	-ms-border-radius:5px / 5px;
	-khtml-border-radius:5px / 5px;
	border-radius:5px / 5px;
	font-size:1.3em;
	color:#063842;
	text-shadow:#FFF 0 1px 0;
	text-transform:uppercase;
	letter-spacing:1px;
	white-space:nowrap;
	text-align:center;
	zoom:1;
	filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFDDDDDD', endColorstr='#FF839097');
	background-color:#839097;
	background-image:linear-gradient(#dddddd, #839097);
	margin:1em 0;
	padding:.5em 1em;
}

button:hover
{
	text-shadow:#fed05f 0 1px 0;
	zoom:1;
	filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFED05F', endColorstr='#FFFDB913');
	background-color:#fdb913;
	background-image:linear-gradient(#fed05f, #fdb913);
}

button:active
{
	zoom:1;
	filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFDB913', endColorstr='#FFFED05F');
	background-color:#fed05f;
	background-image:linear-gradient(#fdb913, #fed05f);
}

input,select,textarea
{
	color:#063842;
	font-size:1em;
	font-family:Georgia, "Times New Roman", serif;
}

textarea
{
	resize:vertical;
	height:12em;
}

.zn-note,.compatibility .no
{
	color:red;
}

ol,ul,.books li,.lenses li
{
	list-style:none;
}

a img,button:-moz-focus-inner
{
	border:none;
}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,#subnav a,#header h1.logo a
{
	display:block;
}

.footer a:link,.footer a:visited,.footer a:active,.footer2 a:link,.footer2 a:visited
{
	color:#839097;
	text-decoration:none;
}

.footer a:hover,.footer2 a:hover
{
	color:#F90;
	text-decoration:none;
}

.footer2 a:active,.copyright a:link,.copyright a:visited,.copyright a:active
{
	color:#839097;
}

#subnav a:hover,#subnav a:visited:hover,#subnav ul li a.current,#subnav ul li a.current:hover
{
	color:#FFF;
	background-color:#839097;
}

#subnav ul li ul,.row a:hover .image,.row a:visited:hover .image
{
	background-color:#839097;
}

#subnav ul li ul li a:hover,#subnav ul li ul li a:visited:hover,#subnav ul li ul li a.current
{
	color:#FFF;
	background-color:#fdb913;
}

#ContentBody,#ContentDealer
{
	position:relative;
	background-color:#fff;
	width:800px;
	margin:10px 0 0;
	padding:0 0 0 30px;
}

.preview,#product .photo
{
	float:right;
	width:31.429%;
}

.dealer .location p.address,.dealer .location p.phone,.product h2
{
	margin:0;
}

.dealer .location p.website,#product .product-info p
{
	margin:1em 0 0;
}

.dealer .dealer-products,#product
{
	width:100%;
	float:left;
	clear:both;
}

.compatibility-charts,#cart,#replacement-cart
{
	float:left;
	clear:both;
	width:100%;
	margin:2em 0;
}

#cart .item,#replacement-cart tr
{
	border-bottom:1px solid #ddd;
}

#cart .price,#cart .amount,#replacement-cart .price,#replacement-cart .add
{
	text-align:right;
}

@media max-width 640px {
	body
	{
		background:#FFF;
	}
	
	#header .wrapper h1.logo
	{
		width:60%;
		margin:.5em 20%;
	}
	
	#content
	{
		clear:both;
		width:100%;
		margin:0 5%;
		padding:1em 0 4em;
	}
	
	h1
	{
		font-size:5em;
	}
	
	h2
	{
		font-size:1.7em;
	}
	
	#subnav
	{
		clear:both;
		width:100%;
		margin:0;
	}
	
	#footer
	{
		padding:2em 0;
	}
	
	#footer p
	{
		font-size:1.1em;
		text-align:center;
		margin:0 auto;
	}
	
	#footer p span
	{
		display:block;
	}
	
	#nav li
	{
		width:50%;
		font-size:1.2em;
		border-bottom:1px solid #FFF;
	}
	
	#nav a
	{
		text-align:center;
		padding:.5em 5%;
	}
	
	#nav2 li
	{
		width:100%;
		font-size:3em;
		border-bottom:1px solid #FFF;
	}
	
	#nav2 a
	{
		text-align:center;
		padding:.5em 10%;
	}
	
	.row,input[type=text],input[type=email],textarea
	{
		width:100%;
	}
	
	#nav,#nav2
	{
		border-bottom:none;
	}
}

@media min-width 1280px {
	#wrapper
	{
		font-size:120%;
	}
	
	#page
	{
		max-width:1280px;
	}
}


  </style>
    <script src="js/jquery-1.6.1.min.js" type="text/javascript">
</script>
    <script src="scripts/jquery.min.js" type="text/javascript">
</script>
    <script src="scripts/jquery.cross-slide.min.js" type="text/javascript">
</script><!--[if lt IE 9]><script src="/ui/js/lib/html5shiv.js"></script><![endif]-->
    <!-- Start VideoLightBox.com HEAD section -->
    <link rel="stylesheet" href="engine/css/videolightbox.css" type="text/css" />
    <style type="text/css">
/*<![CDATA[*/
    #videogallery a#videolb{display:none}
    /*]]>*/
    </style>
    <link rel="stylesheet" type="text/css" href="engine/css/overlay-minimal.css" />
    <script src="engine/js/jquery.tools.min.js" type="text/javascript">
</script>
    <script src="engine/js/swfobject.js" type="text/javascript">
</script><!-- make all links with the 'rel' attribute open overlays -->

    <script src="engine/js/videolightbox.js" type="text/javascript">
</script><!-- End VideoLightBox.com HEAD section -->

    <title></title>
</head>

<body>
    <div id="wrap">
        <div id="header">
            <h1 class="logo"><a href="/" title="Home"><img src=
            "/ui/images/logo-white.png" height="50" alt="MyCompany" /></a></h1>

            <p class="cart"></p>
        </div>

        <div id="main">
            <ul>
                <li><a href="/products.asp" title="MyCompany Products">Products</a></li>

                <li><a href="/dealers.asp" title="Find a MyCompany Dealer near you">Find
                a Dealer</a></li>

                <li><a href="/rebatedetail.asp" title=
                "MyCompany Rebates">Rebates</a></li>

                <li><a href="/repairmenu.asp" title=
                "MyCompany Service &amp; Support">Service &amp; Support</a></li>

                <li><a href="/CompanyInfo.asp" title=
                "Information about MyCompany">Company Info</a></li>

                <li><a href="/contactus.asp" title="Contact MyCompany">Contact
                Us</a></li>
            </ul>

            <div id="MainPageContainerTopWhiteMargin"></div>

            <div id="ContentDealer">
                <div id="ContentBody">
                    <p class="centerme"></p>

                    <h1><span class="dealer">Find a Dealer</span></h1>

                    <p><span class="dealer">Locate your nearest MyCompany
                    Dealer</span></p>

                    <form name="form1" method="post" action="/SearchResults.asp" id=
                    "form1">
                        <fieldset>
                            <span class="dealer"><legend>Enter Your Complete
                            Address</legend></span>

                            <ol>
                                <li><span class="dealer"><label for="address">Address
                                <span>(Optional)</span></label><br />
                                <input name="address" type="text" /></span></li>

                                <li><label for="city">City
                                <span>(Optional)</span></label><br />
                                <input type="text" name="city" /></li>

                                <li><label for="state">State or Province
                                <span>(Optional)</span></label><br />
                                <input name="state" type="text" size="10" maxlength=
                                "2" /></li>

                                <li>
                                    <label for="zip">ZIP Code</label><br />
                                    <input name="zip" id="zip" type="text" />

                                    <p class="help">Don't know the ZIP Code? <a href=
                                    "/search/dealersbystate" title=
                                    "Find MyCompany Dealers by State">Try searching by
                                    State</a></p>
                                </li><!--

                        <li>

                                <label for="Country">Country</label><br />

                                <select name="Country" id="Country">

                                        <option value="USA" selected>USA</option>

                                        <option value="Ca">Canada</option>

                                </select>

                        </li>

                -->
                            </ol>
                        </fieldset><button name="Submit2" type="submit" value=
                        "submit">Find Closest MyCompany Dealer</button>
                    </form>
                </div>
            </div>
        </div>

        <div id="footer" class="footer">
            <a href="/products.asp" title="MyCompany Products">Products</a> | <a href=
            "/dealers.asp" title="Find a MyCompany Dealer near you">Find a Dealer</a> |
            <a href="/rebatedetail.asp" title="MyCompany Rebates">Rebates</a> | <a href=
            "/repairmenu.asp" title="MyCompany Service &amp; Support">Service &amp;
            Support</a> | <a href="/CompanyInfo.asp" title=
            "Information about MyCompany">Company Info</a> | <a href="/contactus.asp"
            title="Contact MyCompany">Contact Us</a>
        </div>

        <div id="footer" class="footer2">
            Copyright 2000&ndash;12 MyCompany, Inc. <span>All Rights Reserved.</span>
        </div>
    </div>
</body>
</html>

Open in new window

Author

Commented:
sorry for the delay in accepting... thanks for the help.

Explore More ContentExplore courses, solutions, and other research materials related to this topic.