View Full Version : image link dotted border problem

May 31st, 2010, 01:02 AM
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:

<div class="header">
<h1><img src="lv/images/pt.jpg" width="303" height="33"/></h1>
<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>
CSS 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 :)

May 31st, 2010, 04:45 AM
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?

May 31st, 2010, 05:50 AM
1st pic - http://img198.imageshack.us/i/36302335.jpg/
2nd pic - http://img444.imageshack.us/i/75912901.jpg/

Problem with that dotted border...
Thanks :)

May 31st, 2010, 06:15 AM
Try adding the below code in your css:


Hope this work for you.


May 31st, 2010, 06:19 AM
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:

img {display:block;}

which wouldn't work with your present markup


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.

May 31st, 2010, 06:39 AM
Many thanks tinimic!
But still curious how to make img {display:block;} work

Major Payne
May 31st, 2010, 08:31 AM
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 (http://sonspring.com/journal/removing-dotted-links)

a:active {
outline: none;

May 31st, 2010, 08:35 AM
Add this, it should solve:

a:active {
outline: none;

If it still does'nt work try this for mozilla

:focus {
-moz-outline-style: none;

May 31st, 2010, 11:21 PM
No no i didnt want to remove it - i wanted to fix it to image size
the code:

img {margin-bottom: -4px;}
worked for me
but im interested in second solution -
img {display:block;}
why it wont work for me and what to do to make it?