Dynamic underline

[Jason C]

I'm trying to accomplish something like this:

__ Variable Text __________________

The text is a variable, and the width of the underline would be a percentage of the parent.

I'm currently doing it like this:

<div style="height: 20px; border-bottom: 1px solid #BFBFBF; width: 90%">
<div style="height: 20px; position: relative; top: 5px; background-color:#FFFFFF; padding: 0 7px; margin-left: 15px">
Variable Text
</div>
</div>

This creates a parent DIV with the correct width, and the "border-bottom" becomes the underline. Then, the child DIV uses a "margin-left" to show 15px of underline on the left, sets the background to the same as the background of the page, then uses "position: relative" to shift the block down; this way, the child block is positioned in front of the border-bottom of the parent, hiding the part of the underline I don't want.

Is there a better / easier way to do this in CSS, rather than using nested DIVs?

[dorayme]

In article
<27001099.3855.1336552590648.JavaMail.geo-discussion-forums@ynlq12>,

Your markup and styling do not make for the ASCII pic you provide:

__ Variable Text __________________

in my browsers.

Have you seen what happens when a user ups his text using Zoom Text
Only?

There are different ways to skin this cat, using your HTML but
changing a few things, you might consider:

<div style="position: relative; padding-top: .5em; border-bottom: 1px
solid #BFBFBF; width: 90%">
<div style="position: absolute; top: -.5em;background-color:#FFFFFF;

margin-left: 15px">
Variable Text
</div>
</div>

--
dorayme

[Ben C]

The way you're doing it is the simplest I can think of.

[dorayme]

In article <slrnjqpfqf....@bowser.marioworld>,

Yes, a *part* of the general idea is good but the particular code
above does not work to do what is wanted, as I said in an earlier post
(with a suggestion for a variation). Did I miss something?

--
dorayme

[Gus Richter]

That the embedded div should include display:inline;

--
Gus

[Gus Richter]

One can use a variety of other methods:
e.g. Using span, float and pos:rel

<div style="border-bottom:1px solid #BFBFBF;width:90%">
<span style="float:left;position:relative;left:15px;padding:0
7px;margin-top:-1em;background:white;">
float:left;position:relative</span>
</div>

e.g. Using div and pos: rel

<div style="position: relative; padding-top: .5em; border-bottom: 1px
solid #BFBFBF; width: 90%">

<div style="position: absolute; top: -.5em;background-color:#FFFFFF;

margin-left: 15px">
Variable Text
</div>
</div>

e.g. Using span and pos:abs (my preference)

<div style="border-bottom:1px solid #BFBFBF;width:90%">
<span style="position:absolute;left:23px;padding:0
7px;margin-top:-1em;background:white;">
position:absolute</span>
</div>

--
Gus

[dorayme]

In article <joioht$d2o$1...@dont-email.me>,

Not really. The OP said

"I'm currently doing it like this: ...."

I said *this* did not work in my browsers. I still see no such
display: inline in his code and while addition of an display: inline;
*improves* the situation a bit, it still does not solve it (see what
happens when text size is changed; at least I am seeing what happens
here and the line goes clean under all at small text sizes).

In an earlier reply I gave what seems now a stupid solution, I cannot
believe how I did this! I saw with my own eyes it working well and now
I look again it is nowhere near! I sure missed something there!

I note one of your solutions, in a next post, is good. Well done.

--
dorayme

[Gus Richter]

On 5/11/2012 8:08 AM, dorayme wrote:
>> That the embedded div should include display:inline;
> Not really. The OP said
> "I'm currently doing it like this: ...."

> I said*this* did not work in my browsers. I still see no such

> display: inline in his code and while addition of an display: inline;
> *improves* the situation a bit, it still does not solve it (see what
> happens when text size is changed; at least I am seeing what happens
> here and the line goes clean under all at small text sizes).

should include display:inline;
or
should have included display:inline;

