Dotted lines around hyperlinks [SOLVED]

HTML Executable
1

I made a roll-over button with a hyperlink but there is a dotted line visible around it. It doesn’t show when the page is viewed in any browser, only on the compiled book.
HTML:


    

CSS:

.orderbuttonmargin { margin: 0px; margin-top: 6px; }

.button-order {
color: #FFFFFF;
font: bold 14px arial, serif;
text-align: center;
background-image: url(“picts/button-order-blue.jpg”);
padding: 6px 8px 24px 0px;
cursor:pointer;
width: 150px;
border: #FFFFFF 0px solid;

		}

.buttonon-order {
color: #FFFFFF;
font: bold 14px arial, serif;
text-align: center;
background-color: #FFCC66;
background-image: url(“picts/button-order-white.jpg”);
padding: 6px 8px 24px 0px;
cursor:pointer;
width: 150px;
border: #FFFFFF 0px solid;
}

Can you suggest a solution?

2

I finally found a workaround that overcomes this problem in the html:

Add this line to the hyperlink:
onFocus=“if(this.blur)this.blur()”

i.e.

Description

I failed to find a css solution, and it could be a bit of a pain to add this to every hyperlink, but it does work.

I hope this helps others.

3

Thank you for the follow-up and your solution.

4

Thanks for your reply. However, what I don’t quite get is why, if you use css to ignore the focus, for example:

.a { ... outline-style: none; ... }

It works using IE browser but HTMLEXE seems to ignore this code in the compiled book.

5

It’s the focus to show users the active button or link. There is no option in HTMLEXE to disable it unfortunately.