By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
448,496 Members | 1,266 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 448,496 IT Pros & Developers. It's quick & easy.

IE6 bug UL style problem in table

P: n/a
http://www.bytewise.com.au/test/iebug.html

I can not see why this doesn't work under IE6. Perhaps someone can shed some
light on this, and a possible hack to get it to work. My ultimate goal is to
make the entire List a hot link and NOT just the text in the LI elements.
Enclosing the <UL>...</UL> in an anchor such as:

<a> href="..."><UL>...</UL></A>

will make the text hot only. So figured I'd Javascript it. I can make the
entire <TD>...</TD> like a hot link by placing onClick"" code in the TD
element but that has its own set of problems. and is overkill.

Also, how do I get a "hand" icon? style="cursor: hand;" only works under IE
as "hand" is NOT part of the CSS2 specs. Another case where Netscape's
strict adherence to the standards is excellent, but a shortfall when
delivering what we really want. I can not use the URI to point to a hand
image for other technical reasons - a design requirement, no graphics.
regards,
-randall
Jul 20 '05 #1
Share this Question
Share on Google+
18 Replies


P: n/a
"Randall Sell" <ra*********@nospam.yahoo.com> wrote:
My ultimate goal is to
make the entire List a hot link and NOT just the text in the LI
elements.
You cannot do that in HTML, and CSS will not help you around this.
Enclosing the <UL>...</UL> in an anchor such as:

<a> href="..."><UL>...</UL></A>

will make the text hot only.


It will only make the markup invalid, with unpredictable results.
Today, on your favorite browser, something may look hot to you.

If you explained what your _real_ goal is (that is, what you expect to
achieve by making a list "hot", and in what context), maybe someone
could suggest some solutions.

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Jul 20 '05 #2

P: n/a

"Jukka K. Korpela" <jk******@cs.tut.fi> wrote in message
news:Xn*****************************@193.229.0.31. ..
"Randall Sell" <ra*********@nospam.yahoo.com> wrote:
My ultimate goal is to
make the entire List a hot link and NOT just the text in the LI
elements.
You cannot do that in HTML, and CSS will not help you around this.


I beg to differ, as it works exactly how I want it to work under Netscape
7.x. And I am making the assumption that Netscape follows the CSS standards
better then IE hence it is a bug in IE. Are you saying that it is a fluke
that it works under Netscape?
Enclosing the <UL>...</UL> in an anchor such as:

<a> href="..."><UL>...</UL></A>

will make the text hot only.


It will only make the markup invalid, with unpredictable results.
Today, on your favorite browser, something may look hot to you.

If you explained what your _real_ goal is (that is, what you expect to
achieve by making a list "hot", and in what context), maybe someone
could suggest some solutions.

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


Perhaps I should clarify, I don't want to put an anchor tag <a> around a UL
tag. I want to simulate this. So instead, I have onmouseover, onmouseout and
onclick events on the UL element. So I can make it look, like I want by
applying styles in my onmouseover/out events. And I can run the code I want
in the onclick event. So it is working fine, under Netscape, just not IE
which insists I am over the text. Otherwise it to runs fine.

And why would anyone do this? Well, I have a grid of data. Across the top
are different vendors being bench marked again different criteria (down the
left side). Each cell then has a number. But in fact, the data can be "seen"
in one of three ways. So inside each cell <TD> I've created a UL with three
LI tags inside it, displaying "views" of the crunched numbers. That
information can be further drilled into, which means I need to go to a
document.location.href="somelocation" in my JavaScript code. It is much more
convenient for the user to click anywhere inside the UL, vs on the text
itself. In addition, I want to show window.status messages on the bottom to
indicate what they will see when they click on the pseudo links.

Hence, it would have been very nice, had the powers that be instilled a
"cursor: hand" style into CSS2. Sadly, I must use the "cursor: help" as the
closest thing since Netscape does not support a "hand" cursor style.

so, if anyone knows a better way to achieve this, I am all ears.

regards,
-randall
Jul 20 '05 #3

