...

View Full Version : HTML not recognising new classes



Fued10
07-08-2010, 08:47 AM
Hi Guys,
I'm am having the strangest problem with my css classes, for some reason when I create new classes the HTML does not style the div's at all (see deal-info class). Below is the code, any help will be appreciated.

html


<!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" xml:lang="en" lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<link href="style.css" rel="stylesheet" type="text/css">
<!--[if lte IE 6]>
<script type="text/javascript" src="http://www.whitefriars-canterbury.co.uk/supersleight-min.js"></script>
<![endif]-->

</head>
<body>
<div id="container">
<div id="header">
<div class="logo-a"><img src="images/logo.png"></div>
<div class="logo-b"><img src="images/logo-b.png">
<h2>Its easy... start saving today!</h2>
</div>

<div class="field-container">
<div><label>User Name</label><input type="text" name=""></div>
<div><label>User Email</label><input type="text" name=""></div>
<div><label>Search</label><input type="text" name=""></div>
<p style="text-align:right"><a href="#">Click here to register</a></p>
</div>
</div><!-- end header -->
<div id="left-bar">
<div class="fashion">
<ul>
<li>Fashion
<ul>
<li>test</li>
<li>test</li>
</li>
</ul>
</ul>

</div>

</div><!-- end left-bar -->
<div id="content">
<div id="main-nav">
<ul id="navbar">
<li><a href="#">Home</a></li>
<li><a href="#">Exclusive Offers</a></li>
<li><a href="#" class="current">Most Popular</a></li>
<li><a href="#">New Vouchers</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div><!-- end main-nav -->
<div id="content-area">
<div id="left-panel">

<div class="gap"></div>
<div class="info-box">
<img src="images/contact-img.png">Contact
<div class="right-txt"><img src="images/map-img.png">Map</div>


</div>

<div class="info-box">
test
</div>

</div><!-- end left panel -->
<div id="right-panel">
<div class="company-logo"><img src="i"></div>
<div class="gap"></div>
<div class="text-a">test</div>
<div class="text-b">test >>></div>
<div class="contact"><img src="images/printer-logo.png"> PRINT <img src="images/email-logo.png"> SEND to a friend </div>
<div class="deal-info">30% off TEST stock</div>
</div><!-- end right-panel -->
</div><!-- end content area -->
</div><!-- end content -->
</div><!-- end container -->

</body>

</html>

CSS

@charset "UTF-8";
/* CSS Document */

