Remove Border on Hover Images

This forum is for all Flare issues related to the HTML5, WebHelp, WebHelp Plus, and Adobe Air Targets
Post Reply
yanick
Propeller Head
Posts: 12
Joined: Tue Jun 15, 2010 1:37 pm

Remove Border on Hover Images

Post by yanick »

A recent change in either Flare or CSS requirements is causing thumbnail popups (the image that appears when I hover over a thumbnail) to display a black border. This border appears in Chrome, IE, Edge, and Opera, but not in Firefox.

How do I remove this border? I've tried adding

.img, img
{
border: none;
}

to both my CSS and to Flares' Topic.css without success.

Here's an example. First the current state with the unwanted black border:
Current.png
Then, the desired state (sans-border):
Desired.png
Thank-you
You do not have the required permissions to view the files attached to this post.
ChoccieMuffin
Senior Propellus Maximus
Posts: 2630
Joined: Wed Apr 14, 2010 8:01 am
Location: Surrey, UK

Re: Remove Border on Hover Images

Post by ChoccieMuffin »

Just a guess but this might be an accessibility thing, where the browser adds a border to whatever item is active (which could be a button, a text input box, or in this case an image). Previous versions of Flare had this setting hidden, but recent versions now don't. I can't remember off the top of my head what the setting is, but I believe you can define what the border looks like (and whether it's displayed at all) for all items, or define it for individual items. Take a look at this thread where I asked a very similar question and see if that's of some use:

viewtopic.php?f=9&t=32753
Started as a newbie with Flare 6.1, now using Flare 2023.
Report bugs at http://www.madcapsoftware.com/bugs/submit.aspx.
Request features at https://www.madcapsoftware.com/feedback ... quest.aspx
yanick
Propeller Head
Posts: 12
Joined: Tue Jun 15, 2010 1:37 pm

Re: Remove Border on Hover Images

Post by yanick »

Thank you Mr. Muffin (may I be so forward as to call you, Choccie?).

You correctly deduced my problem, and I have overcome the aesthetic attack on my help systems by inserting the following into my project .CSS:

Code: Select all

:focus
     {
	     outline: none;
     }
It appears to work in all of the major browsers: Edge, ChromeDome, Opera.

Thank you very much for your help. Health and longevity to you, and hopefully the odd chocolate muffin or two!
ChoccieMuffin
Senior Propellus Maximus
Posts: 2630
Joined: Wed Apr 14, 2010 8:01 am
Location: Surrey, UK

Re: Remove Border on Hover Images

Post by ChoccieMuffin »

yanick wrote:Thank you Mr. Muffin (may I be so forward as to call you, Choccie?).

You correctly deduced my problem, and I have overcome the aesthetic attack on my help systems by inserting the following into my project .CSS:

Code: Select all

:focus
     {
	     outline: none;
     }
It appears to work in all of the major browsers: Edge, ChromeDome, Opera.

Thank you very much for your help. Health and longevity to you, and hopefully the odd chocolate muffin or two!
It's Ms, actually, but in any event I do go by Choccie to friends - and we're all friends on the Flare forums! Glad I was able to help, and chocolate muffins will be consumed to celebrate the fact that I could! :D
Started as a newbie with Flare 6.1, now using Flare 2023.
Report bugs at http://www.madcapsoftware.com/bugs/submit.aspx.
Request features at https://www.madcapsoftware.com/feedback ... quest.aspx
Post Reply