Results 1 to 4 of 4

Thread: CSS - Remove border from linked image

  1. #1

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Posts
    12,380

    CSS - Remove border from linked image

    I'm having a tough time removing the border from a linked image. My html looks like this:
    Code:
    <a href="home.html">
    <img id="logo" src="Images/logo.bmp" alt="Dday9 Logo">
    So far what I've tried is:
    Code:
    #logo img
    {
    	border: 0px;
    	
    }
    but that doesn't seem to work.
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | HtmlLessons | CssLessons | Code Tags | Sword of Fury - Jameram

  2. #2
    Frenzied Member tr333's Avatar
    Join Date
    Nov 2004
    Location
    /dev/st0
    Posts
    1,605

    Re: CSS - Remove border from linked image

    Zero values in CSS don't require units, so you just want "border:0" instead of "border:0px". You are also missing the closing </a> tag after the <img />.

    css Code:
    1. a img { border: 0; }
    or alternatively if you want to be more specific to just this image:
    css Code:
    1. a img#logo { border: 0; }

    Some people say to clear the "outline" css property as well, but that's not advisable as it's used for accessibility reasons.
    CSS layout comes in to the 21st century with flexbox!
    Just another Perl hacker,

  3. #3

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Posts
    12,380

    Re: CSS - Remove border from linked image

    Thank you, that works perfectly. And also thank you for noticing that I'm missing my closing tag! But let me ask you a question, why do I have to declare a img before the #logo? For example, in my navigation bar, I just declare #navigation li:
    CSS Code:
    1. #navigation li
    2. {
    3.     display: inline;
    4.     margin: 0;
    5.     list-style-type: none;
    6.     border:2px gray;
    7.     border-style: solid;
    8.     padding-right:50px;
    9.     padding-left:50px;
    10. }
    11.  
    12. a img#logo { border: 0; }

    Edit - And I love how the Syntax highlighter doesn't match with the highlight tags!
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | HtmlLessons | CssLessons | Code Tags | Sword of Fury - Jameram

  4. #4
    Frenzied Member tr333's Avatar
    Join Date
    Nov 2004
    Location
    /dev/st0
    Posts
    1,605

    Re: CSS - Remove border from linked image

    The element id's on each page should always be unique, so you're right in that it's not required.
    CSS layout comes in to the 21st century with flexbox!
    Just another Perl hacker,

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width