...

View Full Version : image link dotted border problem



frienzy
05-31-2010, 01:02 AM
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:

<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:

.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 :)

optimus203
05-31-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?

frienzy
05-31-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 :)

frankle
05-31-2010, 06:15 AM
Try adding the below code in your css:


a{outline:none;}

Hope this work for you.

Regards,

tinimic
05-31-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

or


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.

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

Major Payne
05-31-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;
}

subhadeepgayen
05-31-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;
}

frienzy
05-31-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?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum