4 Replies Latest reply on Oct 4, 2007 2:11 PM by beg1nnerdes1gner

    color around images doesn't work in I.E.

    beg1nnerdes1gner
      I used pseudoclass and in Firefox my image link has the correct color around it but in I.E. it's still just purple. Here's what I have for CSS. Do you see something I could fix?

      .image {color: #996600;}

      .image a:link {color: #996600; border-top-color: #996600;
      border-right-color: #996600;
      border-bottom-color: #996600;
      border-left-color: #996600;}
      .image a:visited {color: #996600; border-top-color: #996600;
      border-right-color: #996600;
      border-bottom-color: #996600;
      border-left-color: #996600;}
      .image a:hover {color: #996600; border-top-color: #996600;
      border-right-color: #996600;
      border-bottom-color: #996600;
      border-left-color: #996600;}
      .image a:active {color: #996600; border-top-color: #996600;
      border-right-color: #996600;
      border-bottom-color: #996600;
      border-left-color: #996600;}
        • 1. Re: color around images doesn't work in I.E.
          Level 7
          Lets assume the image you want to apply a border to is in a container
          with the class name of 'image'

          First you have to remove the default blue/purple border around the image.

          Do this with the following css:

          .image a img {
          border: none;
          }

          That says give the image in the containers 'image' and 'a' a border of
          zero. (Don't forget the 'a' link is a container as well.


          Next give the link, not the image, a border with this css

          .image a {
          border: 2px solid #996600;
          display: block;
          }

          Thats says give the 'a' which is in the container 'image' a border of
          2px solid and #996600 color. Display block make the 'a' wrap around the
          image.

          IF you want a different color on hover use this css as well:


          .image a:hover {
          border: 2px solid #000;
          }

          The image will now have a black border on hover (you can change the
          color to suit yourself)



          This is the complete code and css:





          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          " http://www.w3.org/TR/html4/loose.dtd">
          <html>
          <head>
          <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
          <title>Untitled Document</title>
          <style type="text/css">
          .image {
          width: 149px;
          }
          .image a img {
          border: none;
          }
          .image a {
          border: 2px solid #996600;
          display: block;
          }
          .image a:hover {
          border: 2px solid #000;
          }
          </style>
          </head>

          <body>
          <div class="image">
          <a href="#"><img src="logo.jpg" width="145" height="120"></a>
          </div>
          </body>
          </html>















          beg1nnerdes1gner wrote:
          > I used pseudoclass and in Firefox my image link has the correct color around it
          > but in I.E. it's still just purple. Here's what I have for CSS. Do you see
          > something I could fix?
          >
          > .image {color: #996600;}
          >
          > .image a:link {color: #996600; border-top-color: #996600;
          > border-right-color: #996600;
          > border-bottom-color: #996600;
          > border-left-color: #996600;}
          > .image a:visited {color: #996600; border-top-color: #996600;
          > border-right-color: #996600;
          > border-bottom-color: #996600;
          > border-left-color: #996600;}
          > .image a:hover {color: #996600; border-top-color: #996600;
          > border-right-color: #996600;
          > border-bottom-color: #996600;
          > border-left-color: #996600;}
          > .image a:active {color: #996600; border-top-color: #996600;
          > border-right-color: #996600;
          > border-bottom-color: #996600;
          > border-left-color: #996600;}
          >
          • 2. Re: color around images doesn't work in I.E.
            beg1nnerdes1gner Level 1
            Thank you! I did that and now I have the correct color around the image but now there is a gap between the sides of the image and the border. The top and bottom huge the image. Any idea why that is happening?
            • 3. Re: color around images doesn't work in I.E.
              Level 7
              beg1nnerdes1gner wrote:
              > Thank you! I did that and now I have the correct color around the image but now
              > there is a gap between the sides of the image and the border. The top and
              > bottom huge the image. Any idea why that is happening?
              >

              Would need to look at the html and css but I would assume that you need
              to adjust the containers width that the image is in to the width of the
              image, plus the width borders.

              If for instance your image is 200px wide and you have given it a 2px
              border left and right make you container 204px wide.

              If your container is wider than the sum of the image plus its left and
              right border the border will stretch to fill the width of the container