It seems that the different browsers, including the different Webkit
flavours, have a different increment and extreme range of size changes
available. FF and Safari, for example, do not reach the ridiculously
extreme and uselessly very small size that Opera and Chrome do. In the
extreme smallest size available in FF and Safari, all the methods render
well, whereas in the much smaller size available in Opera and Chrome
most of the methods cause the text to be above the border. The failure
in the ridiculously extreme and uselessly very small size available only
in Chrome and Opera should not bother anyone and should be ignored IMHO.
Aside from that, all three methods I presented in the other post, along
with the OPs original method, with display:inline; included, work
perfectly well for me in all these browsers.

> In an earlier reply I gave what seems now a stupid solution, I cannot
> believe how I did this! I saw with my own eyes it working well and now
> I look again it is nowhere near! I sure missed something there!

I don't understand. Your solution works well for me aside from the
ridiculously small size setting mentioned above.

> I note one of your solutions, in a next post, is good. Well done.

I wonder which you you are referring to?
BTW, the only solution which works for me in all methods and in the
ridiculously small size setting mentioned above is the OPs solution with
the display:inline; included. Four methods here for ease in testing:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Simulate Insert Leader</title>
<style>
em {font-family:monospace;font-style:normal;background:yellow;}
</style>
</head>
<body>

<div style="border-bottom: 1px solid #BFBFBF; width: 90%">
<div style="display:inline; position: relative; top: 5px;

background-color:#FFFFFF; padding: 0 7px; margin-left: 15px">
Variable Text
</div>
</div>

<p style="margin-bottom:3em;">OPs original - using a div and forgetting
<em>display:inline;</em> but used here.</p>

<div style="position: relative; padding-top: .5em; border-bottom: 1px
solid #BFBFBF; width: 90%">

<div style="position: absolute; top: -.5em;background-color:#FFFFFF;

margin-left: 15px">
Variable Text
</div>
</div>

<p style="margin-bottom:3em;">This one was "dorayme's" suggestion.<br>
Using a div and <em>position:absolute</em>.</p>

<div style="border-bottom:1px solid #BFBFBF;width:90%">
<span style="position:absolute;left:23px;padding:0
7px;margin-top:-1em;background:white;">

Variable Text</span>
</div>
<p style="margin-bottom:3em;">Using a span and
<em>position:absolute;</em><br>
We could give the div <em>pos:relative;</em> and then the span could
take <em>margin-left:15px;</em> instead of

<em>left:23px; (body margin=8px)</em>.<br>
<span style="text-decoration:underline;">This one is my
preference.</span></p>

<div style="border-bottom:1px solid #BFBFBF;width:90%">
<span style="float:left;position:relative;left:15px;padding:0
7px;margin-top:-1em;background:white;">

Variable Text</span>
</div>
<p style="margin-bottom:3em;">Using a span, <em>float:left;
position:relative;</em><br>
Instead of <em>position:relative;left:15px;</em> we could simply have
<em>margin-left:15px;</em>.</p>

</body>
</html>

[Evertjan.]

Jason C wrote on 09 mei 2012 in
comp.infosystems.www.authoring.stylesheets:

Better use a <span> for the inner element to show the right part of the
underline too [Chrome tested].


--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[Gus Richter]

On 5/12/2012 4:45 PM, Evertjan. wrote:
> Better use a<span> for the inner element to show the right part of the
> underline too [Chrome tested].

Right, span is an inline element.
Else use display:inline; on the div so it displays as an inline element.
There are many ways to skin this cat.

--
Gus

[Evertjan.]

Gus Richter wrote on 12 mei 2012 in
comp.infosystems.www.authoring.stylesheets:

I pity your cat,
your else seems a rather roundabout way to do such a simple task.

[Gus Richter]

On 5/12/2012 6:34 PM, Evertjan. wrote:
> Gus Richter wrote on 12 mei 2012 in
> comp.infosystems.www.authoring.stylesheets:
>
>> On 5/12/2012 4:45 PM, Evertjan. wrote:
>>> Better use a<span> for the inner element to show the right part of
>>> the underline too [Chrome tested].
>>
>> Right, span is an inline element.
>
>> Else use display:inline; on the div so it displays as an inline
>> element. There are many ways to skin this cat.
>
> I pity your cat,
> your else seems a rather roundabout way to do such a simple task.

