473,569 Members | 2,700 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Empty <span> + onlick

Take this small HTML fragment:

span.theClass{f loat:left;width :100px;cursor:p ointer;cursor:h and;}
------------------------
<div>
<span id="1" class="theClass ">&nbsp;<sp an>
<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
Jun 27 '08 #1
5 3524
On Wed, 23 Apr 2008 01:36:59 +0200, Brent <wr********@gma il.comwrote:
Take this small HTML fragment:

span.theClass{f loat:left;width :100px;cursor:p ointer;cursor:h and;}
------------------------
<div>
<span id="1" class="theClass ">&nbsp;<sp an>
<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
Jun 27 '08 #2
[Full quote intended]

Brent wrote:
[...]
span.theClass{f loat:left;width :100px;cursor:p ointer;cursor:h and;}
------------------------
<div>
<span id="1" class="theClass ">&nbsp;<sp an>
<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.infosystem s.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.de mon.co.uk>
Jun 27 '08 #3
On Apr 22, 8:36 pm, Brent <writebr...@gma il.comwrote:
Take this small HTML fragment:

span.theClass{f loat:left;width :100px;cursor:p ointer;cursor:h and;}
------------------------
<div>
<span id="1" class="theClass ">&nbsp;<sp an>
<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.
Jun 27 '08 #4
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
Jun 27 '08 #5
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
Jun 27 '08 #6

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
2567
by: Alexander Ross | last post by:
I have an html snippet, and I want to remove any <span> tags that have a specific attribute (class=none) ex. The quick brown <span class="animal">fox</span> jumped <span class="none">over</span> the lazy dog should become The quick brown <span class="animal">fox</span> jumped over the lazy dog
13
3386
by: Mikko Ohtamaa | last post by:
From XML specification: The representation of an empty element is either a start-tag immediately followed by an end-tag, or an empty-element tag. (This means that <foo></foo> is equal to <foo/>) From XHTML specification:
3
3265
by: Andrew Tang | last post by:
Hi. I'm having problems with the following code. The last line seems to be in the wrong place, its been moved down slightly by about 3 pixels in IE6. <html> <head> <title>Lorem Ipsum</title> </head> <body> <p> <span style="font-size:10px;">Lorem ipsum dolor sit amet, consectetuer
18
4340
by: Timothy Casey | last post by:
Thanks in advance... =~= Timothy Casey South Australia worloq@iprimus.com.au Formerly: casey@smart.net.au
9
6795
by: Wang, Jay | last post by:
Hello, all, I would like to enable some text between <SPAN url="http://www.testserver.com/">WORD TO BE DRAGGED </SPAN>. I put some javascript and it will extract http://www.testserver.com/ from the the span element when I select the whole text in the SPAN and drag it. However, I want to drag it without have to select the words between the...
2
19566
by: xhe | last post by:
I met a very headache problem in javascript, I think this might be difference between IE and NS / Safari. I have a text area <form> <textarea name='tex1' onkeyup='displayit();'></textarea> </form> <span id="txtValue"></span> <script language='javascript'>
1
6773
by: shivani anand | last post by:
Hi.. I have a doubt. I have some code.. <span class="test1"> my screeen </span> I simply changed it to. <h2 class = "test1"> my screen </h2>
0
7924
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. ...
0
8122
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
1
7673
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...
0
7970
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...
0
6284
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...
0
5219
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert...
0
3640
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
1213
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
0
937
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.