Prev: failing to get reference to form object in Firefox
Next: JS menu/iframe conflict
From: Brent on 22 Apr 2008 19:36
Take this small HTML fragment:

span.theClass{float:left;width:100px;cursor:pointer;cursor:hand;}
------------------------
<div>
<span id="1" class="theClass">&nbsp;<span>
<span id="2" class="theClass">Stuff in span<span>
<span id="3" class="theClass"><span>
</div>
------------------------

In Firefox, spans 1 & 2 will display a "hand" cursor for the width of
the span. Span 3 will not display the hand.

In IE, spans 1 & 2 will display a "hand" cursor for the width of the
inside text. Span 3 will not display the hand.

Is there any means by which to display the "hand" for the entire width
of the span, in both browsers, whether or not there is text inside the
span? The goal is to be able to activate an onClick function.

Thanks for any help.

--Brent
From: Rik Wasmus on 22 Apr 2008 19:45
On Wed, 23 Apr 2008 01:36:59 +0200, Brent <writebrent(a)gmail.com> wrote:

> Take this small HTML fragment:
>
> span.theClass{float:left;width:100px;cursor:pointer;cursor:hand;}
> ------------------------
> <div>
> <span id="1" class="theClass">&nbsp;<span>
> <span id="2" class="theClass">Stuff in span<span>
> <span id="3" class="theClass"><span>
> </div>
> ------------------------
>
> In Firefox, spans 1 & 2 will display a "hand" cursor for the width of
> the span. Span 3 will not display the hand.
>
> In IE, spans 1 & 2 will display a "hand" cursor for the width of the
> inside text. Span 3 will not display the hand.

The span has no height, so with no text there's no real 'clickable' or
'hoverable surface.
--
Rik Wasmus
From: Thomas 'PointedEars' Lahn on 22 Apr 2008 19:53
[Full quote intended]

Brent wrote:
> [...]
> span.theClass{float:left;width:100px;cursor:pointer;cursor:hand;}
> ------------------------
> <div>
> <span id="1" class="theClass">&nbsp;<span>
> <span id="2" class="theClass">Stuff in span<span>
> <span id="3" class="theClass"><span>
> </div>
> ------------------------
>
> In Firefox, spans 1 & 2 will display a "hand" cursor for the width of
> the span. Span 3 will not display the hand.
>
> In IE, spans 1 & 2 will display a "hand" cursor for the width of the
> inside text. Span 3 will not display the hand.
>
> Is there any means by which to display the "hand" for the entire width
> of the span, in both browsers, whether or not there is text inside the
> span?

Maybe display:block. Inline element, no content: no canvas, so no mouseover
event that could trigger the style change internally.

> The goal is to be able to activate an onClick function.

That would be utter misuse of the `span' element.

Besides, CSS problems such as this are on-topic in
comp.infosystems.www.authoring.stylesheets instead, see
http://jibbering.com/faq/


PointedEars
--
Prototype.js was written by people who don't know javascript for people
who don't know javascript. People who don't know javascript are not
the best source of advice on designing systems that use javascript.
-- Richard Cornford, cljs, <f806at$ail$1$8300dec7(a)news.demon.co.uk>
From: Thadeu de Paula on 23 Apr 2008 07:49
On Apr 22, 8:36 pm, Brent <writebr...(a)gmail.com> wrote:
> Take this small HTML fragment:
>
> span.theClass{float:left;width:100px;cursor:pointer;cursor:hand;}
> ------------------------
> <div>
> <span id="1" class="theClass">&nbsp;<span>
> <span id="2" class="theClass">Stuff in span<span>
> <span id="3" class="theClass"><span>
> </div>
> ------------------------
>
> In Firefox, spans 1 & 2 will display a "hand" cursor for the width of
> the span. Span 3 will not display the hand.
>
> In IE, spans 1 & 2 will display a "hand" cursor for the width of the
> inside text. Span 3 will not display the hand.
>
> Is there any means by which to display the "hand" for the entire width
> of the span, in both browsers, whether or not there is text inside the
> span? The goal is to be able to activate an onClick function.
>
> Thanks for any help.
>
> --Brent

Hmmmm... I know.. I know... CSS isn't the subject of this topic...
But what you want!?

If you want only one value in the div... put only a <p> with onclick.
Then
set the width, height, text-align, vertical-align...etc.

But if you want spans clickable (something that pops a input and then
changes its value to a span again), so you put a temporary value to
Span
using underline or using display:block and set manually its width/
height to
fit your purpose.

The behavior you're experimenting is the same in inline
(<span><var><b><i>
etc.) elements and block (<p>,<div>,<ul>,<li> etc.) elements. But only
when
you use block element or an inline element with display:block property
set
you can get some clickable area to an element. There are other display
values like 'table-cell' but its behavior is different on same
browsers.
From: Brent on 23 Apr 2008 12:50
Thanks for all your help. I finally solved the problem with the
following steps:

1) Converted the <span> tags to <div> tags;
2) Changed the <div>s style definition to include a height, which it
didn't before.

As Rik pointed out, the element has to have a "clickable surface,"
which a <div> with height does.

-Brent
 |  Next  |  Last
Pages: 1 2
Prev: failing to get reference to form object in Firefox
Next: JS menu/iframe conflict