|
|
Posted by Art on 08/30/07 18:10
On 8/30/07 12:16 PM, Jonathan N. Little wrote:
> Art wrote:
>
>> You can try placing an encoded line feed into the title:
>>
>> <acronym title="apple pie custard tart">
>>
>> although this isn't universally recognized by all browsers for
>> tool-tips. Firefox, IE, and Safari do. Opera and Seamonkey don't
>> (treats it as a space).
>>
>> Although the line feed isn't an HTML named entity
>> (http://www.w3.org/TR/html401/sgml/entities.html), browsers historically
>> have recognized this numerical encoding method.
>
> You didn't try this did you? It isn't recognized at all in a title
> attribute for any browser that I know of including FF and Opera... Now
> on Windows system (LF+CR)works with Gecko and IE but not on
> Opera... Doesn't work with FF on Linux but does with Konqueror... spotty
> at best.
Yes :-).
To clarify, the results for Firefox, Opera, Safari, and Seamonkey were
observed on a Mac. IE6 was observed under W2K. However, I mistakenly
transcribed the Seamonkey and Firefox results: Works on Seamonkey,
yields a single space on FF.
On IE6, the CR is ignored, the LF is sufficient.
Opera ignores the LF and maps the CR to a space.
Actually, encoding a LF/CR combination on Safari results in TWO line feeds.
I saw the same title behavior with both <acronym> and <span>.
Your results on Linux re-enforces my original statement - this encoding
isn't universally recognized by all browsers for tool-tips.
Thus, the LF/CR encoding with either <acronym> or <style> elements would
satisfy the OP request if the browser and platforms can be limited.
Not to fan the flames, but the fact that it does work as desired with
just LF encoding on IE6 on the PC somewhat increases the chance that a
user will observe the intended results :-).
Art
>
>>
>> Jukka's suggestion of using a <span> element will work. However, unlike
>> the <acronym> element, there is no indication to the viewer (no dotted
>> underline or other decoration by the browser) that there is anything
>> additional information available about this word.
>>
>
> Agree, dessert is not an acronym.
>
>> Thus, a unique CSS style/class would need to be created for these
>> <span>'s to flag the user that there is additional information available
>> via tool-tip for the word. You could put a global message on your page
>> to that effect.
>
> Sill idea but CSS popup would work and degrade where the information
> would be availably to the user...
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
> "http://www.w3.org/TR/html4/strict.dtd">
> <html>
> <head>
> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
> <meta http-equiv="content-language" content="en-us">
> <title>CSS balloon</title>
>
> <style type="text/css">
> .balloon { position: relative; border-bottom: 1px dashed #0f0; }
> .balloon span {
> display: block; position: absolute;
> top: .5em; left: -100em; /* push out of view*/
> border: 1px solid #000; padding: .25em;
> color: #000; background-color: #ffd;
> white-space: nowrap; /* prevent wrapping except where you specify */
> }
>
> .balloon { behavior: url(IEFixes.htc); } /* IE hover attachment */
> .balloon:hover span,
> .balloon.hover span { left: 1em; } /* move into viewport */
>
> </style>
> </head>
>
> <body>
> <p>One way is with a CSS styled element <span class="balloon">
> <span>apple pie<br>custard tart</span>desserts</span>,
> would work. For <span title="12 345">IE</span> you will have to
> use a bit of JavaScript
> or HTC file hack.
> </p>
> </body>
> </html>
>
>
> and the HTC file:
>
> <public:component>
> // For MSIE use JScript to attach JS functions to compensate
> // for missing pseudo-class support
> // from Vladdy http://www.vladdy.net/Demos/IEPseudoClassesFix.html
> // updated for html4.01 jnl 3/06
> <public:attach event="onmouseover" onevent="DoHover()">
> <public:attach event="onmouseout" onevent="RestoreHover()">
> <public:attach event="onmousedown" onevent="DoActive()">
> <public:attach event="onmouseup" onevent="RestoreActive()">
> <script type="text/jscript">
> function DoHover(){
> element.className += ' hover';
> }
> function DoActive(){
> element.className += ' active';
> }
> function RestoreHover(){
> element.className = element.className.replace(/\shover\b/,'');
> }
> function RestoreActive(){
> element.className = element.className.replace(/\sactive\b/,'');
> }
> </script>
> </public:component>
>
>
Navigation:
[Reply to this message]
|