In which way do you see it being a "roundabout way"?

--
Gus

[dorayme]

In article <jom6p5$ss1$1...@dont-email.me>,

Gus Richter <gusri...@netscape.net> wrote:

> On 5/11/2012 8:08 AM, dorayme wrote:

...
> > ... addition of an display: inline;

> > *improves* the situation a bit, it still does not solve it (see what
> > happens when text size is changed; at least I am seeing what happens
> > here and the line goes clean under all at small text sizes).
>

> It seems that the different browsers, including the different Webkit
> flavours, have a different increment and extreme range of size changes
> available. FF and Safari, for example, do not reach the ridiculously
> extreme and uselessly very small size that Opera and Chrome do. In the
> extreme smallest size available in FF and Safari, all the methods render
> well, whereas in the much smaller size available in Opera and Chrome
> most of the methods cause the text to be above the border. The failure
> in the ridiculously extreme and uselessly very small size available only
> in Chrome and Opera should not bother anyone and should be ignored IMHO.
> Aside from that, all three methods I presented in the other post, along
> with the OPs original method, with display:inline; included, work
> perfectly well for me in all these browsers.
>

True that

<div style="border-bottom: 1px solid #BFBFBF; width: 90%">

<span style="height: 20px; position: relative; top: 5px;
background-color:#FFFFFF;margin-left: 15px">Variable Text </span>
</div>

mostly works but does not quite work universally. There are a few
other pedantic points but I better leave this.


...

> BTW, the only solution which works for me in all methods and in the
> ridiculously small size setting mentioned above is the OPs solution with
> the display:inline;

That is the *only one* in your excellent page below that does *not*
work universally here in Australia on Chrome.

Well, that about covers it.

--
dorayme

[dorayme]

In article <jomqto$tmu$1...@dont-email.me>,

He means that if you use SPAN you don't need to style a DIV. The SPAN
is the more natural way, he is right.

--
dorayme

[Denis McMahon]

Using <div style="display:inline"></div> instead of <span></span> seems a
bit like using a hammer to drive in a screw when you have a screwdriver
in your other hand.

Just as using <span style="display:block"></span> instead of <div></div>
would be similarly "back to front."

div was created for block encapsulation, just as span was created for in-
line encapsulation. That they can both, with styling, be used in place of
each other doesn't mean either that they should be, or that it is a
smart, clever or intelligent thing to do.

Rgds

Denis McMahon

[dorayme]

In article <4faf3724$0$2879$a826...@newsreader.readnews.com>,

Gus was was just making a point about how close the OP's code was to
being (iho) good. It was a gracious point. Had to be winkled out of
him, mind you.

But seeing that you have raised a point here, it has always seemed to
me that it is sometimes quite appropriate to good working methods to
use a span where nevertheless one wants to block it. One does this on
a regular basis with that other element that has inline genetic code
inside it, the img element.

Now, in my old fashioned way, if I am writing a paragraph, and if I am
including some pics or even some text I want to block - without
feeling at all clever - I do so style. If the moon comes up *instead*
of the sun one morning and CSS is off in everyone's browser, they will
be treated to a more traditional paragraph.

The reason it is styled different ways for where CSS is on, is often
to do aesthetic things while being deeply conservative. It is not
necessarily to pose. In some ways, it is the very opposite. It is to
have a deep respect for semantic markup and to thumb a nose at the
modern pragmatism of anything goes. <g>

--
dorayme

[Ben C]

On 2012-05-11, dorayme <dor...@optusnet.com.au> wrote:
> In article <slrnjqpfqf....@bowser.marioworld>,
> Ben C <spam...@spam.eggs> wrote:
>
>> On 2012-05-09, Jason C <jwca...@gmail.com> wrote:

[...]

