#1
  1. Getting better 1 line @ a time
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Feb 2004
    Location
    Sheffield
    Posts
    1,013
    Rep Power
    33

    CSS not working. (includes code)


    HI

    Could someone take a look at this code. I am using dreamweaver, but that shouldn't matter as i have written most of this myself. The only bit that works is that the text "LINK" appears as blue, like it should everything else is in the wrong colour, font, size, etc.

    However the text appears how it should in dreamweaver, but not in IE or Netscape?

    its only a sample of my code, so its not too long.

    Ideas?

    Thanks in advance.


    This is my CSS code:-

    ttext {
    FONT-SIZE: 16px;
    COLOR: #0066FF;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: bold;
    }

    btext {
    FONT-SIZE: 12px; line-height: 20pt;
    COLOR: #0066FF;
    font-family: Verdana, Arial, Helvetica, sans-serif;}

    A:link { text-decoration: none;
    COLOR: #0066FF;}
    A:active { text-decoration: none;
    COLOR: #0066FF;}
    A:hover { text-decoration: underline;
    COLOR: #0066FF;}
    A:visited { text-decoration: none;
    COLOR: #0066FF;}


    This is my HTML:-

    <html>
    <head>

    <title>CSS_TEST</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link href="CSS_TEST.css" rel="stylesheet" type="text/css">
    </head>

    <body>
    <ttext>This is the title for my CSS Test Page</ttext>
    <P></P>
    <btext>
    THIS IS WHERE THE BODY OF TEXT WILL BE
    </btext>
    <P></P>
    <A HREF="http://www.agreatwebsite.co.uk/">Link</A>
    </body>
    </html>
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Posts
    152
    Rep Power
    11
    A few things.

    Is the name of the file all capitalized, as mentioned in the link tag?

    Also, you need to use a . or # in the stylesheet. You can only leave it in in pre-bult tags.

    . = class (reuseable)
    # = div (useable once)

    then in the html you would call them

    <div class="btext"> ... </div>
    or <div id="btext"> ... </div>

    So, if we redid your code properly:

    Code:
    .ttext {
    FONT-SIZE: 16px;
    COLOR: #0066FF;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: bold;
    }
    
    .btext {
    FONT-SIZE: 12px; line-height: 20pt;
    COLOR: #0066FF;
    font-family: Verdana, Arial, Helvetica, sans-serif;}
    and then:

    Code:
    <body>
    <div class="ttext">This is the title for my CSS Test Page</div>
    <P></P>
    <div class="btext">
    THIS IS WHERE THE BODY OF TEXT WILL BE
    </div>
    <P></P>
    <A HREF="http://www.agreatwebsite.co.uk/">Link</A>
    </body>
    I'd do everything in lowercase in case you want valid xhtml later. =)

    does that help?
  4. #3
  5. |<.+#f@#+.&.|
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    3,009
    Rep Power
    1224
    actually you should use a heading tag for headings, ie h1, h2 etc.
    here you can use the h1-tag, you can use a class on it but usually a document only should have one h1-element

    don't use empty p-elements to create space use margin in css.

    body can only have block-level elements as childs, so place a p-tag or a div around the link at the bottom

    remember to use the correct order of the link psuedo classes
    :link
    :visited
    :hover
    :active

    Code:
    css:
    h1 {
    FONT-SIZE: 16px;
    COLOR: #0066FF;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: bold;
    }
    
    .btext p {
    FONT-SIZE: 12px; line-height: 20pt;
    COLOR: #0066FF;
    font-family: Verdana, Arial, Helvetica, sans-serif;}
    
    A:link { text-decoration: none;
    COLOR: #0066FF;}
    A:visited { text-decoration: none;
    COLOR: #0066FF;} 
    A:hover { text-decoration: underline;
    COLOR: #0066FF;}
    A:active { text-decoration: none;
    COLOR: #0066FF;}
    
    html:
    <body>
    <h1>This is the title for my CSS Test Page</h1>
    
    <div class="btext">
    	<p>THIS IS WHERE THE BODY OF TEXT WILL BE</p>
    </div>
    
    <p>
    <a href="http://www.agreatwebsite.co.uk/">Link</A>
    </p>
    </body>

IMN logo majestic logo threadwatch logo seochat tools logo