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

    Join Date
    Jan 2002
    Location
    NYC
    Posts
    29
    Rep Power
    0

    seemingly simple CSS span, div, problem


    I stumbled across this problem modifying someone else's code.

    I have a stylesheet with two definitions:
    PHP Code:
    {font-size 12pxcolor black;}
    a.small {font-size 10pxcolor red;} 
    In my HTML file I have the following link:
    PHP Code:
    <span class="small"><a href="foo.php">LINK</a></span
    The problem is that the link is being formatted according to the a{...} definition, that is, 12px and black, not 10 px and red like I want it.

    The first thing I thought was that a <span> tag is only supposed to contain text, not tags, so I changed it to a <div> tag. Still the same result.

    If I change my HTML to:
    PHP Code:
    <a href="foo.php" class="small">LINK</a
    everything works fine. I get 10px and red text.

    Why doesn't using a <span> or <div> tag around an <a> tag work like I think it should?
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Nov 2001
    Posts
    1,882
    Rep Power
    19
    <a href="foo.php" class="small">LINK</a>
    This is the correct method if you want the link to be affected by the CSS.

    Elements can be defined in CSS
    so using a will effect links.
    using h1 will effect h1 (header) tags.


    <span class="small"> is not effecting anything, because there is no style called small that can be associated with SPAN tags.

    span.small
    or
    .small

    would affect just the SPAN tag, but not the link.


    Hope that makes sense, it's hard to describe briefly.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2002
    Location
    NYC
    Posts
    29
    Rep Power
    0
    Thanks degsy. I understand what you're saying, but am confused about what I thought I knew about the <span> tag. I don't understand why the definitions of the span tag don't apply to the text in the anchor tags enclosed between the span tags.

    Say my definitions are
    PHP Code:
    .red {color redfont-family Verdana;}
    {text-size 12px;}
    {text-size 12px;} 
    If I use
    PHP Code:
    <span class="red">Here is some sample text</span
    I get red, Verdana text in the browser default size. Good.

    If I use
    PHP Code:
    <span class="red"><b>Here is some sample text</b></span
    I get red, bold, 12px, Verdana text. Also good. Here the span affected the text within the <b> tags.

    If I use
    PHP Code:
    <span class="red"><a href="foo.php">Here is some sample text</a></span
    I get blue (default link color), 12px, Verdana text. Not good. The span did change the font, but not the color within the <a> tags. Why not?
  6. #4
  7. No Profile Picture
    Moderator =(8^(|)
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Feb 2002
    Location
    Sacramento, CA
    Posts
    1,710
    Rep Power
    14
    You can use
    Code:
    span.small a {font-size : 10px; color : red;}
    to get the effect you want.

    The a tag has some implicit properties assigned to that you have to override. Things like color and text-decoration.
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2002
    Location
    NYC
    Posts
    29
    Rep Power
    0
    Aha! I like it, very subtle. It works.
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jan 2002
    Location
    Seattle WA
    Posts
    863
    Rep Power
    14
    It must be the way the browser implements default link colors. It likely has a default style implementation for anchors, probably something like this: a{color: blue; text-decoration: underline;}. Unless you explicitly override this, the anchor will appear as dictated by the default style.

    Applying the color to the span won't set the anchor color, because the anchor still has the default anchor style set.

    This is necessary to keep html 'simple.' If anchors inherited colors from their parent elements, something as simple as <body color="red">Click <a href="foo">here</a></body> would wipe out the coloring of the link, since the body's color declaration would propagate through all it's child elements.
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2002
    Location
    Norway
    Posts
    34
    Rep Power
    13
    cpv204:

    This should work using div tags.

    <style type="text/css">
    <!--
    #link a {
    color: red;
    font-family: verdana, sans-serif;
    }
    -->
    </style>

    <div id="link"><a href="link.html">a link</a></div>

IMN logo majestic logo threadwatch logo seochat tools logo