SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Evangelist
    Join Date
    Jul 2004
    Location
    England
    Posts
    588
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Misbehaving links

    Been a while since I last looked at CSS - seems I've forgotten much... having a problem with misbehaving links:

    Text inks in the main content div are specified with a lower border:

    #zonemain :link, #zonemain :visited
    {
    color: #222;
    text-decoration: none;
    font-weight: normal;
    padding: 0 0 1px 0;
    border-bottom: 1px solid #999;
    }

    The unwanted behaviour is that linked images in that div are also acquiring the lower border in some (not all) browsers.

    So, I added a 'noshow' class to remove the lower border:

    #zonemain.noshow :link, #zonemain.noshow :visited
    {
    color: #222;
    text-decoration: none;
    font-weight: normal;
    border: 0;
    }

    (I think the border is zero by default, I added it anyway.)

    and added class="noshow" to the link tag.

    Still ****ed in some browsers. Suggestions appreciated. Please and thanks.

  2. #2
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have you tried:
    #zonemain a:link, #zonemain a:visited {
    color: #222;
    text-decoration: none;
    font-weight: normal;
    padding: 0 0 1px 0;
    border-bottom: 1px solid #999;
    }

    not sure thats the issue, just thought it strange to see links without the a: syntax ......
    might also want to try

    img {
    border: 0;
    }

    instead of your class (again not 100% sure but worth a shot)

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    What have you added the class to? In your example you have added it to the same element as the id! That means they will all be styled with both but the id will probably win out.

    If you are applying the noshow to the anchor surrounding the image then the code should be this:
    Code:
    #zonemain :link, #zonemain :visited
    {
    color: #222;
    text-decoration: none;
    font-weight: normal;
    padding: 0 0 1px 0;
    border-bottom: 1px solid #999;
    position:relative;
    }
    #zonemain a img {border:none}
    #zonemain .noshow:link, #zonemain .noshow:visited
    {
    color: #222;
    text-decoration: none;
    font-weight: normal;
    border: 0;
    }
    Hope that helps.

    Paul

  4. #4
    SitePoint Evangelist
    Join Date
    Jul 2004
    Location
    England
    Posts
    588
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thanks

    Thanks for the suggestion dc. Appreciated.
    The link syntax is something I 'acquired' ages back - I don't pretend to understand it... although I'm sure Paul will.

    Thanks again, Paul. Yet another time you've sorted my problem. Hugely appreciated.

    As a follow-on, what's the significance of the 'position: relative'?

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    As a follow-on, what's the significance of the 'position: relative'
    IE will fail quite often fail to render borders on inline elements due to its "layout" problems. Using position relative forces it to show its padding and borders properly.

    Paul

  6. #6
    SitePoint Evangelist
    Join Date
    Jul 2004
    Location
    England
    Posts
    588
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah... thanks.

    'twas easier with tables. ;-)


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
  •