The 1st Styled button has a black square around it

muesliflakes

I am using styled buttons which look really good, my problem is that
the 1st button on the page has an ugly black square arround it. I
think this might indicate the default button when enter is pressed.
How can I remove this square.

HTML

<input type="submit" name="btnShowCurrent" value="Show Current"
id="btnShowCurrent" class="btn" onMouseover="btnHov(this, 'btn
btnHov'); return;" onMouseout="btnHov(this, 'btn'); return;"
onfocus="blur()" />

<input type="submit" name="btnShowAll" value="Show All"
id="btnShowAll" class="btn" onMouseover="btnHov(this, 'btn btnHov');
return;" onMouseout="btnHov(this, 'btn'); return;" onfocus="blur()" />

JavaScript

function btnHov( loc,cls)
{
if(loc.className)
loc.className=cls;
}
CSS

..btn
{
color: #000000;
background-color: #ccccff;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
font-style: italic;
font-weight: 700;
width: 75px;
text-decoration: none;
padding: 0 3px 0 10px;
background-image: url(/MT/img/RedArrowRight.png);
background-repeat: no-repeat;
border: solid 1px; /* #cccccc */
border-color: #eeeeee #666666 #666666 #eeeeee;
}
..btn:hover, .btnHov
{
border: solid 1px #000000;
background-color: #FF7200;
}

Jul 20 '05 #1

Harlan Messinger

mu**********@yahoo.com.au (muesliflakes) wrote:

I am using styled buttons which look really good, my problem is that
the 1st button on the page has an ugly black square arround it. I
think this might indicate the default button when enter is pressed.
Correct.
How can I remove this square.

You don't. Why would you want to remove the helpful visual cue that
the browser provides to the user? One could say that having hyperlinks
underlined in blue is ugly, since it messes up the appearance of your
text, but how else are the users going to know where the links are?

[code snipped]

--
Harlan Messinger
Remove the first dot from my e-mail address.
Veuillez ôter le premier point de mon adresse de courriel.

Jul 20 '05 #2

Raymond Loman

You do.

load the page and put some javascript beneath the page that goes like this

<script language="javascript">
document.getElementById("<id of your button").blur();// loose focus
</script>

Raymond Loman
e: ra*****@raymondloman.nl
i: http://www.raymondloman.nl

Harlan Messinger <hm*******************@comcast.net> wrote in message news:<2f********************************@4ax.com>. ..

mu**********@yahoo.com.au (muesliflakes) wrote:

I am using styled buttons which look really good, my problem is that
the 1st button on the page has an ugly black square arround it. I
think this might indicate the default button when enter is pressed.

Correct.

How can I remove this square.

You don't. Why would you want to remove the helpful visual cue that
the browser provides to the user? One could say that having hyperlinks
underlined in blue is ugly, since it messes up the appearance of your
text, but how else are the users going to know where the links are?

[code snipped]

Jul 20 '05 #3

Spartanicus

ra*****@raymondloman.nl (Raymond Loman) wrote:

Please don't top post in these groups.

--
Spartanicus

Jul 20 '05 #4

Raymond Loman

If you would like to loose focus of an element after (during) loading the page:

Just place the code:
<script language="javascript">
document.getElementById("myImageId").blur();
</script>

in the bottom of the body of your html-document and the images (button,
whatsoever) should loose focus. That's what you (and sometimes I) want.

Hope this helps.

Raymond Loman
e: ra*****@raymondloman.nl
i: http://www.raymondloman.nl

Spartanicus <me@privacy.net> wrote in message news:<r1********************************@news.spar tanicus.utvinternet.ie>...

ra*****@raymondloman.nl (Raymond Loman) wrote:

Please don't top post in these groups.

Jul 20 '05 #5