>> > Is there a better / easier way to do this in CSS, rather than using
>> > nested DIVs?
>>
>> The way you're doing it is the simplest I can think of.
>
> Yes, a *part* of the general idea is good but the particular code
> above does not work to do what is wanted, as I said in an earlier post
> (with a suggestion for a variation). Did I miss something?

No, you are quite right and your solution is better. But perhaps OP
doesn't care about text zoom. I interpreted the question really as
asking whether there was something like "underline-offset: 0.5em" he
could have used instead, or maybe a different clever trick.

It's true nesting a span instead of a div in the first div is a bit
better as people have said, but the basic idea is more or less the same.

[Evertjan.]

dorayme wrote on 13 mei 2012 in comp.infosystems.www.authoring.stylesheets:

> One does this on a regular basis with that other element
> that has inline genetic code inside it, the img element.

That is con-sequential imagination
of an elementary generic inline-sequence indeed:

The "genetic code" defines how sequences of three nucleotides, called
codons, specify which amino acid will be added next during protein
synthesis.

[dorayme]

In article <XnsA0526BE4...@194.109.133.133>,

"Evertjan." <exjxw.ha...@interxnl.net> wrote:

> dorayme wrote on 13 mei 2012 in comp.infosystems.www.authoring.stylesheets:
>
> > One does this on a regular basis with that other element
> > that has inline genetic code inside it, the img element.
>
> That is con-sequential imagination
> of an elementary generic inline-sequence indeed:
>
> The "genetic code" defines how sequences of three nucleotides, called
> codons, specify which amino acid will be added next during protein
> synthesis.

What!? <g>

--
dorayme

[Martin Leese]

Evertjan. wrote:

> dorayme wrote on 13 mei 2012 in comp.infosystems.www.authoring.stylesheets:
>> One does this on a regular basis with that other element
>> that has inline genetic code inside it, the img element.
>
> That is con-sequential imagination
> of an elementary generic inline-sequence indeed:
>
> The "genetic code" defines how sequences of three nucleotides, called
> codons, specify which amino acid will be added next during protein
> synthesis.

I suspect he meant "generic".

--
Regards,
Martin Leese
E-mail: ple...@see.Web.for.e-mail.INVALID
Web: http://members.tripod.com/martin_leese/

[dorayme]

In article <joolrc$bnc$1...@dont-email.me>,

Martin Leese <ple...@see.Web.for.e-mail.INVALID> wrote:

> Evertjan. wrote:
>
> > dorayme wrote on 13 mei 2012 in comp.infosystems.www.authoring.stylesheets:
> >> One does this on a regular basis with that other element
> >> that has inline genetic code inside it, the img element.
> >
> > That is con-sequential imagination
> > of an elementary generic inline-sequence indeed:
> >
> > The "genetic code" defines how sequences of three nucleotides, called
> > codons, specify which amino acid will be added next during protein
> > synthesis.
>
> I suspect he meant "generic".

No, no... I really did mean genetic. Yes, I was that silly! Boy o boy,
there are such stories that can be told about the evolution of
elements, what their earlier neanderthalic beginnings were, how they
came to be used, how they used to have a nature but in these modern
*pragmatic* times have come to have little character and authors use
them however they feel like using them. <g>

--
dorayme

[Gus Richter]

On 5/12/2012 7:24 PM, dorayme wrote:
>
> True that
>
> <div style="border-bottom: 1px solid #BFBFBF; width: 90%">
> <span style="height: 20px; position: relative; top: 5px;
> background-color:#FFFFFF;margin-left: 15px">Variable Text</span>
> </div>
>
> mostly works but does not quite work universally. There are a few
> other pedantic points but I better leave this.
>

In the "Simulate Insert Leader" demo doc that I submitted, I made a
change aside from inserting the display:inline; and that was to delete
the height: 20px; but in what you submit you have reinserted it again,
although not needed. You also changed the embedded div to an embedded
span. This now is a totally different test case from what anyone
submitted. It is another method in skinning the cat. You state that it

"mostly works but does not quite work universally".

