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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    HTML not recognising new classes

    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


    Code:
    <!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
    Code:
    @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;}

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,919
    Thanks
    6
    Thanked 1,040 Times in 1,013 Posts
    That’s the simplest of all issues: #contact-area must read #content-area

  • #3
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks mate, I feel really daft right now


  •  

    Posting Permissions

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