PDA

View Full Version : Hyperlink box


pauldf
08-27-2011, 12:20 AM
Hi Guys

I know this is probably a very simple question to most on here but for the life of me I can't remember how I did this before. Basically what I want to do is remove the blue outline when someone clicks on one of my hotspots on my webpage.

It really looks bad. I'll try explain whats going on. I have an image on my webpage and I created a hotspot/hyperlink on it, the blue box appears over it in my .dwt file and all pages created from that file. This is cool, but when I uploaded my page, as soon as you click on the image, yeah a new window opens to the other site but on my webpage there is an outline of the hotspot left on the image. Is there anyway to make that outline transparent or anything?

I have tried setting the border to 0 etc. but I'm at a loss to remember how I made it disappear in a website I built last year.

Again I know this is probably simple to most of you guys up here but I would be thankful for any help you can give.

All the best

DWcourse
08-27-2011, 12:44 AM
try setting the CSS outline property for the links to none.

pauldf
08-27-2011, 12:59 AM
Hi

Thanks for your reply. I just did that and it's weird, now when I tested the page the blue outline stays there on the Safari and Chrome browsers, but for some reason on Firefox they have gone.

I'll turn on my PC later and see if they are there in IE.

Thanks again for your reply.

BizzyWizz
08-30-2011, 08:03 PM
I'm no expert by any means, but you could try this. It works for me.

a img {
border: none;
}
/* This anchor selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link. */

Might also want to add a text-decoration:none; for your a: links.

pauldf
08-31-2011, 11:28 PM
Okay guys this is beginning to hurt the brain now :confused: I have added the style code as it appears on the html page below:
<style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #000000;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
background-image: url(../images/clear-skies2.jpg);
}
.oneColFixCtrHdr #container {
width: 780px;
background: #FFFFFF;
margin: 0 auto;
border: 0px solid #ffffff;
text-align: left;
}
.oneColFixCtrHdr #header {
background: ffffff;
padding: 0px 0 20px;
}
.oneColFixCtrHdr #header h1 {
margin: 0;
padding: 10px 0;
}
.oneColFixCtrHdr #mainContent {
padding: 0 20px;
background: #FFFFFF;
}
.oneColFixCtrHdr #footer {
padding: 0 10px;
background:#ffffff;
}
.oneColFixCtrHdr #footer p {
margin: 0;
padding: 10px 0;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
body {
background-image: url(../images/clear-skies2.jpg);
}
a img {
border: none;
}
-->
</style>

Also here is what is going on in the CSS style sheet:

@charset "UTF-8";
body {
background-image: url(../images/clear-skies2.jpg);
background-repeat: no-repeat;
background-position: left top;
background-attachment: fixed;
}
body {
background-attachment: fixed;
background-image: url(../images/clear-skies2.jpg);
background-repeat: no-repeat;
background-position: left top;
}
body {
background-attachment: fixed;
background-image: url(../images/clear-skies2.jpg);
background-repeat: no-repeat;
background-position: left top;
}
a:link {
text-decoration: none;
}
a img {
border: none;
}

Again for some reason the blue outlines don't appear in Firefox, only in Safari and Chrome browers, I'm gonna try check IE later. Again guys thanks for all the help with this.

DWcourse
08-31-2011, 11:42 PM
It would be easier if you would just post the page somewhere and give us a link.

designer_282
09-06-2011, 08:01 PM
My friend had this same problem when we took our web design class in high school.

The teacher found out that you could lick on the the hyperlink that has the blue box around it and in the properties box at the bottom set the border to 0.

edbr
09-07-2011, 02:04 AM
The teacher found out that you could lick on the the hyperlink that has the blue box around it and in the properties box at the bottom set the border to 0.
does that not add a new class or an inline style?