Results 1 to 4 of 4

Thread: overriding css values

  1. #1
    Join Date
    Oct 2006
    Posts
    33
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default overriding css values

    If i put this style for <a> then it also gets applied to <a><img></a>
    Anyways it can be prevented ?

    Code:
    #content a:hover{
    text-decoration:none;
    padding-bottom:2px;
    background:url(images/flash2.gif) bottom left repeat-x; /* Delete this line to remove the flashing underline for regular links */
    }
    HTML Code:
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="test.css" />
    </head>
    <body>
    <div id="content">
    <a href="Mylink">My Link</a>
    <a href="mylink.html"><img src="images/vcss.png" /></a>
    </div>
    </body>
    </html>
    I tried with adding this as well.
    Code:
    #content img:hover{
    text-decoration:none;
    background:none;
    }

  2. #2
    Join Date
    Dec 2004
    Location
    UK
    Posts
    2,358
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jigarshah View Post
    If i put this style for <a> then it also gets applied to <a><img></a>
    Anyways it can be prevented ?
    A selector cannot be made to discern between an anchor that contains an img element and one that does not. That is, one cannot say, "apply these declarations to an anchor only if it doesn't contain an image". At best, you could add a class attribute to the anchors with or without an image child element, though an alternative would be to add span elements to the image-less anchors and add the background to that, rather than the anchor itself. Neither is particularly pleasant.

    Mike

  3. #3
    Join Date
    Oct 2006
    Posts
    33
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by mwinter View Post
    A selector cannot be made to discern between an anchor that contains an img element and one that does not. That is, one cannot say, "apply these declarations to an anchor only if it doesn't contain an image". At best, you could add a class attribute to the anchors with or without an image child element, though an alternative would be to add span elements to the image-less anchors and add the background to that, rather than the anchor itself. Neither is particularly pleasant.

    Mike
    Thanks for your help. Can you show me sample for both. I m not tht good at CSS

  4. #4
    Join Date
    Dec 2004
    Location
    UK
    Posts
    2,358
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jigarshah View Post
    Quote Originally Posted by mwinter View Post
    At best, you could add a class attribute to the anchors with or without an image child element, though an alternative would be to add span elements to the image-less anchors and add the background to that, rather than the anchor itself.
    Thanks for your help. Can you show me sample for both. I m not tht good at CSS
    The class attribute route:

    Code:
    #content a.no-image:hover {
        text-decoration: none;
        padding-bottom: 2px;
        background: url(images/flash2.gif) bottom left repeat-x;
    }
    HTML Code:
    <a class="no-image" href="...">...</a>
    <a href="..."><img alt="..." src="..."></a>
    Three notes, here:

    1. Choose a better, more meaningful class name than 'no-image', if possible. I don't know exactly what you're marking-up, so that choice will have to be yours.
    2. If you use a background image, it is often a good idea to specify a background colour, too. Disable images and ensure that the foreground content can still be read easily without the background image. If it cannot, add a suitable colour.
    3. A foreground colour (color property) should be paired with any background-related declaration that specifies an image or colour. Relying on defaults can lead to clashes should a user have a different default scheme.

    The span child approach:

    Code:
    #content a:hover span {
        text-decoration: none;
        padding-bottom: 2px;
        background: url(images/flash2.gif) bottom left repeat-x;
    }
    HTML Code:
    <a href="..."><span>...</span></a>
    <a href="..."><img alt="..." src="..."></a>
    Hope that helps,
    Mike

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
  •