P: n/a
"Randall Sell" <ra*********@nospam.yahoo.com> wrote:
And why would anyone do this? Well, I have a grid of data. Across the top
are different vendors being bench marked again different criteria (down the
left side). Each cell then has a number. But in fact, the data can be "seen"
in one of three ways. So inside each cell <TD> I've created a UL with three
LI tags inside it, displaying "views" of the crunched numbers. That
information can be further drilled into, which means I need to go to a
document.location.href="somelocation" in my JavaScript code. It is much more
convenient for the user to click anywhere inside the UL, vs on the text
itself. In addition, I want to show window.status messages on the bottom to
indicate what they will see when they click on the pseudo links.
<li><a href="..." title="...">....</a></li>

a {display: block;}

The link will now fill the whole of the list item. So clicking
anywhere within the li will trigger the link.

Use a standard link, not document.location

And use the title attribute to supply additional info, not mouseover
and window.status
Hence, it would have been very nice, had the powers that be instilled a
"cursor: hand" style into CSS2. Sadly, I must use the "cursor: help" as the
closest thing since Netscape does not support a "hand" cursor style.


cursor: pointer is the standard, cursor: hand is a microsoftism. But
using ordinary links as suggested above you won't need to do anything
extra.

Does that help? I think it gets rid off all the JavaScript.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #4

P: n/a
"Randall Sell" <ra*********@nospam.yahoo.com> wrote:
I beg to differ, as it works exactly how I want it to work under
Netscape 7.x.
Consider it an illusion. What happens when you disable JavaScript?
Perhaps I should clarify, I don't want to put an anchor tag <a>
around a UL tag.
Maybe you should learn some elementary HTML terminology before you try
to explain your problem. Check the difference between "tag" and
"element" first.
I want to simulate this.
Why don't you tell the real goal, instead of saying that you want to
simulate a syntax error?
So instead, I have
onmouseover, onmouseout and onclick events on the UL element.


Instead of what?

Just stop using pseudo-links. When you use real links, the problem
either vanishes or becomes a simple, solvable problem like "how do I
make a link's visual appearance occupy a certain box"? Real links have
the inherent limitation that they have inline content only. Live with
it.

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Jul 20 '05 #5

P: n/a
Randall Sell wrote:
Hence, it would have been very nice, had the powers that be instilled a
"cursor: hand" style into CSS2.
What's wrong with cursor: pointer?
Sadly, I must use the "cursor: help" as the
closest thing since Netscape does not support a "hand" cursor style.


Of course it doesn't, since "hand" is not a permissible value of the
cursor property.

http://www.w3.org/TR/REC-CSS2/ui.html#propdef-cursor

--
Brian
follow the directions in my address to email me

Jul 20 '05 #6

P: n/a
In message <2N********************@news-server.bigpond.net.au>, Randall
Sell <ra*********@nospam.yahoo.com> writes
I have onmouseover, onmouseout and onclick events on the UL element.


How will they work, for someone navigating with a keyboard, voice
browser or such like?
--
Andy Mabbett Reply to [my first name] [at] pigsonthewing.org.uk
USA imprisons children without trial, at Guantanamo Bay:
<http://news.bbc.co.uk/1/hi/world/south_asia/2970279.stm>
<http://web.amnesty.org/library/Index/ENGAMR510582003?open&of=ENG-USA>
Jul 20 '05 #7

P: n/a

"Steve Pugh" <st***@pugh.net> wrote in message
news:a3********************************@4ax.com...
"Randall Sell" <ra*********@nospam.yahoo.com> wrote:
And why would anyone do this? Well, I have a grid of data. Across the top
are different vendors being bench marked again different criteria (down theleft side). Each cell then has a number. But in fact, the data can be "seen"in one of three ways. So inside each cell <TD> I've created a UL with threeLI tags inside it, displaying "views" of the crunched numbers. That
information can be further drilled into, which means I need to go to a
document.location.href="somelocation" in my JavaScript code. It is much moreconvenient for the user to click anywhere inside the UL, vs on the text
itself. In addition, I want to show window.status messages on the bottom toindicate what they will see when they click on the pseudo links.


<li><a href="..." title="...">....</a></li>

a {display: block;}

The link will now fill the whole of the list item. So clicking
anywhere within the li will trigger the link.

Use a standard link, not document.location

And use the title attribute to supply additional info, not mouseover
and window.status
Hence, it would have been very nice, had the powers that be instilled a
"cursor: hand" style into CSS2. Sadly, I must use the "cursor: help" as theclosest thing since Netscape does not support a "hand" cursor style.


cursor: pointer is the standard, cursor: hand is a microsoftism. But
using ordinary links as suggested above you won't need to do anything
extra.

