Sent by Paul Novitski on 17 May 2005 17:05
Ingo,
Thanks for taking my impulse and figuring out how to pull it off in
CSS! Good thinking.
Christian, thanks also for your good js solution to the same problem. I
love working with javascript, but these days I try to avoid using it for
anything crucial on a page since I have increasingly less assurance that
visitors have it turned on. If I can accomplish approximately the same
thing in both technologies, I prefer to use the CSS method.
Regards,
Paul
At 05:09 AM 5/17/2005, Ingo Chao wrote:
>This is the background-image attempt.
>
>Note that relatively short links (try with 20em in dd, or try with
>"l.html" as short link) will /not/ show the image ellipsis or the text
>ellipsis due to the mechanism
>
>- no float drop
>- r.p. upwardly
>- overflow:hidden.
>
>and long links /will/ show the ellipsis due to the mechanism
>
>- float drop
>- r.p. upwardly
>
>---
>
>I do not know anything about javascript. When I don't provide a script
>example, that should not read and does not imply that I question the fact
>that it belongs to be solved server sided or via javascript.
>
>I just like thinking about if there are CSS solutions. Often these
>solutions are far away from being perfect. Same to the /awkward/ browser
>fixes I tried to find in some posts to this list the last year.
>
>I think I'll try to spend more of my free time in gardening. Thanks for
>the audience.
>
>Ingo
>
>---
>
>dd{
> width: 10em; /* constrain width try 20em */
> height: 1em; /* constrain height */
> line-height:1em; /* to be adjusted */
> overflow: hidden; /* hide excess */
> position:relative; /* Fix IE missing overflow bug of r.p. span */
> background: yellow; /* for demo */
> }
>
>dd a {
> float:left;
> white-space: nowrap; /* prevents Opera's wrapping of the link and
> destroying the r.p. */
> }
>
>
>dd span.ellipsis {
> float: right; /* shall drop when the link is too long */
> position:relative; /* move after page flow is done */
> margin-top:-1em; /* adjust */
> z-index:1; /* higher layer */
> background: red url(ellipsis.png); /* red for debugging */
> width:25px; /* any width will match */
> }
>
>
> <dt>Name of the resource</dt>
> <dd>
> <a href="http://longcrazyurl.net/blah/de/blah/de/blah.html"
> title="longcrazyurl.net/blah/de/blah/de/blah.html">
> longcrazyurl.net/blah/de/blah/de/blah.html
> </a>
> <span class="ellipsis"> </span>
> </dd>
>
>______________________________________________________________________
>css-discuss [EMAIL-REMOVED]]
>http://www.css-discuss.org/mailman/listinfo/css-d
>List wiki/FAQ -- http://css-discuss.incutio.com/
>Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