Well I checked in FF, Chrome, Opera, Safari and even in Maxthon 3 (I do
not check for IE) and find that all render well in all + and - zoom
settings. The question then is, "what do you mean by Universally"? I
take it to mean in all the big browsers and in all the zoom sizes for each.

You say that you have a few other pedantic points, but do not care to
disclose them. Why mention it then and leave me/us hanging? I have
looked at the markup and styling over and over and find nothing amiss.

>
>> > BTW, the only solution which works for me in all methods and in the
>> > ridiculously small size setting mentioned above is the OPs solution with
>> > the display:inline;

> That is the*only one* in your excellent page below that does*not*

> work universally here in Australia on Chrome.

Are you talking about the first line in the test case samples I
presented? "Universally in Chrome" to me means "in all + and - zoom
settings for Chrome". It works perfectly for me in all settings for
Chrome. It follows that Chrome works differently down under than up above?

--
Gus

[Gus Richter]

On 5/13/2012 12:23 AM, Denis McMahon wrote:
> Using<div style="display:inline"></div> instead of<span></span> seems a
> bit like using a hammer to drive in a screw when you have a screwdriver
> in your other hand.
>
> Just as using<span style="display:block"></span> instead of<div></div>
> would be similarly "back to front."
>
> div was created for block encapsulation, just as span was created for in-
> line encapsulation. That they can both, with styling, be used in place of
> each other doesn't mean either that they should be, or that it is a
> smart, clever or intelligent thing to do.

Being smart, clever or intelligent has nothing to do with it. Being
aware that there are the various methods has everything to do with it.
There are situations where that knowledge will come in handy. Not to
mention that there are also lessons to be learned in the exercises
presented here. That they can both, with styling, be used in place of
each other doesn't mean either that they should *not* be. Are you
advocating the abolishing of the block and inline values for the
display property? What then about the inline-block value?

--
Gus

[Gus Richter]

I have not been advocating one method or the other. Well, I did place a
note on one of the methods as being *my* preference and which happened
to be a span embedded within a div. Read what I wrote in answer to Denis.

--
Gus

[Gus Richter]

On 5/13/2012 4:07 AM, dorayme wrote:
> Gus was was just making a point about how close the OP's code was to
> being (iho) good. It was a gracious point. Had to be winkled out of
> him, mind you.

The winkle comment is not fair. I gave display:inline; as a cure for
the OP's version, in response to your "what am I missing?" because you
said it did not work. I presented the whole and a few other versions as
test cases for you and informed of my results. A bit of trouble to
present a complete story right away, IMHO.

--
Gus

[Denis McMahon]

I'm not advocating abolishing anything - I'm sure there are occasions
where it may indeed be valid to style any normally inline element as
block and vice-versa, but the fact that you can do so doesn't mean that
your normal choice for a block type container should be a block styled
inline container, or vice versa.

Moreover, I'm not sure that the (x)html syntax rules allow them to be
applied quite as liberally as you seem to be suggesting, in that I
believe, for example, that at the html level, a span may not contain
block elements such as paras, whereas a div can.

hence:

<span style="display:block"><p>some text</p></span>

can not replace:

<div><p>some text</p></div>

Likewise, simply declaring a div to be style="display:inline" does not
legitimise it for use where html only allows inline elements, because
html does not know or care about the css associated with the element, and
to html, div is a block element and span is an inline element.

Rgds

Denis McMahon

[dorayme]

In article <jope3a$uh6$1...@dont-email.me>,

Gus Richter <gusri...@netscape.net> wrote:

> On 5/12/2012 7:24 PM, dorayme wrote:
> >
> > True that
> >
> > <div style="border-bottom: 1px solid #BFBFBF; width: 90%">
> > <span style="height: 20px; position: relative; top: 5px;
> > background-color:#FFFFFF;margin-left: 15px">Variable Text</span>
> > </div>
> >
> > mostly works but does not quite work universally. There are a few
> > other pedantic points but I better leave this.
> >
> In the "Simulate Insert Leader" demo doc that I submitted, I made a
> change aside from inserting the display:inline; and that was to delete
> the height: 20px;
> but in what you submit you have reinserted it again,
> although not needed. You also changed the embedded div to an embedded
> span. This now is a totally different test case from what anyone
> submitted. It is another method in skinning the cat.