Does that help? I think it gets rid off all the JavaScript.

Steve


Thanx, that was very helpful. Although there would appear to be a bug in IE
6 where this technique:
a {display: block;}
<li><a href="..." title="...">....</a></li>

Does not work when embedded in a <table> (Note, it DOES work if it is in the
first TD, other TDs you need to be over the text itself)

I guess I am trying to draw a balance. This HTML is going to be very large -
probably 100k or so after it is dynamically created. so I was trying to keep
the size down by moving redundant code to JavaScript routines.

For example, rather then have
<a title="a description that is repeated in many places">my hot text </a>

I use Javascript. The above line might appear 200+ times in the HTML report.
So in an attempt to keep the physical file size smaller I use the
onmouseover etc to put in my help hint. I can achieve similar results
(window.status vs title attrib) and save a lot of bytes in terms of overall
file size.

In an idea world, the report would be framed, and have multiple documents,
but we don't have that luxury in this case. so am curious as to how you
might handle this restriction? Considering I have no choice but to use
Javascripting in other areas (and hence required in order for the report to
render correctly) would you still advise on using title="" vs JavaScript? I
do have a NOSCRIPT tag to advise the user they need it turned on.

thanx for your input
-randall

ps- care to see the work in progress...
http://www.bytewise.com.au/test/reportwriterproto.html

Jul 20 '05 #8

P: n/a

"Brian" <us*****@mangymutt.com.invalid-remove-this-part> wrote in message
news:M6jfb.487015$Oz4.331195@rwcrnsc54...
Randall Sell wrote:
Hence, it would have been very nice, had the powers that be instilled a
"cursor: hand" style into CSS2.


What's wrong with cursor: pointer?
Sadly, I must use the "cursor: help" as the
closest thing since Netscape does not support a "hand" cursor style.


Of course it doesn't, since "hand" is not a permissible value of the
cursor property.

http://www.w3.org/TR/REC-CSS2/ui.html#propdef-cursor

--
Brian


cursor: hand works for IE
cursor: pointer works for NS (and presumably everything else that follows
the CSS2 standard). You can get both IE and NS working together by doing:

cursor: pointer;
cursor: hand; /*this must be included AFTER the proper definition so IE
will pick it up*/

and that seems to do the trick for both browsers

-randall
Jul 20 '05 #9

P: n/a

"Andy Mabbett" <us**********@pigsonthewing.org.uk> wrote in message
news:oB**************@pigsonthewing.org.uk...
In message <2N********************@news-server.bigpond.net.au>, Randall
Sell <ra*********@nospam.yahoo.com> writes
I have onmouseover, onmouseout and onclick events on the UL element.


How will they work, for someone navigating with a keyboard, voice
browser or such like?
--
Andy Mabbett Reply to [my first name] [at] pigsonthewing.org.uk


Agreed http://www.bytewise.com.au/test/reportwriterproto.html

is NOT a good example for HTML that must run across different rendering
agents. Fortunately in my case, my users are barely smart enough to boot
their PCs. They don't stray far from the mouse.

But that raises another issue- How does one print a table that is wider then
the physical paper? For example a <table> that has say 80 columns each
column being 200+ px. Even A3 size paper in landscape mode can not handle
that width. Is there an elegant solution to this?

My plan was to simply ask the user how many columns they want, before the
HTML is generated. And simply build another table below the first, etc.
since non of the big web browsers seem to act like Excel, creating overflow
pages.

regards,
-randall
Jul 20 '05 #10

P: n/a
Randall Sell wrote:

cursor: hand works for IE


not necessarily. I just tested cursor: hand and cursor: pointer in
MSIE 5/win2k. Neither had any effect.

--
Brian
follow the directions in my address to email me

Jul 20 '05 #11

P: n/a

"Brian" <us*****@mangymutt.com.invalid-remove-this-part> wrote in message
news:sKjgb.508569$Oz4.359827@rwcrnsc54...
Randall Sell wrote:

cursor: hand works for IE


not necessarily. I just tested cursor: hand and cursor: pointer in
MSIE 5/win2k. Neither had any effect.

--
Brian
follow the directions in my address to email me


That is odd. I just tested under my IE 5 / winNT4 and it worked correctly

http://www.bytewise.com.au/test/reportwriterproto.html

The more I work with these browsers, the more I like Mozilla/Netscape!

