Empty <span> + onlick

[Brent]

Take this small HTML fragment:

span.theClass{float:left;width:100px;cursorointer;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

 

[Rik Wasmus]

Take this small HTML fragment:

span.theClass{float:left;width:100px;cursorointer;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.

 

[Thomas 'PointedEars' Lahn]

[Full quote intended]

[...]
span.theClass{float:left;width:100px;cursorointer;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

 

[Thadeu de Paula]

Take this small HTML fragment:

span.theClass{float:left;width:100px;cursorointer;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.

 

[Brent]

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

 

[Thomas 'PointedEars' Lahn]

Thanks for all your help. I finally solved the problem with the
following steps:

1) Converted the <span> tags to <div> tags;

display:block would have achieve the same, but neither one is any better
than an accessible solution.

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.

However, this solution is likely to constitute an utter misuse of the
`div' element as well, a solution that does not degrade gracefully.


PointedEars