I was not talking about you or your code at this point. I was making
the simple and more general point that the OP's way was *roughly* OK,
tidy this or that bit up, but don't expect it to do what is wanted in
all browsers for all users.

> You state that it
> "mostly works but does not quite work universally".
>

...

> You say that you have a few other pedantic points, but do not care to
> disclose them.

I did not say I did not care to disclose them nor did I imply this.
Your interpretation is heavier than my remark. Over here, we are
relaxed, warm, comfortable. I am going to a beach in a moment, it
could well be paradise, for a swim.

> Why mention it then and leave me/us hanging?

Because I was pressed for time? Because I saw OP's height as not being
useful? Because I wanted to seem deep? Because I wanted to pose as
frightening, keeping my powder dry for if challenged? I will ask a
rabbi or a rabbit and get back to you.

...

> >> > BTW, the only solution which works for me in all methods and in the
> >> > ridiculously small size setting mentioned above is the OPs solution with
> >> > the display:inline;

>

> > That is the *only one* in your excellent page below that does *not*

> > work universally here in Australia on Chrome.
>
> Are you talking about the first line in the test case samples I
> presented? "Universally in Chrome" to me means "in all + and - zoom
> settings for Chrome". It works perfectly for me in all settings for
> Chrome. It follows that Chrome works differently down under than up above?

Yes, it works differently in Australia. I hope that is OK by you. This
is what it looks like over here in Chrome:

<http://dorayme.netweaver.com.au/justPics/chromeInAustralia.png>

Note the line nearest the flags, see how it goes under all, contrary
to what is wanted.

--
dorayme

[Jonathan N. Little]

How about no SPAN or DIV? Just seeing if I could do it with minimal
markup and just CSS:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Test</title>
<style type="text/css">
div.foo {
margin-left: 15px; background-color: #fff;
padding: 0 .3em .3em .3em; display: inline-block;
}
div.foo:after {
content: " "; display: block;
width: 100%; border-bottom: 1px solid #000;
position: absolute; left: 0; z-index: -1;
}
</style>

</head>

<body>
<p>
Well how about only with CSS. Note that you will leave
MSIE 6 &amp; 7 out of the picture...
</p>
<div class="foo">
Variable Text
</div>
</body>
</html>



--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

[Gus Richter]

On 5/14/2012 10:01 AM, Jonathan N. Little wrote:
> How about no SPAN or DIV? Just seeing if I could do it with minimal
> markup and just CSS

I like it very much. Very well done. Try applying it to something like this:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Simulate Insert Leader</title>
<style>

.menuitem {
border-bottom: dotted 1px black;
text-align: right;
clear:left;
}
.name {
background: white;
float: left;
margin-top: 3px;
}
.price {
background: white;
position: relative;
top: 3px;
}
</style>
</head>
<body>
<h1>Using Position Relative</h1>

<div class="menuitem">
<span class="name">Steak Diane</span>
<span class="price">15.00</span>
</div>

<div class="menuitem">
<span class="name">Wine "Glen Bretton"</span>
<span class="price">150.00</span>
</div>
</body>
</html>

[Gus Richter]

On 5/13/2012 9:31 PM, Denis McMahon wrote:
> I'm not advocating abolishing anything - I'm sure there are occasions
> where it may indeed be valid to style any normally inline element as
> block and vice-versa, but the fact that you can do so doesn't mean that
> your normal choice for a block type container should be a block styled
> inline container, or vice versa.

Perhaps "it should not be", but "it could be" because I can and it does
not conflict with the specs.