-rs
Jul 20 '05 #12

P: n/a
Randall Sell wrote:
"Brian" <us*****@mangymutt.com.invalid-remove-this-part> wrote
in message news:sKjgb.508569$Oz4.359827@rwcrnsc54...
I just tested cursor: hand and cursor: pointer in
MSIE 5/win2k. Neither had any effect.


That is odd. I just tested under my IE 5 / winNT4 and it worked


IE 5.0? or 5.5? If it's 5.0, which I'm using, then perhaps it's the
os. (?)

--
Brian
follow the directions in my address to email me

Jul 20 '05 #13

P: n/a

"Brian" <us*****@mangymutt.com.invalid-remove-this-part> wrote in message
news:zy********************@rwcrnsc51.ops.asp.att. net...
Randall Sell wrote:
"Brian" <us*****@mangymutt.com.invalid-remove-this-part> wrote
in message news:sKjgb.508569$Oz4.359827@rwcrnsc54...
I just tested cursor: hand and cursor: pointer in
MSIE 5/win2k. Neither had any effect.


That is odd. I just tested under my IE 5 / winNT4 and it worked


IE 5.0? or 5.5? If it's 5.0, which I'm using, then perhaps it's the
os. (?)

--
Brian
follow the directions in my address to email me


I would say it is the OS, as I have specifically setup this box to run NT4
(sp6) with IE 5.0 - which is the lowest (or oldest) configuration I need to
support for this particular HTML application. Are you certain the above URL
above does NOT work under Win2k / IE5? I have not tested that combination
specifically but assumed that if it was OK under NT4, then it would be
smooth sailing for any newer OS or browser. If not, it is going to be a
looong next few weeks for me...

regards,
-randall
Jul 20 '05 #14

P: n/a
"Randall Sell" <ra*********@nospam.yahoo.com> wrote:
Thanx, that was very helpful. Although there would appear to be a bug in IE
6 where this technique:
a {display: block;}
<li><a href="..." title="...">....</a></li>

Does not work when embedded in a <table> (Note, it DOES work if it is in the
first TD, other TDs you need to be over the text itself)
I've had some problems with IE in this area, are any of the containing
elements floated or positioned? That seems to have an effect.
Otherwise, yeah it's a pain when IE gets its knickers in a twist.
I guess I am trying to draw a balance. This HTML is going to be very large -
probably 100k or so after it is dynamically created. so I was trying to keep
the size down by moving redundant code to JavaScript routines.

For example, rather then have
<a title="a description that is repeated in many places">my hot text </a>

I use Javascript. The above line might appear 200+ times in the HTML report.
So in an attempt to keep the physical file size smaller I use the
onmouseover etc to put in my help hint. I can achieve similar results
(window.status vs title attrib) and save a lot of bytes in terms of overall
file size.
window.status really isn't comparable to title.
Users are much more likely to see the text if it's in a title
attribute - my browser doesn't even have a status bar visible at the
moment.
Considering I have no choice but to use
Javascripting in other areas (and hence required in order for the report to
render correctly) would you still advise on using title="" vs JavaScript?
If I was going a JS heavy route then I would dynamically set the title
attribute rather than set a status bar message. It would only be a
small change to the code you have there already.

But looking at the messages your setting, I wouldn't bother at all.
This is not an application for the general public and so the users
should know basic things such that a link will "Show detailed grader
information."
I do have a NOSCRIPT tag to advise the user they need it turned on.
You need to put the noscript element in the body of the page, not the
head, and the message should be a bit friendlier.
thanx for your input
-randall

ps- care to see the work in progress...
http://www.bytewise.com.au/test/reportwriterproto.html


I get a constant stream of JavaScripr error messages in IE6.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #15

P: n/a

"Steve Pugh" <st***@pugh.net> wrote in message
news:33********************************@4ax.com...
"Randall Sell" <ra*********@nospam.yahoo.com> wrote:
Does not work when embedded in a <table> (Note, it DOES work if it is in thefirst TD, other TDs you need to be over the text itself)
I've had some problems with IE in this area, are any of the containing
elements floated or positioned? That seems to have an effect.
Otherwise, yeah it's a pain when IE gets its knickers in a twist.


There are floating elements in this HTML, although not within the <table>
But it is now somewhat of a moot point as I am not using <a> tags at all.
The onmouseover is working well under both browsers. Just another item to
remember in the "this don't work under IE" list.

