Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    May 2010
    Posts
    4
    Thanks
    0
    Thanked 2 Times in 2 Posts

    image link dotted border problem

    Hello!
    I'm new to writing a websites so here is my issue.
    I want to add to my website language switch image links but there is little problem.
    The dotted border is bigger on one side than the image size.
    1st image - http://img576.imageshack.us/i/59447792.jpg/
    2nd image - http://img130.imageshack.us/i/47478367.jpg/

    On first image you can see the link border when I move cursor on the link.
    On second image you can see dotted border when I click on the link and hold.
    What is the problem and how to fix it?
    HTML code:
    Code:
    <div class="header">
    	  <h1><img src="lv/images/pt.jpg" width="303" height="33"/></h1>
          <p>
    	  <a href="lv/home.html"><img src="lv/images/latvia.gif" width="27" height="17" alt="latvian" border="2"/></a>
          <a href="lv/home.html"><img src="lv/images/unitedkingdom.gif" width="27" height="17" alt="english" border="2"/></a>
          <a href="lv/home.html"><img src="lv/images/russia.gif" width="27" height="17" alt="russian" border="2"/></a>
          </p>
    	  </div>
    CSS code:
    Code:
    .header {width: 100%;
             height: 100px;
    		 border: solid #000000;
    		 border-width: 0px 0px 1px 0px;
    		 background: #FFFFFF;}
    
             h1 {text-align: left;
    		     background-color: #CDBDA1;
                 padding-top: 15px;
    	         padding-left: 10px;}
    
             a {color: #FFFFFF;
                text-decoration: none;}
    
             a:hover {text-decoration: none;
                      color: #004A91;}
    
             p {text-align: right;
                margin: 0px 0px 0px 0px;
                height: 15px;
                padding: 5px 9px 5px 0px;
                color: #FFFFFF;}
    Thanks
    Last edited by frienzy; 05-31-2010 at 01:14 AM.

  2. Users who have thanked frienzy for this post:

    sexXxKitten (05-31-2010)

  • #2
    Regular Coder optimus203's Avatar
    Join Date
    Sep 2008
    Location
    CT
    Posts
    317
    Thanks
    22
    Thanked 16 Times in 15 Posts
    Its difficult to see what you are explaining from the images provided. Can you just send a enlarged version of the border image and hover effect?
    Always thank those CF Users who help you solve issues...
    Connecticut Web Design

  • Users who have thanked optimus203 for this post:

    sexXxKitten (05-31-2010)

  • #3
    New to the CF scene
    Join Date
    May 2010
    Posts
    4
    Thanks
    0
    Thanked 2 Times in 2 Posts
    1st pic - http://img198.imageshack.us/i/36302335.jpg/
    2nd pic - http://img444.imageshack.us/i/75912901.jpg/

    Problem with that dotted border...
    Thanks

  • Users who have thanked frienzy for this post:

    sexXxKitten (05-31-2010)

  • #4
    New Coder
    Join Date
    May 2009
    Posts
    74
    Thanks
    0
    Thanked 7 Times in 7 Posts
    Try adding the below code in your css:


    a{outline:none;}

    Hope this work for you.

    Regards,
    Last edited by frankle; 05-31-2010 at 06:46 AM.

  • #5
    New Coder
    Join Date
    May 2010
    Location
    Midwest, USA
    Posts
    11
    Thanks
    0
    Thanked 2 Times in 2 Posts
    It's hard to determine the problem without knowing what DTD your markup is written for, but the problem appears to be the whitespace that is put below all images.

    An image is an inline element and the whitespace is there to allow room for its decenders. You can remove this by displaying the image as a block, or setting the image to the baseline.

    In your CSS:

    Code:
    img {display:block;}
    which wouldn't work with your present markup

    or

    Code:
    img {margin-bottom: -4px;}

    The -4px is 2px for your border plus 2px for the whitespace.

    Also, the border attribute has been deprecated for the img tag. You should use the border property in your CSS.

  • #6
    New to the CF scene
    Join Date
    May 2010
    Posts
    4
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Many thanks tinimic!
    But still curious how to make img {display:block;} work

  • #7
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    851
    Thanks
    11
    Thanked 79 Times in 77 Posts
    If you are using Firefox or similar browser, that is an inherent border generated by browser. Might take a look at this...

    Fixing the Fox

    a:active {
    outline: none;
    }
    ☠ ☠RON☠ ☠

  • #8
    New Coder
    Join Date
    May 2010
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Add this, it should solve:

    Code:
    a:active {
      outline: none;
    }
    If it still does'nt work try this for mozilla
    Code:
    :focus {
      -moz-outline-style: none;
    }

  • #9
    New to the CF scene
    Join Date
    May 2010
    Posts
    4
    Thanks
    0
    Thanked 2 Times in 2 Posts
    No no i didnt want to remove it - i wanted to fix it to image size
    the code:
    Code:
    img {margin-bottom: -4px;}
    worked for me
    but im interested in second solution -
    Code:
    img {display:block;}
    why it wont work for me and what to do to make it?


  •  

    Posting Permissions

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