Results 1 to 8 of 8

Thread: img link code not working

  1. #1
    Join Date
    Aug 2006
    Posts
    235
    Thanks
    30
    Thanked 2 Times in 2 Posts

    Default img link code not working

    Okay so my site is here: http://www.modernrevolutions.net
    I currently have this code in my stylesheet so that linked images have no border or underline:
    Code:
     img {border:0px;}
    I have tried almost every variation of this code I could think of, even adding !important to it and everything, but for some reason it all the linked images have a underline/bottom border. Can someone please help me??
    ------------------
    Check out my site here and let me know what you think

  2. #2
    Join Date
    May 2011
    Location
    SFBA, CA, USA
    Posts
    94
    Thanks
    6
    Thanked 7 Times in 7 Posts

    Default

    Do you have the link (that contains the image) set to be underlined? AND is it located in your css after the img {0 !important;} ? If so, this will probably override it.

    dbc

  3. #3
    Join Date
    Jul 2009
    Location
    Binus University
    Posts
    459
    Thanks
    78
    Thanked 21 Times in 21 Posts

    Default

    img{
    border:none;
    }
    _____________________

    David Demetrius // davejob
    _____________________

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,069
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    Ordinarily the way to be sure is:

    Code:
    img { border-width: 0 !important; }
    The !important keyword is to override any other style that might contradict this one. And explicitly setting the border-width to 0 has proven to be the most cross browser way of eliminating the border.

    But I see from looking at the page that this will not take care of it in this case. I'm not 100% sure why (I think it's because the style isn't on the img tag at all), but it's obvious that (starting at line #69 in wordpress/wp-content/themes/Kaley/style.css) these are the culprits:

    Code:
    a:link, a:visited, a:active {
    color :#000000; 
    font-size:12px;
    font-family: Georgia;
    text-transform: uppercase;
    font-weight: normal;
    letter-spacing: 1px;
    text-decoration:none;
    border-bottom:1px dotted #363636;
    } 
    
    a:hover { 
    color :#363636; 
    font-family: Georgia;
    font-weight: normal;
    letter-spacing: 1px;
    border-bottom:1px solid #000000; 
    }
    The only way I can think of to have it both ways would be to use class, one way of doing that is:

    Code:
    .lined:link, .lined:visited, .lined:active {
    color :#000000; 
    font-size:12px;
    font-family: Georgia;
    text-transform: uppercase;
    font-weight: normal;
    letter-spacing: 1px;
    text-decoration:none;
    border-bottom:1px dotted #363636;
    } 
    
    .lined:hover { 
    color :#363636; 
    font-family: Georgia;
    font-weight: normal;
    letter-spacing: 1px;
    border-bottom:1px solid #000000; 
    }
    And then, going back over the markup giving that class name to only those links that you want to have receive that treatment.
    Last edited by jscheuer1; 06-26-2011 at 09:17 AM. Reason: saw there were two style.css files
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Aug 2006
    Posts
    235
    Thanks
    30
    Thanked 2 Times in 2 Posts

    Default

    I am just a little confused. So I'd have to change my link code to a class and then add that class to every link?
    ------------------
    Check out my site here and let me know what you think

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,069
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    Yes to the first part about changing the css as suggested to key off of a class. And to every link that you want to have that bottom border, yes you would have to add that class in the markup to each of those links. This is little different than is already done with the .navi1 class for another set of links..

    If you look at the page most of the text links have that dotted bottom border. On hover it becomes solid. So yes, if you want to keep that for those, make the change as suggested to the css and give those links the class. Do not give the class to the links that are linked images.

    Or, if you don't want that bottom border for any links, just get rid of the highlighted lines:

    Code:
    a:link, a:visited, a:active {
    color :#000000; 
    font-size:12px;
    font-family: Georgia;
    text-transform: uppercase;
    font-weight: normal;
    letter-spacing: 1px;
    text-decoration:none;
    border-bottom:1px dotted #363636;
    } 
    
    a:hover { 
    color :#363636; 
    font-family: Georgia;
    font-weight: normal;
    letter-spacing: 1px;
    border-bottom:1px solid #000000; 
    }
    Or, you could leave it alone and make up another class for the links with images:

    Code:
    a.imglnk:link, a.imglnk:visited, a.imglnk:active, a.imglnk:hover {
    border-width: 0 !important;
    }
    And apply its class to all of the a tags that are linking images.
    Last edited by jscheuer1; 06-26-2011 at 10:33 PM. Reason: add detail, later an alternative
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. The Following User Says Thank You to jscheuer1 For This Useful Post:

    ModernRevolutions (06-26-2011)

  8. #7
    Join Date
    Aug 2006
    Posts
    235
    Thanks
    30
    Thanked 2 Times in 2 Posts

    Default

    Ahh the class for linked images would be much easier. Thanks a million!
    Are you good at HTML too? because i have a thread posted in HTML and it seems nobody can figure it out D: lol
    ------------------
    Check out my site here and let me know what you think

  9. #8
    Join Date
    May 2011
    Location
    SFBA, CA, USA
    Posts
    94
    Thanks
    6
    Thanked 7 Times in 7 Posts

    Default

    John's good at everything! He's the DD guru.

    Affectionately,
    dbc

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
  •