#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2004
    Posts
    24
    Rep Power
    0

    IS this a simple syntax error in my CSS code?


    Hi,

    I'm trying to use CSS and php includes to simplify my website admin. What I'm trying to do is create a banner area, a left column and a right column. Each section then calls another php page. I will eventually let the right column have the correct content instead of calling another page.

    My problem is that none of the basic formatting is being applied to my content. The menu.htm page in bold is also calling the style.css as is the c_index.php.

    I have tried seperating the layout CSS and the formating CSS but it did not make a difference. When I view both menu.htm and c_index.php in seperate windows they are affected by changes in the style.css!

    Would somebody be kind enough to explain where the error is?

    Here is my code:
    TEST PAGE

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title>Planet Phillip</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    
    <body>
    
    <div id="banner"><?php include "header.php";?></div>
    <div id="leftcontent"><?php include "menu.htm";?></div>
    <div id="centercontent"><?php include "c_index.php";?></div>
    
    </body>
    </html>
    STYLE.CSS
    Code:
    a:active     { font-family: Verdana; color: #003300; font-size: 10pt; style="text-decoration none" }
    
    a:link       { font-family: Verdana; color: #003300; font-size: 10pt; style="text-decoration none" }
    
    a:visited    { font-family: Verdana; color: #003300; font-size: 10pt; style="text-decoration none" }
    
    a:hover 	 { color:#0000FF; text-decoration }
    
    .hline       { height: 1; color: #003300; text-align: left; margin-top: -6; margin-left: 36; margin-bottom:0 }
    
    .date        { font-family: Verdana; font-size: 10pt; font-weight: bold; text-align: left; margin-top: 0; margin-left: 36; margin-bottom: 0 }
    
    .project     { font-family: Verdana; font-size: 10pt; margin-left:60; font-weight: bold; margin-top:12; margin-bottom:2 }
    
    .newsitem    { font-family: Verdana; font-size: 10pt;font-weight: bold; margin-left:48; margin-right:0; margin-top:12; margin-bottom:8 font-style:italic }
    
    .newstext    { font-family: Verdana; font-size: 10pt; text-align: justify; margin-left: 60; margin-top: 0; margin-bottom: 6 }
         
    .posted      { font-family: Verdana; font-size: 10pt; text-align: right; margin-top:8; margin-bottom:30 }
    
    .listtext    { font-family: Verdana; font-size: 10pt; text-align: left; margin-left: 60; margin-top: 0; margin-bottom: 6 }
    
    .tabletext   { font-family: Verdana; font-size: 10pt; text-align: justify }
    
    .listsitem   { font-family: Verdana; font-size: 10pt;font-weight: bold; margin-left:48; margin-right:0; margin-top:12; margin-bottom:-12; font-style:italic }
    
    .Mheader     { font-family: Verdana; font-size: 10pt; font-weight: bold; text-align: right; margin-top: 0; margin-bottom: -18 }
    
    .Mlink       { font-family: Verdana; color: #003300; font-size: 16pt; text-decoration: none; text-align: right; margin-bottom: 18 }
    
    #leftcontent {
    		position: absolute;
    		left:0px;
    		top:150pt;
    		width:120pt;
    				}
    
    	#centercontent {
    		margin-top: 50pt;
       		margin-left: 150pt;
       		
    		 				}
    	
    	#banner { margin-left: 60pt; margin-top: 30pt;}
  2. #2
  3. Resident DJ
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2001
    Posts
    283
    Rep Power
    14

    Post


    2 things:

    text-decoration:none;

    not style="text-decoration none"

    also missing a semi-colin here -

    margin-bottom:8 font-style:italic .

    should be:

    margin-bottom:8; font-style:italic;

    you should only have to call the style sheet once for the includes. that's the beauty of linking from the outside and when rendered from a browser standpoint it's all one page. not 3 or 4 or however many.

    stylesheets also go with the first instance of a id or class defined. not the latter (i'm 99% certain on this so you'd better read up on your own too ) this is why the linked stylesheet takes predominance.

    get rid of them on the included pages (unless they are different styles). also make sure after every attribute defined you had a " ; " even the last one. it's just good practice.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2004
    Posts
    24
    Rep Power
    0
    Hi,
    Thanks for replying.

    The no text decoration just relates to the underline in a hyperlink.

    I removed the link to the CSS in the pages that are "included" but that did not make a difference, also if that page is ever called directly all formating will be lost.

    Thanks also for highlight my typo.

    TIA
    Phillip
    Last edited by planetphillip; March 5th, 2004 at 10:58 AM.
  6. #4
  7. Resident DJ
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2001
    Posts
    283
    Rep Power
    14
    Originally Posted by planetphillip
    The no text decoraction just relates to the underline in a hyperlink.
    i know what text-decoration:none; does.

    I was telling you that your syntax is wrong. it would also be wrong if you wrote that style as-is inside an element:

    ie: <div style="text-decoration none"> would still be incorrect

    correct would be:

    a:link {font-family: Verdana; color: #003300; font-size: 10pt; text-decoration:none;}
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2004
    Posts
    24
    Rep Power
    0
    Originally Posted by ajax
    i know what text-decoration:none; does.

    I was telling you that your syntax is wrong. it would also be wrong if you wrote that style as-is inside an element:

    ie: <div style="text-decoration none"> would still be incorrect

    correct would be:

    a:link {font-family: Verdana; color: #003300; font-size: 10pt; text-decoration:none;}

    OK Thanks.

IMN logo majestic logo threadwatch logo seochat tools logo