Using the button tag

[Scott Johnson]

I have not used a button tag before and need a bit of help on the
design/function.

I am using it as an event trigger to call ajax to load some size info.

When I click on it I get a rather large border around it and I am not
sure how to prevent that.

Can you help plz.

Here is what I have:

<button style='width:200px; background-color: #6F2927; color: white;
font-weight: bold; border: none;' onclick="displaySizes(this)"
id="xyz">Click</button>

Thanks
Scotty

[Jukka K. Korpela]

2013-04-11 6:55, Scott Johnson wrote:

> I have not used a button tag before and need a bit of help on the
> design/function.

This group is about style sheets only.

> I am using it as an event trigger to call ajax to load some size info.

That's irrelevant for the purposes of styling.

> When I click on it I get a rather large border around it and I am not
> sure how to prevent that.

On which browser(s) for which code?

> Here is what I have:
>
> <button style='width:200px; background-color: #6F2927; color: white;
> font-weight: bold; border: none;' onclick="displaySizes(this)"
> id="xyz">Click</button>

There is nothing in the CSS code disclosed that causes any border to
appear. On the contrary, it removes the default border that browsers
(typically) draw by default. Thus it also prevents the normal visual
effect where a button seems to get pressed down and raise up when
clicked on. So it is easy to see a problem created by the styling here,
but this does not appear to be the problem you are talking about.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

[Scott Johnson]

On 4/10/2013 9:11 PM, Jukka K. Korpela wrote:
> 2013-04-11 6:55, Scott Johnson wrote:
>
>> I have not used a button tag before and need a bit of help on the
>> design/function.
>
> This group is about style sheets only.

Ignore the function part.

>
>> I am using it as an event trigger to call ajax to load some size info.
>
> That's irrelevant for the purposes of styling.

That was purely informational, ignore.

>
>> When I click on it I get a rather large border around it and I am not
>> sure how to prevent that.
>
> On which browser(s) for which code?

I am currently using FF but it will be viewed on Chrome, IE and safari
for the most part.

>
>> Here is what I have:
>>
>> <button style='width:200px; background-color: #6F2927; color: white;
>> font-weight: bold; border: none;' onclick="displaySizes(this)"
>> id="xyz">Click</button>
>
> There is nothing in the CSS code disclosed that causes any border to
> appear. On the contrary, it removes the default border that browsers
> (typically) draw by default. Thus it also prevents the normal visual
> effect where a button seems to get pressed down and raise up when
> clicked on. So it is easy to see a problem created by the styling here,
> but this does not appear to be the problem you are talking about.
>

Yeah I do not want the default border to show up after it has been
clicked or not even important to have the border prior to clicking.

Maybe if I show where it is being used it will make sense.

http://animo.futureshocksolutions.com/index.php?route=product/product&product_id=948

The buttons in question are the red(ish) ones top center with color
names in them.

You will notice after they are clicked they grow from the outer border
being added. That I would like to prevent.


Thanks for your reply
Scotty

[Jukka K. Korpela]

2013-04-11 7:31, Scott Johnson wrote:

>>> <button style='width:200px; background-color: #6F2927; color: white;
>>> font-weight: bold; border: none;' onclick="displaySizes(this)"
>>> id="xyz">Click</button>

[...]

> Yeah I do not want the default border to show up after it has been
> clicked or not even important to have the border prior to clicking.

The code on the page seems to do rather the opposite: it removes the
default border initially but then adds a wider (3 pixels) border when
the button is clicked on.

> Maybe if I show where it is being used it will make sense.
>
> http://animo.futureshocksolutions.com/index.php?route=product/product&product_id=948
>
> The buttons in question are the red(ish) ones top center with color
> names in them.
>
> You will notice after they are clicked they grow from the outer border
> being added. That I would like to prevent.

If you use Developer Tools (press F12) in your favorite browser and
inspect a button element on the page, you will see that it indeed has
the markup quoted above, but after clicking, the element has changed.

The reason is that the onclick handler calls displaySizes(), passing the
button element as argument, and that function contains the assignment

oColor.style.border = "3px solid #6F2927";

where oColor is the argument of the function, so here it points to the
button element. And this causes the border to appear. To prevent that,
remove the assignment.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

[Evertjan.]

Scott Johnson wrote on 11 apr 2013 in
comp.infosystems.www.authoring.stylesheets:

> You will notice after they are clicked they grow from the outer border
> being added. That I would like to prevent.

css manipulation of <button> is inconsistent cross-browser-wise.

If you do not like these varying standard effects of <button>,
and want it to be cross-browser consistent,
better construct your own button, using

<style type='text/css'>
div.b1 {...}
div.b1:hover {...}
etc
</style>

<div class='b1' onclick='...'>...</div>

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[Scott Johnson]

Wow, new eyes on a project sure helped. Yes that area was originally
images that I bordered after clicked and completely forgot about it.

Thank you thank you.

Scotty

[Scott Johnson]

On 4/11/2013 2:29 AM, Evertjan. wrote:
> Scott Johnson wrote on 11 apr 2013 in
> comp.infosystems.www.authoring.stylesheets:
>
>> You will notice after they are clicked they grow from the outer border
>> being added. That I would like to prevent.
>
> css manipulation of <button> is inconsistent cross-browser-wise.
>
> If you do not like these varying standard effects of <button>,
> and want it to be cross-browser consistent,
> better construct your own button, using
>
> <style type='text/css'>
> div.b1 {...}
> div.b1:hover {...}
> etc
> </style>
>
> <div class='b1' onclick='...'>...</div>
>

Ahhh, I like this approach. Thanks for the insight.

Scotty

[Johannes Koch]

Am 11.04.2013 11:29, schrieb Evertjan.:

> If you do not like these varying standard effects of<button>,
> and want it to be cross-browser consistent,
> better construct your own button, using
>
> <style type='text/css'>
> div.b1 {...}
> div.b1:hover {...}
> etc
> </style>
>
> <div class='b1' onclick='...'>...</div>

Could be good to add a role attribute.

--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)

[Chris F.A. Johnson]

A useful trick, which may or may not be relevant to your problem,
is to put a transparent border around an element and change the
colour with :hover or :visited or whatever:

.button { border: 3px solid transparent; }
.button:hover { border-color: blue; }

--
Chris F.A. Johnson
<http://torontowebdesign.cfaj.ca/>

[tlvp]

On Wed, 10 Apr 2013 21:31:45 -0700, Scott Johnson wrote:

> The buttons in question are the red(ish) ones top center with color
> names in them.
>
> You will notice after they are clicked they grow from the outer border
> being added. That I would like to prevent.

But they are doing just what the page says they should do:

> Mouse Over/Click to Enlarge

Mouse over one, and then click it, and it enlarges. In Safari 5.* on Vista.

Cheers, -- tlvp
--
Avant de repondre, jeter la poubelle, SVP.

[Scott Johnson]

Yeah I forgot I had it coded to do just that. I need to learn to use
the browser developer tools for often...

[Scott Johnson]

That is an excellent idea. That way you don't get that jump when its
borders expand and contract.

THANKS!

scotty