input,select,textarea,button { font:11px Arial, Helvetica, sans-serif; vertical-align:middle; color:#000; }
input.input-text,select,textarea { background:#fff; border:1px solid #ddd;}
input.input-text,textarea { padding:2px; width:250px}
select {padding:1px;width: 150px; border: 1px #aaa solid; color:#94C947; margin-bottom:5px}
select option { padding-right:10px; }
select.multiselect option {}
textarea { overflow:auto; }
input.radio { margin-right:3px; }
input.checkbox { margin-right:3px; }
input.qty { width:2.5em !important; }
button.button::-moz-focus-inner { padding:0; border:0; } /* FF Fix */
button.button { overflow:visible; width:auto; border:0; padding:0 0 0 12px; background:url(../images/bkg_button.gif) 0 50% no-repeat; cursor:pointer; -webkit-border-fit:lines; /* <- Safari & Google Chrome Fix */ }
button.button span { float:left; padding:0 12px 0 0; background:url(../images/bkg_button.gif) 100% 50% no-repeat; font:bold 12px/21px Arial, Helvetica, sans-serif; text-align:center; white-space:nowrap; color:#fff; }
button.disabled {}
button.disabled span {}
h1{color:#5F5B5F}


html, body, ul, ol, li, p,
h1, h2, h3, h4, h5, h6,
form, fieldset, a {
margin: 0;
padding: 0;
border: 0;
}
p { padding: 5px 0px 5px 0px; }
a { color: #5F5B5F; text-decoration: none; }
a:hover { text-decoration: underline; }
img { border: none; }
hr { height: 0px; border: 0px; border-top: 1px #aaa dotted; margin: 0px 0px 10px 0px; }
/*ul { margin: 0px 0px 0px 0px; padding: 6px 0px 0px 25px; list-style-type: square; }
li { margin: 0px 0px 0px 0px; padding: 6px 0px 6px 0px; font-weight: bold; }*/
body { font-family:Arial, Helvetica, sans-serif; font-size:12px; background-image:url('images/evo-bg.png'); background-repeat:repeat-y; background-position:center; background-color:#000000;_background-color:white }
#newBox {position:absolute; top:15%; right:35%; bottom:25%; left:35%; padding:25px; margin:25px;}
.box {text-align:center;color:#5F5B5F; line-height:20px}
.box img{display: block; margin-left: auto; margin-right: auto}
.box .date{display:inline; font-weight:normal;font-size:22px;}
.box .upperC{text-transform:uppercase;}
.box label{width:90px; float:left; text-align:left; padding-left:63px; }
.box .field-container input{width:180px; }
.box .field-container{margin-top:5px;}
#container{width:980px; margin-left: auto; margin-right: auto;COLOR:#5F5B5F}
#header{padding:10px 20px 10px 20px; height:105px;float:left}
#header input{width:150px; }
#header .logo-a{float:left; margin-top:10px; margin-left:7px; margin-right:50px}
#header .logo-b{float:left; margin-top:8px; margin-right:95px}
#header .logo-b h2{font-weight:normal;margin-top:10px}
#header .field-container{float:right; margin-top:9px}
#header .field-container label{width:90px;float:left ; padding-left:63px; }
#header .field-container > div {padding-bottom:5px}
#header .field-container a{text-align:right;}


#left-bar{width:180px;float:left; margin-top:50px; }
#left-bar .fashion ul{padding:0; margin:0}
#left-bar .fashion ul li {list-style:disc; background-color:#9B620A; color:#FFFFFF; margin:0; padding:0;list-style-position:inside;margin-left:5px; margin-right:5px}
#left-bar .fashion ul li ul{padding:0; margin:0}
#left-bar .fashion ul li ul li{list-style:none; text-indent:20px; color:#B1CAAD; font-weight:normal; background-color:#FFFFFF;margin:0;padding:0 }

#left-bar .beauty ul{padding:0; margin:0}
#left-bar .beauty ul li {list-style:disc; background-color:red; color:#FFFFFF; margin:0; padding:0;list-style-position:inside;margin-left:5px; margin-right:5px}
#left-bar .beauty ul li ul{padding:0; margin:0}
#left-bar .beauty ul li ul li{list-style:none; text-indent:20px; color:#B1CAAD; font-weight:normal; background-color:#FFFFFF;margin:0;padding:0 }

#content{width:610px;float:left;}


#main-nav {}
#navbar {font-family:Arial, Helvetica, sans-serif;font-weight:bold;height:26px;}
#navbar li {list-style:none;display:inline; text-align:center;}
#navbar a {height:15px;width:120px;color:#5F5B5F;text-decoration:none;background:url("images/nav-bg.png") no-repeat;float:left;padding:12px 0px 13px;margin:0 0px; text-transform:uppercase; font-weight:normal;font-size:10px}
#navbar a:hover { background-position:0 -41px;color:#FFFFFF;font-weight:bold}
#navbar .current{ background-position:0 -41px;color:#FFFFFF;font-weight:bold }
#navbar a:active {background-position:0 -90px;color:#b5a46b;}


#content-area{border-color:#FFFFFF #DBDEDA #FFFFFF #DBDEDA;border-style:solid; border-width:2px;width:585px; padding:50px 5px 0px 5px; min-height:630px}
#content-area h1{color:#13A89E;text-align:center;text-transform:uppercase; font-family:"Times New Roman", Times, serif; font-weight:normal; margin-bottom:20px}
#content-area .stores table{width:360px;text-align:center; margin-left:auto;margin-right:auto;}
#content-area .stores td{text-align:center; background-image:url('images/stores-bg.png'); background-repeat:no-repeat;width:68px; height:20px; padding-right:1px}
#content-area .about-us{margin-top:30px; margin-left:30px;margin-right:30px}
#content-area .about-us h2{font-weight:normal;}

#content-area #left-panel{width:220px;margin-left:5px; margin-right:10px;float:left; display:inline;}
#content-area #left-panel .gap{height:30px;}
#content-area #left-panel .info-box {border-color:#DBDEDA;border-style:solid; border-width:6px; padding:3px;margin-top:10px;}
#content-area #left-panel .info-box img{vertical-align:text-bottom; padding-right:5px;}
#content-area #left-panel .info-box .right-txt{float:right; display:inline;}
#content-area #left-panel .info-box textarea{display:block; width:200px; overflow:auto; height:150px;}


#content-area #right-panel {width:347px;float:left; display:inline;}
#content-area #right-panel .company-logo{float:right;display:block;}
#content-area #right-panel .text-a{ color:#13A89E;text-transform:uppercase;}
#content-area #right-panel .text-b{color:#13A89E; font-weight:bold;text-transform:uppercase;display:inline;padding-bottom:20px;}
#content-area #right-panel .gap{height:55px; float:left; display:block;width:180px;}
#content-area #right-panel .contact{float:right; padding-bottom:20px;}
#contact-area #right-panel .contact img{vertical-align:text-bottom;}
#contact-area #right-panel .deal-info{color:#13A89E; font-weight:bold;text-transform:uppercase;display:inline;padding-bottom:20px;}

VIPStephan
07-08-2010, 09:17 AM
That’s the simplest of all issues: #contact-area must read #content-area

Fued10
07-08-2010, 09:53 AM
Thanks mate, I feel really daft right now:o



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum