Empty <span> + onlick

[Brent]

Take this small HTML fragment:

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

On Wed, 23 Apr 2008 01:36:59 +0200, Brent <wr********@gmail.comwrote:

Take this small HTML fragment:

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

[Thomas 'PointedEars' Lahn]

[Full quote intended]

Brent wrote:

[...]
span.theClass{float:left;width:100px;cursor:pointe r;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, <f8*******************@news.demon.co.uk>

[Thadeu de Paula]

On Apr 22, 8:36 pm, Brent <[e-mail]:

Take this small HTML fragment:

span.theClass{float:left;width:100px;cursor:pointe r;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 <pwith 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>,<lietc.) 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 <spantags to <divtags;
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 <divwith height does.

-Brent

[Thomas 'PointedEars' Lahn]

Brent wrote:

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

1) Converted the <spantags to <divtags;

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 <divwith 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
--
Anyone who slaps a 'this page is best viewed with Browser X' label on
a Web page appears to be yearning for the bad old days, before the Web,
when you had very little chance of reading a document written on another
computer, another word processor, or another network. -- Tim Berners-Lee