But looking at the messages your setting, I wouldn't bother at all.
This is not an application for the general public and so the users
should know basic things such that a link will "Show detailed grader
information."
You are over estimating the intelignece of my users :) They need as much
hand holding as I can give them.
I do have a NOSCRIPT tag to advise the user they need it turned on.
You need to put the noscript element in the body of the page, not the
head, and the message should be a bit friendlier.


according to
http://www.w3.org/TR/REC-html40/inte...#edef-NOSCRIPT

The NOSCRIPT element allows authors to provide alternate content when a
script is not executed. The content of a NOSCRIPT element
should only be rendered by a script-aware user agent in the
following cases:
The user agent is configured not to evaluate scripts.
The user agent doesn't support a scripting language invoked by
a SCRIPT element earlier in the document.

To play it safe, I placed it before any <script> declaration. It seems to
work fine in the header or in the body.

Ideally, I'd like NOT to render any of the HTML if they don't support
javascript, but don't see a way I can do that easily.

I get a constant stream of JavaScripr error messages in IE6.


Really? I get none. What is your environment? Win2k or WinMe? or NT4? or
other? Mine shows no errors at all. can you copy/paste so I might see? Note
that not all links are complete so there are places you can click that are
technically invalid. it is just a prototype. but most links should be ok.

thanx,
-randall
Jul 20 '05 #16

P: n/a
On Tue, 07 Oct 2003 09:25:42 GMT, "Randall Sell"
<ra*********@nospam.yahoo.com> wrote:
To play it safe, I placed it before any <script> declaration. It seems to
work fine in the header or in the body.


No, the content of NOSCRIPT is body content, so it must go in the
body, it can't go in the HEAD, as soon as you put any content in it,
in HTML the HEAD will end and the BODY begin, or in XHTML you'll just
get an error.

Jim.
--
comp.lang.javascript FAQ - http://jibbering.com/faq/

Jul 20 '05 #17

P: n/a
"Randall Sell" <ra*********@yahoo.com> wrote:
"Steve Pugh" <st***@pugh.net> wrote:

You are over estimating the intelignece of my users :) They need as much
hand holding as I can give them.
Then put the help messages where they stand a good chance of seeing
them...
To play it safe, I placed it before any <script> declaration. It seems to
work fine in the header or in the body.


It is only allowed in the body. By placing it in the head you
terminate the head and start the body. Check it in a validator and
see.

Or imagine you were a non-JS capable browser. You ignore all those
funny script elements and the noscript tags. So what you do see is a
page that looks like this:

<html>
<head>
<h1>this page need JavaScript</h1>
</head>
<body>
blah blah
</body>
</html>
I get a constant stream of JavaScripr error messages in IE6.

Really? I get none. What is your environment? Win2k or WinMe? or NT4? or
other? Mine shows no errors at all. can you copy/paste so I might see?


WinXP. As soon as I move the mouse over any part of the page I get the
error "'className' is null or not and object" reported for lines 48
and 70.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #18

P: n/a

"Steve Pugh" <st***@pugh.net> wrote in message
news:m8********************************@4ax.com...
"Randall Sell" <ra*********@yahoo.com> wrote:
"Steve Pugh" <st***@pugh.net> wrote:

You are over estimating the intelignece of my users :) They need as much
hand holding as I can give them.


Then put the help messages where they stand a good chance of seeing
them...
To play it safe, I placed it before any <script> declaration. It seems to
work fine in the header or in the body.


It is only allowed in the body. By placing it in the head you
terminate the head and start the body. Check it in a validator and
see.

Or imagine you were a non-JS capable browser. You ignore all those
funny script elements and the noscript tags. So what you do see is a
page that looks like this:

<html>
<head>
<h1>this page need JavaScript</h1>
</head>
<body>
blah blah
</body>
</html>
I get a constant stream of JavaScripr error messages in IE6.

Really? I get none. What is your environment? Win2k or WinMe? or NT4? or
other? Mine shows no errors at all. can you copy/paste so I might see?


WinXP. As soon as I move the mouse over any part of the page I get the
error "'className' is null or not and object" reported for lines 48
and 70.

Steve


Thanx for helping debug my HTML. Both points taken.
-randall
Jul 20 '05 #19

This discussion thread is closed

Replies have been disabled for this discussion.