Support » Themes and Templates » General CSS Questions

  • Resolved xmatter


    here is my current css

    .coach {width:310px; padding:5px; height:120px; float:left;  text-align:center; background:#eee; /*border-radius:8px;*/ border:1px solid #ccc; margin:0 8px 8px 0;}
    .coach img {float:left; height:118px; width:90px; border-radius:8px; box-shadow:0px 2px 3px #888888; margin-right:5px}
    .coach img a {float:left; border:none; padding:0;}

    so the code above displays a business card style listing for all coaches on the coach page. When a user clicks the image, they are taken to the coach’s bio page. On the bio page, I want to maintain just the img class with rounded corners. What is the best method to do this?

    I found this explanation on stackoverflow:

    a .someclass
    Selects any (descendant of an 'a' tag) that has a class of 'someclass'
    <a href="#example">
        <span class="someclass">...</span>
    .someclass a
    Selects any (descendant of a tag with a class of 'someclass') that is an 'a' tag.
    <div class="someclass">
        <a href="...">...</a>
    a.someclass /* Note absence of spaces */
    Selects any 'a' tag with a class of 'someclass'.
    <a href="..." class="someclass">...</a>

    When I use my current code, the image on the bio page strips the rounded corners.

Viewing 2 replies - 1 through 2 (of 2 total)
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘General CSS Questions’ is closed to new replies.