> Moreover, I'm not sure that the (x)html syntax rules allow them to be
> applied quite as liberally as you seem to be suggesting, in that I
> believe, for example, that at the html level, a span may not contain
> block elements such as paras, whereas a div can.
> hence:
> <span style="display:block"><p>some text</p></span>
> can not replace:
> <div><p>some text</p></div>
> Likewise, simply declaring a div to be style="display:inline" does not
> legitimise it for use where html only allows inline elements, because
> html does not know or care about the css associated with the element, and
> to html, div is a block element and span is an inline element.

True and that is why my various methods have all contained "anonymous
inline boxes (elements)" and not block elements such as the <p>.

--
Gus

[Jonathan N. Little]

I would be more inclined to use a list:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Semantic</title>
<style type="text/css">
ul.pricelist { list-style: none; }
ul.pricelist li {
margin-top: 3px; border-bottom: dotted 1px #000; clear: right;
}
ul.pricelist li span {
position: relative; background: #fff; top: 3px;
}
ul.pricelist li span.price { float: right; }
</style>

</head>

<body>

<ul class="pricelist">
<li>

<span class="name">Steak Diane</span>
<span class="price">15.00</span>

</li>
<li>

<span class="name">Wine "Glen Bretton"</span>
<span class="price">150.00</span>

</li>
</ul>

[Jonathan N. Little]

Jonathan N. Little wrote:

> <style type="text/css">
> ul.pricelist { list-style: none; }
> ul.pricelist li {
> margin-top: 3px; border-bottom: dotted 1px #000; clear: right;
> }
> ul.pricelist li span {
> position: relative; background: #fff; top: 3px;
> }
> ul.pricelist li span.price { float: right; }
> </style>

Oops if I take a clue from your example and reverse the text-align to
right and now float "name" left instead of "price" right it will work in
IE7 as well...

<style type="text/css">
ul.pricelist { list-style: none; }
ul.pricelist li {
margin-top: 3px; border-bottom: dotted 1px #000;

clear: left; text-align: right;

}
ul.pricelist li span {
position: relative; background: #fff; top: 3px;
}

ul.pricelist li span.name { float: left; }
</style>

[Gus Richter]

On 5/13/2012 10:16 PM, dorayme wrote:
> I was not talking about you or your code at this point. I was making

> the simple and more general point that the OP's way was*roughly* OK,

> tidy this or that bit up, but don't expect it to do what is wanted in
> all browsers for all users.

In your response, you did insinuate that your presented code was one of
mine or the OPs. You did not say that it was modified or a new method,
which you should have in order to be clear and not confuse.

>> > You say that you have a few other pedantic points, but do not care to
>> > disclose them.
> I did not say I did not care to disclose them nor did I imply this.
> Your interpretation is heavier than my remark. Over here, we are
> relaxed, warm, comfortable. I am going to a beach in a moment, it
> could well be paradise, for a swim.

I did not say that you had said it, nor that you had implied it. I just
stated the fact that you said, "There are a few other pedantic points
but I better leave this." and that by not disclosing them, you did not
care to do so. I further said that it caused me to investigate over and
over again to possibly see what you could have seen or meant. This hurt
your sensibilities causing you to accuse me of coming down heavy on you.
Don't you understand the point I'm making?

>> > Why mention it then and leave me/us hanging?
> Because I was pressed for time? Because I saw OP's height as not being
> useful? Because I wanted to seem deep? Because I wanted to pose as
> frightening, keeping my powder dry for if challenged? I will ask a
> rabbi or a rabbit and get back to you.

None of them are even worthy of an excuse. I'm sure your rabbi or rabbit
would advise you that "you done did wrong and golly gosh you're as sorry
as can be and won't do it again, cross your heart". ;-)

>>>>> > >> > BTW, the only solution which works for me in all methods and in the
>>>>> > >> > ridiculously small size setting mentioned above is the OPs solution with
>>>>> > >> > the display:inline;
>> >

>>> > > That is the*only one* in your excellent page below that does*not*

