Thread: CSS question

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

    Join Date
    Mar 2003
    Posts
    56
    Rep Power
    12

    CSS question


    Hello,

    I have a string embedded within h1 tags (which I would like to keep as is) that has a link for one of the words. The link takes on a different style (as defined in the stylesheet) than the rest of the string. Is there anyway to cancel all styles for that particular link, so that it stays within the same style as the h1 tag? Please keep in mind, that I can't change the default anchor class.

    Any help will be appreciated.

    Thanks.

    -R

    <style>
    a { font : normal 8pt Verdana; color : #000000; text-decoration:underline; }
    a:hover { font : normal 8pt Verdana; color : #993300; text-decoration:none; }
    a.bold { font : bold 8pt Verdana; color : #000000; text-decoration:underline; }
    a:hover.bold { font : bold 8pt Verdana; color : #626B21; text-decoration:none; }
    a.test:link {}
    a.test:visited {}
    a.test:active {}
    a.test:hover {}
    </style>

    <h1>this is a <a href="#" class="test">sample</a> test</h1>
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2002
    Location
    Barcelona
    Posts
    133
    Rep Power
    13
    Code:
    <style>
    a { font : normal 8pt Verdana; color : #000000; text-decoration:underline; }
    a:hover { font : normal 8pt Verdana; color : #993300; text-decoration:none; }
    h1, h1 a, h1 a:hover {font:normal 15pt Verdana; color : green;}
    h1 a {text-decoration:none;}
    </style>
    <h1>this is a <a href="#">sample</a> test</h1>
    <p>this is another, normal <a href="#">link</a> test</p>
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2003
    Posts
    56
    Rep Power
    12
    I would like to keep the h1 as is, without adding a class.

    Any ideas?
  6. #4
  7. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2002
    Location
    Barcelona
    Posts
    133
    Rep Power
    13
    there is NO class in my code
  8. #5
  9. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Posts
    14
    Rep Power
    0
    It should work this way...

    Code:
    h1 a, h1 a:hover {font-size: inherit; font-family: inherit}
    It works fine in Mozilla or Opera, but no version of IE accepts this. Not even IE6 with standards-compliant mode turned on.
    But, in IE5+, it could be done this way:

    Code:
    h1 a, h1 a:hover {
        font-size: expression(document.getElementsByTagName('h1')[0].currentStyle.fontSize);
        font-size: inherit;
        font-family: expression(document.getElementsByTagName('h1')[0].currentStyle.fontFamily);
        font-family: inherit;
    }
    IE: expression() is OK, but 'inherit' is unknown and thus ignored
    Other browsers: expression() is unknown and thus ignored, but inherit is OK.

    I thought that it might cause a JS error when there is no H1 element in the page, but it didn't.
    Last edited by polik; July 22nd, 2003 at 09:28 PM.
  10. #6
  11. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2002
    Location
    Barcelona
    Posts
    133
    Rep Power
    13
    you obviously DIDNT try my code above, it even works for IE and Mozilla and does exactly what royrubin was asking for.
  12. #7
  13. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Posts
    14
    Rep Power
    0
    I thought that he didn't want to change users definition of h1...
    Last edited by polik; July 23rd, 2003 at 09:15 AM.
  14. #8
  15. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2002
    Location
    Barcelona
    Posts
    133
    Rep Power
    13
    "Is there anyway to cancel all styles for that particular link, so that it stays within the same style as the h1 tag?"
    The only way is redefining them to the same style values of h1.
  16. #9
  17. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Posts
    14
    Rep Power
    0
    Yes, that's right. That's what both my and your code does.
    But, your one also defines h1.

IMN logo majestic logo threadwatch logo seochat tools logo