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
    Regular Coder
    Join Date
    Feb 2004
    Location
    UK, derby
    Posts
    142
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question 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;}

    END

    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
    Senior Coder
    Join Date
    Aug 2002
    Location
    Kansas City, Kansas
    Posts
    1,518
    Thanks
    0
    Thanked 2 Times in 2 Posts
    The reason it doesn't work is that ttext and btext are not valid tags. If you're looking to style a certain area of your page try using id's as a way to refernce objects in your code. Css can only be used to style tags that actually exist in html/xhtml. Until you get into xml, but that's a different story and not what you need at the moment anyway.

    Code:
    p#ttext {
    FONT-SIZE: 16px;
    COLOR: #0066FF;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: bold;
    }
    
    p#btext {
    font-size: 12px;
    line-height: 20pt;
    color: #0066FF;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    }
    Code:
    <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>
    <p id="ttext">This is the title for my CSS Test Page</p>
    <p id="btext">THIS IS WHERE THE BODY OF TEXT WILL BE</p>
    <A HREF="http://www.agreatwebsite.co.uk/">Link</A>
    </body>
    </html>
    Edit:
    After looking at your code again, I noticed that your link styling is not in order and won't work for that reason also. a:hover must come after a:link and a:visited for it to work correctly.

    Code:
    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;
    }
    Last edited by Antoniohawk; 02-05-2004 at 02:20 AM.

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    h1 
      {
      font-size: 16px;
      color: #0066FF;
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-weight: bold;
      }
    
    body
      {
      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;
    }
    Code:
    <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>
      <h1>This is the title for my CSS Test Page</h1>
      <p>THIS IS WHERE THE BODY OF TEXT WILL BE</p>
      <a href="http://www.agreatwebsite.co.uk/">Link</a>
      </body>
    </html>
    This version of your page and CSS take you the next step, using the proper heading tag (h1) identifies the heading of your page while the CSS is there to say how it should be displayed. If you mark up your page using tags that give meaning to their content your pages will do nice things like score better with search engines and the like. Remember, html page markup is there to describe the content of the page while CSS is there to provide the visual control of how the markup looks.

    Also, tags and properties should all be lower-case. Make it a habit now and you won't have to change as much to meet current standards later.

    Yet again, I refer someone to the CSS Zen Garden as a wonderful example of how you can effectively use CSS to do amazing things with a page that has good markup.
    Check out the Forum Search. It's the short path to getting great results from this forum.


  •  

    Posting Permissions

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