>>> > > work universally here in Australia on Chrome.
>> >
>> > Are you talking about the first line in the test case samples I
>> > presented? "Universally in Chrome" to me means "in all + and - zoom
>> > settings for Chrome". It works perfectly for me in all settings for
>> > Chrome. It follows that Chrome works differently down under than up above?
>
> Yes, it works differently in Australia. I hope that is OK by you. This
> is what it looks like over here in Chrome:
>
> <http://dorayme.netweaver.com.au/justPics/chromeInAustralia.png>
>
> Note the line nearest the flags, see how it goes under all, contrary
> to what is wanted.

Thank you for the image. I note that you are using an Apple computer to
test. I on the other hand use Windows. Are you able to run the test in
Windows?

--
Gus

[Gus Richter]

On 5/14/2012 12:38 PM, Jonathan N. Little wrote:
>
> ...

> I would be more inclined to use a list:

> ...
>

Excellent. I like it a lot. It just goes to show that there are many
ways to skin a cat. :-)

BTW, why did you title it "Semantic"?

--
Gus

[Jonathan N. Little]

Semantic HTML, H# for headings, UL & OL for lists, P for paragraphs...

[tlvp]

On Mon, 14 May 2012 15:33:07 -0400, Jonathan N. Little wrote:

> ... Semantic HTML, H# for headings, UL & OL for lists, P for paragraphs...

(Sigh!) I must be the only one left who still doesn't understand what
difference the folks here understand between "semantic" and "syntactic".

Likewise, what difference between "structural" and "presentational".

Oh, well, perhaps in the fullness of time ... :-) . Cheers, -- tlvp
--
Avant de repondre, jeter la poubelle, SVP.

[dorayme]

In article <jor38k$v9p$1...@dont-email.me>,

"Jonathan N. Little" <lws...@gmail.com> wrote:

> How about no SPAN or DIV? Just seeing if I could do it with minimal
> markup and just CSS:
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
> "http://www.w3.org/TR/html4/strict.dtd">
>
> <html>
>

...
> </html>

Yes, good. Works fine.

Reminds me to mention this, be nice if a browser could display a
webpage when you select and drag and drop a complete text of an HTML
page onto it. As if you drag dropped a 'name.html' file on to it (at
least this latter works on my Mac).

--
dorayme

[dorayme]

In article <jore5f$782$1...@dont-email.me>,

Gus Richter <gusri...@netscape.net> wrote:

> On 5/13/2012 10:16 PM, dorayme wrote:

...

> >> > Are you talking about the first line in the test case samples I
> >> > presented? "Universally in Chrome" to me means "in all + and - zoom
> >> > settings for Chrome". It works perfectly for me in all settings for
> >> > Chrome. It follows that Chrome works differently down under than up
> >> > above?
> >
> > Yes, it works differently in Australia. I hope that is OK by you. This
> > is what it looks like over here in Chrome:
> >
> > <http://dorayme.netweaver.com.au/justPics/chromeInAustralia.png>
> >
> > Note the line nearest the flags, see how it goes under all, contrary
> > to what is wanted.
>
> Thank you for the image. I note that you are using an Apple computer to
> test. I on the other hand use Windows. Are you able to run the test in
> Windows?

I trust you saw it in the northern hemisphere the normal way up.

I looked at it just now in Win Chrome and I managed awkwardly to
reduce the size (there are no on-browser tools to do this on my
version and I can't immediately see how to change this minimisation of
theirs...). Result is that the first, the roughly OP's code, is the
*only* one that does work at very tiny text sizes! As you said, I
think.

What bizarre things we discuss! <g>

--
dorayme

[Gus Richter]

On 5/14/2012 3:33 PM, Jonathan N. Little wrote:
> Gus Richter wrote:
>> On 5/14/2012 12:38 PM, Jonathan N. Little wrote:
>>>
>>> ...
>>> I would be more inclined to use a list:
>>> ...
>>>
>>
>> Excellent. I like it a lot. It just goes to show that there are many
>> ways to skin a cat. :-)
>>
>> BTW, why did you title it "Semantic"?
>>
>
> Semantic HTML, H# for headings, UL & OL for lists, P for paragraphs...

Anything un-Semantic in my last "Simulate Insert Leader" doc? Any of the
others?

--
gus