PDA

Click to See Complete Forum and Search --> : blue borders around image links won't go away

bitstomper
08-04-2009, 10:08 AM
Hi,

I have tried to get rid of the blue borders around image links, but somehow it won't work.
Tried: border="0" inside <a> tags, border: none; in CSS border: 0 none in CSS, but FF still shows the dotted borders.

[CODE]<style>
body {
margin:0;
padding:0;
overflow: hidden;
background-image: url(images/backgr.jpg);
background-repeat: no-repeat;
background-color: #371706;
}

#buttons {
position: relative;
left: 446px;
top: 90px;
}

#name {
position: relative;
left: 450px;
top: 85px;
}

iframe#ifrm {
position: relative;
left: 700px;
top: -55px;
width: 630px;
height: 456px;
}

a img
{ border: 0;
}

</style>
bitstomper
08-04-2009, 10:10 AM
<script type="text/javascript">
// <![CDATA[

function changeIframeSrc(id, url) {
if (!document.getElementById) return;
var el = document.getElementById(id);
if (el && el.src) {
el.src = url;
return false;
}
return true;
}
// ]]>
</script>

</head>

<body onLoad="MM_preloadImages('images/info_off.png', 'images/contact_off.png', 'images/folio_off.png')">

<div id="name">
<img src="images/name.jpg" width="265" height="34">
</div>
<div id="buttons">
<a href="info.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('info','','images/info_on.png',1)" onclick="return changeIframeSrc('ifrm', this.href)"><img src="images/info_off.png" alt="info" name="info" width="120" height="34"></a><br>
<a href="folio.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('folio','','images/folio_on.png',1)" onclick="return changeIframeSrc('ifrm', this.href)"><img src="images/folio_off.png" alt="portfolio" name="folio" width="120" height="34"></a><br>
<a href="contact.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('contact','','images/contact_on.png',1)" onclick="return changeIframeSrc('ifrm', this.href)"><img src="images/contact_off.png" alt="contact" name="contact" width="120" height="34"></a></div>
<iframe name="ifrm" id="ifrm" src="blank.htm" frameborder="0">Your browser doesn't support iframes.</iframe>

[/CODE]

Please help.
:confused:
6StringGeek
08-04-2009, 10:58 AM
This is what I use:

a img {
border: 0 none;
}
ZABI
08-04-2009, 11:07 AM
Hi, there. Try this border="0" in img tag not a...
bitstomper
08-04-2009, 11:27 AM
yeah sorry I tried that in the img tag but the css should already take care of that. Anyhow it does not work..
bitstomper
08-04-2009, 11:28 AM
This is what I use:

a img {
border: 0 none;
}

That is also what I tried (see original post)
bitstomper
08-04-2009, 11:39 AM
It must be a bug in FF?
It works fine in Safari..
6StringGeek
08-04-2009, 11:45 AM
Something might be jacked in your code. It works for me in all browsers. Did you try and validate the code yet? Something could be overriding it.
bitstomper
08-04-2009, 02:04 PM
it validates fine
bitstomper
08-04-2009, 02:06 PM
what version of FF did you try?
I am using FF 3.0.12 and 3.5.2, both the same result
bitstomper
08-04-2009, 02:36 PM
hmm maybe I am trying something that is just plain impossible.
I noticed it occurs in FF on EVERY site unless a specific border styling is called that is not 0. Maybe I am not clear: what I see is when I click on an image a dotted border occurs (usually red or blue). The border remains until I click elsewhere on the page deselecting the image I clicked. For example on this page the webdeveloper.com logo does the same.
who
08-05-2009, 06:10 PM
Don't worry about it... Firefox does that. There's no problem with your css and Firefox users will be used to it.
nickelleon
08-07-2009, 03:15 PM
FF users are used to that, but if you really wanna get rid of it, try:

a:active, a:focus {
outline: 0;
}
tim_wilson2009
08-07-2009, 05:58 PM
try in css - img{ border:0px solid black}
ZABI
08-15-2009, 01:57 PM
Please would you give me a link to your online page; where you have problem
Andyram2k
08-16-2009, 08:55 AM
Hi bitstomper,
As said previously by others, the generic img style should stop ALL image borders, just remove the a img and use:

<style>
img {
border:0;
}
</style>

Hope this helps in some way.