[Pro] Safari's Blue Outer Glow

Still very new to this.

Found some advice related to stopping Safari from displaying a blue rectangle around certain links. It involves the following bit of code:

input:focus
{
outline: none;
}

Not sure where I would input that. The attached page suffers from this problem when returning from PROJECTS, RF RIGGING KIT & CONTACT, but, strangely, not from PROFILE from which the other three were built.

http://www.acmeprofessional.com/home.html

Thanks.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

A couple of things that I notice about your pages/site - unrelated to the Safari glow.

1 You have a lot of image names that contain space characters - you really should avoid this and instead use _ underscores and - hyphens. Some servers/browsers will trip up over this.

2 While I appreciate that your site is not complete one of the primary considerations should be your navigation which should appear on every page - even before the actual content.

The code you refer to above can be added into your Master Page so that it appears on every page on which that Master is based by adding it using -

Page>HTML Markup

In the subsequent dialogue box that opens choose Before from the picker at the bottom left. And then paste in the following

<style type="text/css">
<!--
input:focus {
outline: none;
}
-->
</style>

Now this assumes that the code you have shown actually works but the principle is the same if you wish to add any extra CSS styling to a page outwith creating a style in the styles palette.

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

thanks for the good advice David! I’ll clear out the spaces in the photo file names. Do I need to do this at their source, or can it be done in the Inspector?

The ‘fix’ for the blue halo around links in Safari didn’t. I’m still mighty puzzled about why the problem is not evident for the first link: “PROFILE”. This problem clearly does not impact Firefox, of the iPhone or iPad versions of Safari.
Best,
gtc


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Do I need to do this at their source, or can it be done in the Inspector?

Best to get in the habit of doing it for any file that you might be considering using on your site so yes - at source.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

It may be that you need to add this also

<style type="text/css">
a, map {
border: 0 !important;
outline: 0 !important;
}
</style>

If your link is a Map area.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Many years ago, in the times of Internet Explorer for the Mac, I wrote and Action - Remove Explorer Glow (anyone here remember that one)? It did the same kind of thing - stripped out a glow that Internet Explorer imposed on every link. People loved it.

However, the need for such an Action has passed, and as we look at the internet as being as accessible and as available for all, such “glows” around links are there to help the less visually fortunate amongst us - those who need those extra cues to let them know that the link has been clicked on.

To remove the glow may not help those who have problems with motor control, mission or other skills that we take for granted.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks for that explanation.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Okay,bearing in mind that I don’t actually know quite what I’m doing here,the below has worked to remove the blue outlines from image maps in Safari. A slight variation on the first piece of code in the thread (I couldn’t get it to work as it is so found a variation on the apple site, plus the second piece of code for image maps.
Thanks again Delta Dave.

Apologies if it’s a little untidy to more seasoned folk,I wouldn’t know if it is or isn’t,but it does the trick!

*:focus { outline: none; outline-width: 0; } a, map { border: 0 !important; outline: 0 !important; }

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hey all you know I used this fix in markup before for another site and it worked as it was associated with a javascript fix also… but I am using for a new site and it will not resolve problem
this is just one site but I have more. The odd thing is that before FW6 this did not happen as these sites were made with 5.5
take a look
http://spiritidesign.com/clients.html

thx
C


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi all I did try the above markup and it did not fix the problem ( blue outline ) on graphic links but I contacted softpress and here is the fix. and this one works… thought I would share it…

To do this, make sure nothing is selected on the page, go to Edit>Styles, click on the “+” button in the bottom left corner, enter “area” (without the quotes) in the Tag field, click Extended, click New, enter “outline” (no quotes) for Name, enter “none” (no quotes again) for Value and click OK. Make sure that nothing is in the “Name” field of the Edit Styles dialog (if anything is in there, such as “style1”, remove it), then click OK again.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I am noticing that the blue glow box in safari shows when I click on a graphic that is hyperlinked with a ROLLOVER. if I have no rollover, but just a hyperlinked graphic, then NO blue glow box appears.

I can conclude it is related to the rollover being applied? I also did it on a page that had no HTML markup and it still happens.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Carla,

I followed your directions exactly (very clearly written) and I did it on just one page. It seemed to HAVE WORKED on that page and every PAGE of my website.

WOW. is that it?

THANKS,

BARRY


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Yes that is it… its like a miracle! Ha but softpress is to credit
take care


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Doesn’t work. No idea why it doesn’t or why the blue rectangle has suddenly appeared.

This is the first time ever (in four years’ use) that I have seen a blue rectangle appear around a graphic rollover (or anything for that matter). Today it shows up for the first time. No idea why today is special. This is the same document for this site (backed up, of course) that I have been using for a couple of years.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I have had the same issue for older sites. It no longer happens in FW7 though

so here is the fix and it does work:

To do this, make sure nothing is selected on the page, go to Edit>Styles, click on the “+” button in the bottom left corner, enter “area” (without the quotes) in the Tag field, click Extended, click New, enter “outline” (no quotes) for Name, enter “none” (no quotes again) for Value and click OK. Make sure that nothing is in the “Name” field of the Edit Styles dialog (if anything is in there, such as “style1”, remove it), then click OK again.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options