SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Zealot ICO's Avatar
    Join Date
    May 2005
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Style div tag links but exclude styling of img links?

    So I've style my content's links but I don't want the style applying to the images.

    How do I overide the styling?

    Nothing I do seems to help, weird.

    Code:
    #container a:link, #container a:visited{
    	background: inherit;
    	color:#369FE8;
    	padding: 2px;
    	text-decoration:none;
    	font-weight: bold; 
    	letter-spacing: .02em;
    }
    #container a:hover, #container a:active{
    	background: inherit;
    	color:#FFF;
    	background: #369FE8;
    	text-decoration:none;
    }
    
    img a{ ....? }
    I've tried putting all sorts of things in the img style, nothing seems to work

  2. #2
    Word Painter silver trophy Shyflower's Avatar
    Join Date
    Oct 2003
    Location
    Winona, MN USA
    Posts
    10,053
    Mentioned
    142 Post(s)
    Tagged
    2 Thread(s)
    try this:

    Code:
    #container img{
    background-color:transparent;
    color:inherit /* only to make the code validate */
    border: none
    }
    I'm not sure if you understand the difference between "inherit" and "transparent". Inherit causes an attribute to take on the characteristics of its parent, while "transparent" makes the color the same as the background of your page. I think your use of inherit is part of the problem.
    Linda Jenkinson
    "Say what you mean. Mean what you say. But don't say it mean." ~Unknown

  3. #3
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Code:
    img a{ ....? }
    Where where have you ever seen an anchor inside an <img>?

    There's really not much you can do to 'cancel out' the styling if one of your anchors happens to contain an image inside. The only bullet-proof option is to use a class:

    HTML Code:
    <a class="img" href="#"><img src="" alt=""></a>
    Code:
    a {
      padding: 2px;
      background: green;
    }
    
    a.img {
      padding: 0;
      background: transparent;
    }

  4. #4
    SitePoint Zealot ICO's Avatar
    Join Date
    May 2005
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, gee I had that the wrong way around, my images don't have anchors inside them, but I was writing the style that way?

    It happens, thanks for the correction!!


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
  •