SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2000
    Location
    xyz
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS not working?

    After reading parts of the article "CSS is Easy!" I began editing my existing stylesheet, but unfortunately some of it is not working!

    I want to make all links within the class "textmed" bold, so I added this:
    A.textmed:link { font-weight: bold; }

    No effect (I'm using IE 5.5)

    Also, as you can see below there is a lot of repeating stuff there, so I tried deleting those font-family properties and adding
    * { font-family: Verdana, Arial, Helvetica, sans-serif }
    or
    body { font-family: Verdana, Arial, Helvetica, sans-serif }

    Both did not have any effect in my browser.

    Code:
    <style>
    
    .titlesml   { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 18px; line-height: 28px}
    .title      { font-family: Verdana, Arial, Helvetica, sans-serif; line-height:34pt; font-size: 24px }
    .titlelrg   { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 36px}
    .heading    { font-family: Verdana, Arial, Helvetica, sans-serif; font-weight:bold; font-size:13px; letter-spacing:1px; color: #666633}
    .subheading { font-family: Verdana, Arial, Helvetica, sans-serif; color: #666633; font-weight:bold}
    .textsml    { font-family: Verdana, Arial, Helvetica, sans-serif; font-size:7pt }
    .textmed    { font-family: Verdana, Arial, Helvetica, sans-serif; font-size:12px; line-height:12pt; }
    .textlrg    { font-family: Verdana, Arial, Helvetica, sans-serif; font-size:14px }
    
    A.textmed:link { font-weight: bold; }
    A:link, A:visited, A:active { text-decoration:none; color:#660000; }
    A:hover { text-decoration:underline; color:#CC0000; }
    
    input { background:#DFDFD2; border-style:solid; border-width:1; font-size:7pt }
    textarea { background:#DFDFD2; border-style:solid; border-width:1; font-size:7pt }
    
    .blockquote { text-indent: 10px; }
    
    </style>
    Any ideas?

  2. #2
    SitePoint Wizard iTec's Avatar
    Join Date
    May 2001
    Location
    Sydney, Australia
    Posts
    2,243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    for the link try just using
    A.textmed { font-weight: bold;}

    as for your question regarding the fonts,

    body, p, table, td{font-family: Verdana, Arial, Helvetica, sans-serif;} should get it to apply to your whole document.


    ----slightly offtopic----
    and while your at it, you may want to have a read of this
    http://www.mcu.org.uk/articles/cssaccessproblems.html
    as from what i can see of your css you are making up and not marking up.. just a tip

  3. #3
    SitePoint Zealot
    Join Date
    Feb 2000
    Location
    xyz
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried your first suggestion already, no change unfortunately.

    Your second suggestion didn't work either. When I do that I just get plain Times text...

    You can check this out as an example of the link thingy not working:
    http://www.adventuregamers.com/newsarchives.php

  4. #4
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Firstly, you don't need the <style>...</style> tags in the .css file.
    You just need the css itself.

    Remove those.

    Also...

    The href link to the .css file in your html/php page (newsarchives.php) has an unneccessary period in it.

    Code:
    <link rel="stylesheet" href="./include/main.css" type="text/css">
    ...should be...
    Code:
    <link rel="stylesheet" href="include/main.css" type="text/css">
    Of the two, it is likely that the first is the culprit causing the problem.

    The css itself is fine, but it is not being seen as those <style> tags are preventing the .css file from being read beyond the opening <style> tag
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  5. #5
    SitePoint Zealot
    Join Date
    Feb 2000
    Location
    xyz
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for pointing that out. I fixed both but it didn't do the trick of solving my initial problem.
    Very strange, indeed

  6. #6
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'b be willing to bet that you don't have class="textmed" on each <a> tag. If you want to change all links, redefine the css for a:link. If you want only certain classes the link itself has to be assigned that class.

    <span class="linkage"><a href="#">link</a></span>

    will not work.

    <a class="linkage" href="#">link</a>

    would.

    Sketch
    Aaron Brazell
    Technosailor



  7. #7
    Grumpy Mole Man Skunk's Avatar
    Join Date
    Jan 2001
    Location
    Lawrence, Kansas
    Posts
    2,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just for the record, it's good practise to keep your tags lower case in your CSS declarations, so
    Code:
    A.textmed:link { font-weight: bold; }
    should be written
    Code:
    a.textmed:link { font-weight: bold; }
    I'm pretty sure no modern browsers mind upper case tag names in CSS but it's possible something might not like them in the future.

  8. #8
    SitePoint Zealot
    Join Date
    Feb 2000
    Location
    xyz
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sketch: I'm a little confused. Are you saying that in this situation:

    <p class=textmed>Yap yap yap yap <a href="http://www.link.com">link</a> yap yap yap</p>

    ... the link would not become bold? The link is contained within a textmed class, isn't it? The word "link" shows up as textmed.

    Skunk: thanks for pointing that out. I'm still not completely familiar with official CSS syntax

  9. #9
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    maximar, you read me right. Sory. It's one of those annoying little things about CSS...sorry.

    Aaron
    Aaron Brazell
    Technosailor



  10. #10
    SitePoint Zealot
    Join Date
    Jan 2002
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well oh well, someone got to it first
    InQuE

  11. #11
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I got the email notification though so I know you know too. You can share the credit.

    Aaron
    Aaron Brazell
    Technosailor



  12. #12
    SitePoint Zealot
    Join Date
    Jan 2002
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    um, also you can shorten your work by declaring common preferences for your styles. i always use these two lines, so that i dont have to keep typing things over and over, like your {font-family:Verdana,Arial,Helvetica,Sans-Serif;}, you can just do this:
    Code:
    B,U,I,FONT,DIV,SPAN,TABLE,TR,TH,TD,A,BODY {font-family:Verdana,Arial,Helvetics,Sans-Serif;}
    then, your labeled codes can just be:
    Code:
    .titlesml   { font-size: 18px; line-height: 28px}
    .title      { line-height:34pt; font-size: 24px }
    .titlelrg   { font-size: 36px}
    .heading    { font-weight:bold; font-size:13px; letter-spacing:1px; color: #666633}
    .subheading { color: #666633; font-weight:bold}
    .textsml    { font-size:7pt }
    .textmed    { font-size:12px; line-height:12pt; }
    .textlrg    { font-size:14px }
    InQuE

  13. #13
    will code HTML for food Michel V's Avatar
    Join Date
    Sep 2000
    Location
    Corsica
    Posts
    552
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by maximar
    Sketch: I'm a little confused. Are you saying that in this situation:

    <p class=textmed>Yap yap yap yap <a href="http://www.link.com">link</a> yap yap yap</p>

    ... the link would not become bold? The link is contained within a textmed class, isn't it? The word "link" shows up as textmed.
    Here's what your CSS should look like then:
    Code:
    p.textmed a {
       your styles for link go here
    }
    p.textmed a:hover {
       your styles for hovered link go here
    }
    
    etc
    That's parent-child relationships.
    [blogger: zengun] [blogware contributor: wordpress]

  14. #14
    SitePoint Zealot
    Join Date
    Feb 2000
    Location
    xyz
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    InQuE: I wanted to do that but as I explained, for some reason this didn't work! If I used the * selector or just made body, td, p, etc. etc. in my default font, I'd get a page full of Times New Roman text

    Thanks for the help everyone, btw!

  15. #15
    SitePoint Zealot
    Join Date
    Jan 2002
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    really? hmm, it should have worked because you just predefined every tag that is needed to display fonts. unless you do the paren-child relationship thing, you'll have to actually define all tags, and give them properties.
    InQuE

  16. #16
    SitePoint Zealot
    Join Date
    Feb 2000
    Location
    xyz
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For some reason it works now. I figure I must've made a typo? It's still very strange though!


Bookmarks

Posting Permissions

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