Floats without wrapping the adjacent text?

[Philip Herlihy]

Nb: I'm no expert in CSS, and I may be missing something really dumb.

Here's what I want to do, in code (with an invented value for
"display"):


<div id="This-is-a-left-floated-image"
style="float:left; height: 200px; width: 200px">
<img src="myImage.jpg">
</div>

<div id="I-want-this-to-stay-rectangular"
style="display: be-a-rectangle-dammit !important">
<p>several lines of text</p>
</div>


I've tried everything (?) to achieve this: I want to be able to force a
block of text (which might be a single paragraph or may include headers
or lists) NOT to wrap round the bottom of a left-floated image but to
have each new line start at the same horizontal distance from the left
edge of the viewport even if it has run below the floated image.

If all I had on the page were small-ish images, it would be easy - I'd
just float everything :left and they would pack themselves across the
viewport until there was no room for another and then start a new line
of images. Nothing would "shear" so that part was to the right of the
preceding element and part was underneath. I want exactly that for
text.

I'm working on a page which has a map (of Epping Forest), an intro, and
a dozen similar descriptions of a monthly "walk" (each is currently a
div with an h2, h3 and a couple of p). I'd like the "walk" divs to wrap
around the map without any of them going L-shaped.

Is that so hard? (I guess...)

One thing I came up with was to make the image a background-image, and
to duplicate the div, so that each appeared twice. The first copy is
cleared :both and floated :left, and I set width and padding by
percentage so that both would squish up nicely as the window is squished
up. Then I set the left-hand one to have visibility: hidden, and all
you see is the right-hand one. It doesn't "shear", as the thing it's
being floated round is guaranteed to have the same dimensions. Thought
I was pretty smart with this dodge. Initially.

But it doesn't scale. As you pass the bottom of the map there is now
room for two of these "walk" divs (in a typical window width) but this
(crazy?) method just leaves a big gap (where the hidden div is lurking).

What I want is a truly fluid layout, so I can start with full-screen on
my huge monitor and then squish it narrower and have everything slot
into place in the space available without any of my "walk" divs
"shearing" (wrapping partly under its neighbour on the left).

How can I do this? Make an old fool happy...

The page I've been working on (very much incomplete) is here:
http://www.rwsbs.co.uk/floats/

There's a demo page of what I'm after here:
http://www.rwsbs.co.uk/floats/div-test.htm
--

Phil, London

[dorayme]

In article <MPG.2944f52c8...@news.demon.co.uk>,

Philip Herlihy <bounc...@you.com> wrote:

> Nb: I'm no expert in CSS, and I may be missing something really dumb.
>
> Here's what I want to do, in code (with an invented value for
> "display"):
>
>
> <div id="This-is-a-left-floated-image"
> style="float:left; height: 200px; width: 200px">
> <img src="myImage.jpg">
> </div>
>
> <div id="I-want-this-to-stay-rectangular"
> style="display: be-a-rectangle-dammit !important">
> <p>several lines of text</p>
> </div>
>
>
> I've tried everything (?) to achieve this: I want to be able to force a
> block of text (which might be a single paragraph or may include headers
> or lists) NOT to wrap round the bottom of a left-floated image but to
> have each new line start at the same horizontal distance from the left
> edge of the viewport even if it has run below the floated image.

Add to your style in the last div

<...; margin-left: 210px;">

210px to make a bit of grace.

You might find some of your problems with understanding floats
helped by:

<http://netweaver.com.au/floatHouse/>

--
dorayme

[Ben C]

On 2011-12-04, Philip Herlihy <bounc...@you.com> wrote:
>
> Nb: I'm no expert in CSS, and I may be missing something really dumb.
>
> Here's what I want to do, in code (with an invented value for
> "display"):
>
>
><div id="This-is-a-left-floated-image"
> style="float:left; height: 200px; width: 200px">
> <img src="myImage.jpg">
></div>
>
><div id="I-want-this-to-stay-rectangular"
> style="display: be-a-rectangle-dammit !important">
> <p>several lines of text</p>
></div>
>
>
> I've tried everything (?) to achieve this: I want to be able to force a
> block of text (which might be a single paragraph or may include headers
> or lists) NOT to wrap round the bottom of a left-floated image but to
> have each new line start at the same horizontal distance from the left
> edge of the viewport even if it has run below the floated image.

If you know the width of the float, like you do here, then give the
second div a margin-left of about that width or a bit more. This what
dorayme suggested.

If the float is width: auto (so shrink-wraps its content), then you can
make the second div a "block formatting context" by giving it overflow:
hidden. This isn't because you care about overflow, but because you want
the side-effect which is that a BFC becomes narrower to get out of the
way of floats (or may move down, but I've never seen that in any browser
if there's room for it to just get narrower).

> If all I had on the page were small-ish images, it would be easy - I'd
> just float everything :left and they would pack themselves across the
> viewport until there was no room for another and then start a new line
> of images. Nothing would "shear" so that part was to the right of the
> preceding element and part was underneath. I want exactly that for
> text.

It's all about moving the left edge of the second block to the right
of the float.

> I'm working on a page which has a map (of Epping Forest), an intro, and
> a dozen similar descriptions of a monthly "walk" (each is currently a
> div with an h2, h3 and a couple of p). I'd like the "walk" divs to wrap
> around the map without any of them going L-shaped.
>
> Is that so hard? (I guess...)

Well they're not really wrapping _around_ it if they don't go L-shaped.

[...]

> How can I do this? Make an old fool happy...
>
> The page I've been working on (very much incomplete) is here:
> http://www.rwsbs.co.uk/floats/
>
> There's a demo page of what I'm after here:
> http://www.rwsbs.co.uk/floats/div-test.htm

Just put overflow:hidden on #two and #three in that example and watch
what happens. You might also want to put each map+walk in its own div
and set clear on those so that the text doesn't get out of sync with the
maps.

[Gus Richter]

On 12/3/2011 10:12 PM, Philip Herlihy wrote:
>
> I want to be able to force a
> block of text (which might be a single paragraph or may include headers
> or lists) NOT to wrap round the bottom of a left-floated image but to
> have each new line start at the same horizontal distance from the left
> edge of the viewport even if it has run below the floated image.
>

> There's a demo page of what I'm after here:

Not really. It may be once your requirements above have been fulfilled.

> http://www.rwsbs.co.uk/floats/div-test.htm

Place a wrapper div around all of the material to be to the right of
div#one (in this case around div#two and div#three) and then add to the
stylesheet:

#wrapper {margin-left:150px;}

BTW, get rid of the html comments in your stylesheet, use strict and not
transitional, and don't use XHTML if you're going to serve it up as
text/html.

--
Gus

[Gus Richter]

On 12/4/2011 4:25 AM, Ben C wrote:
>> There's a demo page of what I'm after here:
>> http://www.rwsbs.co.uk/floats/div-test.htm
>
> Just put overflow:hidden on #two and #three in that example and watch
> what happens. You might also want to put each map+walk in its own div
> and set clear on those so that the text doesn't get out of sync with the
> maps.

With this method, how do you explain the change in the top margin and width?

--
Gus

[Ben C]

It's because margins don't collapse across block formatting contexts. In
the OP's original example, the top and bottom margins of the ps inside
the divs collapse with the divs. Make the divs BFCs and the margins get
inside them.

[Gus Richter]

Thanks Ben. Now for some sleep no matter what my prostate says.

--
Gus

[tlvp]

On Sun, 4 Dec 2011 03:12:16 -0000, Philip Herlihy wrote:

> Nb: I'm no expert in CSS, and I may be missing something really dumb.
>
> Here's what I want to do, in code (with an invented value for
> "display"):
>
>
> <div id="This-is-a-left-floated-image"
> style="float:left; height: 200px; width: 200px">
> <img src="myImage.jpg">
> </div>
>
> <div id="I-want-this-to-stay-rectangular"
> style="display: be-a-rectangle-dammit !important">
> <p>several lines of text</p>
> </div>

You're no "expert"? Don't feel bad, I don't know beans about it.

Which is why what I would do if I wanted the visual outcome you desire
-- an image floated left and text in a rectangle to the right of that, is:

<table><tr><td><img src="myImage.jpg"></td>
<td><p>several lines of text</p></td></tr></table>

(OK, with dimension attributes on the img and td items, as needed.)

Of course, all the experts will lambaste that as a thoroughly undignified
last century approach but I guess I'm just an undignified last century guy.

Could that work for you? Cheers, -- tlvp
--
Avant de repondre, jeter la poubelle, SVP.

[dorayme]

In article <xznruoxyzsly.4szpw9l9x0bp$.d...@40tude.net>,

tlvp <mPiOsUcB...@att.net> wrote:

> On Sun, 4 Dec 2011 03:12:16 -0000, Philip Herlihy wrote:
>
> > Nb: I'm no expert in CSS, and I may be missing something really dumb.
> >
> > Here's what I want to do, in code (with an invented value for
> > "display"):
> >
> >
> > <div id="This-is-a-left-floated-image"
> > style="float:left; height: 200px; width: 200px">
> > <img src="myImage.jpg">
> > </div>
> >
> > <div id="I-want-this-to-stay-rectangular"
> > style="display: be-a-rectangle-dammit !important">
> > <p>several lines of text</p>
> > </div>
>
> You're no "expert"? Don't feel bad, I don't know beans about it.
>

You reply on a CSS usenet group and suggest HTML tables to a
question with a very simple CSS answer?

--
dorayme

[Philip Herlihy]

In article <dorayme-9E52E2...@news.albasani.net>,
dor...@optusnet.com.au says...

Thank you for responding. I've just read carefully through
"floathouse" - a beautifully written account of a topic even more
complex (and baffling?) than I'd feared. It'll take me a while to
absorb this.

When I've tried to build columnar layouts using CSS (when not using the
"background painting" technique you describe on page 12) I've tried
adding a margin to a left-floated image so that when browser squishing
forces the displaced text below the image itself, it continues to butt
against this artificial margin.

I liked your phrasing: "Heights are hard to predict. To over compensate
with a high bid 'just in case' can lead to obvious ugliness where the
bluff is not called." That's just what I don't like about the margin-
bottom technique described above.

Is not the addition of a margin-left just the same? I tried it locally,
and it didn't deliver what I wanted - I'd like the green div to drop to
the left window border when the top line is forced below the bottom of
the left-floated element, but the constant margin prevents this. It
isn't a columnar effect I want, but an orderly packing of "un-sheared"
rectangles of text.

Css is hard...

Phil

--

Phil, London

[Philip Herlihy]

In article <slrnjdmf3u....@bowser.marioworld>,
spam...@spam.eggs says...

Thanks for the reply. Golly! Overflow:hidden does (as you say)
"(move) the left edge of the second block to the right of the float."

I'll need to experiment (tomorrow now) to see what the other
consequences might be (and try to get my head around why messing with
Overflow can do this) but at first glance that's very close to what I'm
after. Who'd have guessed this. CSS is weird...

I must say I've developed a real respect for the people who develop
browser software!

--

Phil, London

[Philip Herlihy]

In article <jbfhmq$eqn$1...@dont-email.me>, gusri...@netscape.net says...

Brandishing the excellent J-Ruler the width of the displaced divs seems
the same; it's just that with overflow:hidden the second (orange) div is
no longer overlapping the blue one. I don't see why the margin appears
between the orange and green ones, though.

Shortly I'll have:
http://www.rwsbs.co.uk/floats/div-test.htm and
http://www.rwsbs.co.uk/floats/div-test-overflow.htm
... uploaded for comparison.

(Thanks!)

--

Phil, London

[Philip Herlihy]

In article <slrnjdmju1....@bowser.marioworld>,
spam...@spam.eggs says...

Thanks, Ben. This all seems so arbitrary. It's like the fact that
bananas and mousetraps have gender in French...

--

Phil, London

[Philip Herlihy]

In article <jbfhcf$deg$1...@dont-email.me>, gusri...@netscape.net says...

>
> On 12/3/2011 10:12 PM, Philip Herlihy wrote:
> >
> > I want to be able to force a
> > block of text (which might be a single paragraph or may include headers
> > or lists) NOT to wrap round the bottom of a left-floated image but to
> > have each new line start at the same horizontal distance from the left
> > edge of the viewport even if it has run below the floated image.
> >
> > There's a demo page of what I'm after here:
>
> Not really. It may be once your requirements above have been fulfilled.
>
> > http://www.rwsbs.co.uk/floats/div-test.htm
>
> Place a wrapper div around all of the material to be to the right of
> div#one (in this case around div#two and div#three) and then add to the
> stylesheet:
>
> #wrapper {margin-left:150px;}
>

Thanks Gus. But that would surely prevent the green div dropping back
to the left window-margin when pushed low enough (by a compressed orange
one) to do so. It's not a columnar effect I'm after this time, but an
efficient packing without "shearing".


--

Phil, London

[Philip Herlihy]

In article <jbfhcf$deg$1...@dont-email.me>, gusri...@netscape.net says...
>

> BTW, get rid of the html comments in your stylesheet, use strict and
not
> transitional, and don't use XHTML if you're going to serve it up as
> text/html.

I've noted your observations, but I'm not too sure what to make of them!
The separate stylesheet in my "map" project only has CSS-style comments.
The HTML comments in the demo page were added automatically by
Dreamweaver, and it all seems to work, so I'm not in a rush to change
that. I have to say I don't really 'get' the differences between Strict
and Transitional (sounds like Channel 4 after the watershed) and I don't
feel I've ever needed to come to terms with the 'X' in XHTML, although
I've occasionally puzzled over it. Happy to learn more about this if
I'm missing something important, but I'd prefer this to be a separate
branch of the thread.

--

Phil, London

[Philip Herlihy]

In article <xznruoxyzsly.4szpw9l9x0bp$.d...@40tude.net>,
mPiOsUcB...@att.net says...

>
> On Sun, 4 Dec 2011 03:12:16 -0000, Philip Herlihy wrote:
>
> > Nb: I'm no expert in CSS, and I may be missing something really dumb.
> >
> > Here's what I want to do, in code (with an invented value for
> > "display"):
> >
> >
> > <div id="This-is-a-left-floated-image"
> > style="float:left; height: 200px; width: 200px">
> > <img src="myImage.jpg">
> > </div>
> >
> > <div id="I-want-this-to-stay-rectangular"
> > style="display: be-a-rectangle-dammit !important">
> > <p>several lines of text</p>
> > </div>
>
> You're no "expert"? Don't feel bad, I don't know beans about it.
>
> Which is why what I would do if I wanted the visual outcome you desire
> -- an image floated left and text in a rectangle to the right of that, is:
>
> <table><tr><td><img src="myImage.jpg"></td>
> <td><p>several lines of text</p></td></tr></table>
>
> (OK, with dimension attributes on the img and td items, as needed.)
>
> Of course, all the experts will lambaste that as a thoroughly undignified
> last century approach but I guess I'm just an undignified last century guy.
>
> Could that work for you? Cheers, -- tlvp

Well it might well! I've felt for a long time that tables are somehow
"shameful" but if it delivers the required result and is easy to
understand I could be all for it.

Maybe it's a bit like the horror hand-coders always feel when they see
generated code. Yes it's truly awful, but does it really matter?

Tables do seem to flex very conveniently and don't "shear", so I'll give
this a try if only for comparison. Of course, putting the layout into
the HTML rather than CSS kills a whole level of flexibility, but the
trade-off might be an easy decision. Much appreciated.

I've also thought of shoving a transparent div over the map (which is
currently a background image) to push the "walk" divs over to the right,
with a height to match the lower (narrower) part of the map. That would
still mean one "Walk" ended up "sheared" at most browser widths, unless
I can get this "overlflow" trick to work.

It does all seem very artificial, though...

--

Phil, London

[Philip Herlihy]

In article <MPG.2944f52c8...@news.demon.co.uk>,
bounc...@you.com says...

Over the 30 years or so I've been in the IT industry (mostly as a
programmer) I've found few "languages" I've struggled with as much as I
have with CSS. Even nroff was easier than this!

It dawned on me a long time ago that computers only "understand" strings
of ones and zeroes, and that all other languages are useful only to aid
human comprehension of complexity. A "good" language is intuitive and
expressive, and much of my effort in writing code has always gone into
making what I'm intending transparent to a human reader. Maybe I have a
blind spot, but CSS is hard...

Phil

--

Phil, London

[dorayme]

In article <MPG.29461ef5c...@news.demon.co.uk>,

Philip Herlihy <bounc...@you.com> wrote:

> In article <dorayme-9E52E2...@news.albasani.net>,
> dor...@optusnet.com.au says...
> >
> > In article <MPG.2944f52c8...@news.demon.co.uk>,
> > Philip Herlihy <bounc...@you.com> wrote:
> >
> > > Nb: I'm no expert in CSS, and I may be missing something really dumb.
> > >
> > > Here's what I want to do, in code (with an invented value for
> > > "display"):
> > >
> > >
> > > <div id="This-is-a-left-floated-image"
> > > style="float:left; height: 200px; width: 200px">
> > > <img src="myImage.jpg">
> > > </div>
> > >
> > > <div id="I-want-this-to-stay-rectangular"
> > > style="display: be-a-rectangle-dammit !important">
> > > <p>several lines of text</p>
> > > </div>
> > >
> > >
> > > I've tried everything (?) to achieve this: I want to be able to force a
> > > block of text (which might be a single paragraph or may include headers
> > > or lists) NOT to wrap round the bottom of a left-floated image but to
> > > have each new line start at the same horizontal distance from the left
> > > edge of the viewport even if it has run below the floated image.
> >
> > Add to your style in the last div
> >
> > <...; margin-left: 210px;">
> >
> > 210px to make a bit of grace.
> >

This was meant to just solve the problem of stopping wrapping
under your left float.

> > You might find some of your problems with understanding floats
> > helped by:
> >
> > <http://netweaver.com.au/floatHouse/>
>
> Thank you for responding. I've just read carefully through
> "floathouse" - a beautifully written account of a topic even more
> complex (and baffling?) than I'd feared. It'll take me a while to
> absorb this.
>

Floats are a bit difficult and made worse so by varying browser
treatments and bugs, but in fairly modern browsers, it is a much
improved situation.

> When I've tried to build columnar layouts using CSS (when not using the
> "background painting" technique you describe on page 12) I've tried
> adding a margin to a left-floated image so that when browser squishing
> forces the displaced text below the image itself, it continues to butt
> against this artificial margin.
>

The margin that is usually needed to stop text wrapping under a
left float should be a left margin on the element that the text
is in, as discussed above. But perhaps there are ways to put some
right margin combined with a 100% height on the float container
itself - thought this would be mostly impractical and would not
work if the text was long and had to be scrolled for, the text
would wrap outside the viewport (you would be surprised what goes
on outside the viewport, the stories I could tell you) and be
seen to wrap when brought into view.

> I liked your phrasing: "Heights are hard to predict. To over compensate
> with a high bid 'just in case' can lead to obvious ugliness where the
> bluff is not called." That's just what I don't like about the margin-
> bottom technique described above.
>
> Is not the addition of a margin-left just the same?

If you put a left-margin on an element, the whole of that element
will be left margined no matter how wide (or high) the element
is. This bit is quite predictable at least and often what is
wanted.

> I tried it locally,
> and it didn't deliver what I wanted - I'd like the green div to drop to
> the left window border when the top line is forced below the bottom of
> the left-floated element, but the constant margin prevents this. It
> isn't a columnar effect I want, but an orderly packing of "un-sheared"
> rectangles of text.
>

In your

<http://www.rwsbs.co.uk/floats/div-test.htm>

if you add

margin-left: 160px;

to both your #two and #three, you get what you want surely?

--
dorayme

[tlvp]

:-) Umm ... yes :-) . 1) How else am I to get started learning CSS? and
2) Despite all the discussion so far, that "very simple CSS answer" hasn't
quite materialized yet, has it? Or is it just buried somewhere therein?

[tlvp]

On Mon, 5 Dec 2011 01:29:35 -0000, Philip Herlihy wrote:

> ...

> Over the 30 years or so I've been in the IT industry (mostly as a
> programmer) I've found few "languages" I've struggled with as much as I
> have with CSS. Even nroff was easier than this!
>
> It dawned on me a long time ago that computers only "understand" strings
> of ones and zeroes, and that all other languages are useful only to aid
> human comprehension of complexity. A "good" language is intuitive and
> expressive, and much of my effort in writing code has always gone into
> making what I'm intending transparent to a human reader. Maybe I have a
> blind spot, but CSS is hard...
>
> Phil

Some naive comments:

There's direct action;
there's simple action at a distance;
and there's indirect action at a distance.

Never mind about what these are, exactly -- I take them as parallel to

WISYWIG;
HTML code vs. browser rendering;
CSS code vs. what browsers see as their instructions vs. browser rendering.

What makes CSS so hard is that it's your end of an indirect action at a
distance -- you can change the CSS, and ultimately that affects the browser
rendering, but you have no clear handle on or control over just what a
browser makes of the CSS requirements you think you're imposing on it.

And that's all there'll ever be from me on this :-) .

Cheers; and HTH, -- tlvp

[dorayme]

In article <h3xy74oiv9yx$.7vg2exob...@40tude.net>,

tlvp <mPiOsUcB...@att.net> wrote:

> > You reply on a CSS usenet group and suggest HTML tables to a
> > question with a very simple CSS answer?
>
> :-) Umm ... yes :-) . 1) How else am I to get started learning CSS? and
> 2) Despite all the discussion so far, that "very simple CSS answer" hasn't
> quite materialized yet, has it? Or is it just buried somewhere therein?

Simple answer to what question exactly?

--
dorayme

[dorayme]

In article <uviscdgdv4sf$.1s6xpcecvodfg$.d...@40tude.net>,

tlvp <mPiOsUcB...@att.net> wrote:

> What makes CSS so hard is that it's your end of an indirect action at a
> distance -- you can change the CSS, and ultimately that affects the browser
> rendering, but you have no clear handle on or control over just what a
> browser makes of the CSS requirements you think you're imposing on it.

Is there a browser in quite common use by ordinary folk today
that does not make the text in the paragraph red when you style
it to be red? And so on for a whole heap of CSS2? You are giving
the impression that all CSS is so vague that browser makers make
whatever they like of it, depending on what they have for
breakfast almost!

Surely an extraordinarily exaggerated picture that is designed
for something and I mean to find out what! I have set a team of
men over in our helicopter, they are under orders to see who you
have a bet with, what the bet is, whether you are trying to
spread panic and for why and particularly on who's behalf.

--
dorayme

[Jukka K. Korpela]

2011-12-05 6:02, dorayme wrote:

> Is there a browser in quite common use by ordinary folk today
> that does not make the text in the paragraph red when you style
> it to be red?

Yes, for example IE and Firefox, when instructed by the user to ignore
colors suggested on web pages. And your question contains a good example
of why people may want to exercise such control.

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

[Swifty]

On Mon, 5 Dec 2011 01:13:20 -0000, Philip Herlihy <bounc...@you.com>
wrote:

>Maybe it's a bit like the horror hand-coders always feel when they see
>generated code. Yes it's truly awful, but does it really matter?

There is a complete spectrum of opinion from those who think that the
HTML/CSS must be 100% correct (which will generate correct pages) and
people who think that if the page appears correctly, then the HTML/CSS
is irrelevant.

I'm inside the second camp, but not far off-centre. So I'm free to use
tables if that gets the job done. I'm paid to get the job done, not to
be elegant (anyone who's met me will know that "elegant" is
inconceivable).

At the heart of this is a concept I was taught by my Mathematics
teacher, with his oft used phrase: "Right answer, but for the wrong
reason. No points Swift".

--
Steve Swift
http://www.swiftys.org.uk/swifty.html
http://www.ringers.org.uk

[Swifty]

On Mon, 5 Dec 2011 01:29:35 -0000, Philip Herlihy <bounc...@you.com>
wrote:

>I've found few "languages" I've struggled with as much as I
>have with CSS.

I suspect that if <DIV> were removed, you'd find CSS very simple
indeed.

I dream that some day, I'll come across a set of simple rules, that
makes <DIV> easy to understand.

[Jukka K. Korpela]

2011-12-05 9:07, Swifty wrote:

> I suspect that if <DIV> were removed, you'd find CSS very simple
> indeed.

Why? The removal of <DIV> from HTML would not affect CSS the least. Did
I miss some parody?

The removal of <DIV> would affect _HTML authoring_ for sure. But nobody
is going to do such things. HTML5 might be trying to reduce the use of
<DIV> by offering semantic elements like <FOOTER>, but not with great
success - the main problem is that old versions of IE don't recognize
<FOOTER> at all, so you can't style your footer without tricks, and
styling is the most important practical reason for using some markup to
delineate your footer.

> I dream that some day, I'll come across a set of simple rules, that
> makes <DIV> easy to understand.

There's not much to be understood in <DIV>. It is a semantics-free block
element, commonly used to group things together.

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

[Ben C]

On 2011-12-05, Philip Herlihy <bounc...@you.com> wrote:
> In article <slrnjdmf3u....@bowser.marioworld>,
> spam...@spam.eggs says...

[...]

>> > The page I've been working on (very much incomplete) is here:
>> > http://www.rwsbs.co.uk/floats/
>> >
>> > There's a demo page of what I'm after here:
>> > http://www.rwsbs.co.uk/floats/div-test.htm
>>
>> Just put overflow:hidden on #two and #three in that example and watch
>> what happens. You might also want to put each map+walk in its own div
>> and set clear on those so that the text doesn't get out of sync with the
>> maps.
>
> Thanks for the reply. Golly! Overflow:hidden does (as you say)
> "(move) the left edge of the second block to the right of the float."
>
> I'll need to experiment (tomorrow now) to see what the other
> consequences might be (and try to get my head around why messing with
> Overflow can do this) but at first glance that's very close to what I'm
> after.

I think it might be more or less what you want, because if the box of
text doesn't have a float next to it it will grab the whole width
(unlike when you give it a permanent left margin).

The reason overflow does this is to do with what they call "block
formatting contexts". All the mad fun that floats do (floating around,
pushing text out of the way, etc.) is restricted to the BFC it's in.
Floats from one BFC never go near floats in another. It's sort of like a
wall around part of the document.

Now, certain properties have the side-effect that they turn a box into a
BFC (and it becomes the walled float garden-- or house perhaps in
dorayme terminology-- for all its descendents). Float itself is one, so
is position: absolute, and so is overflow if you set it to anything
except visible.

To understand why it's best to think what the consequences would have
been if they hadn't. If floats from outside could impinge on the
contents of an overflow: scroll box then the text would have to keep
re-wrapping itself around the floats as you scrolled it. That would just
be annoying. As for overflow: hidden, well, there's no huge problem
there, although floats would push text out of the way where you can't
see it. Also, most browsers actually let you scroll overflow: hidden
boxes with JS anyway.

So, to prevent floats from BFCs coming into contact with each other,
they made a few new rules. One is that BFCs get bigger to fit the floats
in. Another is that they get smaller to avoid nearby floats. We're using
that effect here.

Usually if you want a BFC for the side-effects, overflow: hidden has the
least actual effect (boxes often aren't overflowed by their contents
anyway). Using position: absolute to get a BFC would be like eating a
spider because you'd swallowed a fly.

> Who'd have guessed this.

Well, quite.

> CSS is weird...

Too complicated really.

> I must say I've developed a real respect for the people who develop
> browser software!

Yes, although it took them quite some time to get all this right (and
you can still find bugs in most browsers).

[Ben C]

On 2011-12-05, Philip Herlihy <bounc...@you.com> wrote:

> In article <jbfhcf$deg$1...@dont-email.me>, gusri...@netscape.net says...

[...]

> I have to say I don't really 'get' the differences between Strict and
> Transitional

The practical difference is that if you don't use a strict doctype you
throw browsers into "quirks mode". Life is complicated enough without
browsers being thrown into quirks mode.

I recommend putting this first thing in all your pages:

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

[Jukka K. Korpela]

2011-12-05 11:05, Ben C wrote:

> The practical difference is that if you don't use a strict doctype you
> throw browsers into "quirks mode".

No, it's more complicated than that. A Transitional doctype with a URL
(as specified in HTML 4.01 specs) does _not_ put a browser in quirks
mode. Neither does the simple
<!doctype html>

> Life is complicated enough without
> browsers being thrown into quirks mode.

It's also easy to break existing pages horribly by making browsers
display them in "standards mode".

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

[Ben C]

On 2011-12-05, Jukka K. Korpela <jkor...@cs.tut.fi> wrote:
> 2011-12-05 11:05, Ben C wrote:
>
>> The practical difference is that if you don't use a strict doctype you
>> throw browsers into "quirks mode".
>
> No, it's more complicated than that. A Transitional doctype with a URL
> (as specified in HTML 4.01 specs) does _not_ put a browser in quirks
> mode.

This one still gives me quite a few quirks:

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

Try http://www.tidraso.co.uk/quirks-mode/

in a few browsers.

> Neither does the simple <!doctype html>

That's supposed to be HTML5 right? Yes, I would certainly hope that
wouldn't result in quirks mode.

[Jukka K. Korpela]

2011-12-05 12:15, Ben C wrote:

> This one still gives me quite a few quirks:
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

Maybe because it has no whitespace before the public identifier and the
URL. Maybe for some other reason. IE has a very confusing mechanism for
selecting the browser mode (and "document mode"). For example, when you
innocently tell IE, via browser functions, that you wish to see a page
in "compatibility mode", it silently starts showing the entire _domain_
in quirks mode to you.

> Try http://www.tidraso.co.uk/quirks-mode/

"Not Found"

>> Neither does the simple <!doctype html>
>
> That's supposed to be HTML5 right?

It's the doctype recommended in HTML5 drafts. More importantly, it's the
shortest declaration that puts browsers into "standards mode". Not much
risk about typos, is there? (Well, I sometimes forget the "!".)

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

[dorayme]

In article <k4rod75d1c0eki7o2...@4ax.com>,

Swifty <steve....@gmail.com> wrote:

> I dream that some day, I'll come across a set of simple rules, that
> makes <DIV> easy to understand.

What's the problem in understanding the DIV element?

--
dorayme

[dorayme]

In article <jbhq4j$7b9$1...@dont-email.me>,

"Jukka K. Korpela" <jkor...@cs.tut.fi> wrote:

> 2011-12-05 6:02, dorayme wrote:
>
> > Is there a browser in quite common use by ordinary folk today
> > that does not make the text in the paragraph red when you style
> > it to be red?
>
> Yes, for example IE and Firefox, when instructed by the user to ignore
> colors suggested on web pages.

A table tennis ball will usually fall downwards when let go of on
earth. But it will not if someone does something special like
putting a fan under it. It would be a wild exaggeration to
suggest that one cannot normally count on a table tennis ball
going down when let go of.

--
dorayme

[Ben C]

On 2011-12-05, Jukka K. Korpela <jkor...@cs.tut.fi> wrote:

> 2011-12-05 12:15, Ben C wrote:
>
>> This one still gives me quite a few quirks:
>>
>> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
>
> Maybe because it has no whitespace before the public identifier and the
> URL.

Oops! Fixed that now though and I still get the quirks (in
google-chrome and probably Firefox).

[...]

>> Try http://www.tidraso.co.uk/quirks-mode/
>
> "Not Found"

Sorry, http://www.tidraso.co.uk/misc/quirks-mode/

[Philip Herlihy]

In article <dorayme-0FCD5C...@news.albasani.net>,

dor...@optusnet.com.au says...
>
> In article <MPG.29461ef5c...@news.demon.co.uk>,
> Philip Herlihy <bounc...@you.com> wrote:
>
> > In article <dorayme-9E52E2...@news.albasani.net>,
> > dor...@optusnet.com.au says...
> > >
> > > In article <MPG.2944f52c8...@news.demon.co.uk>,
> > > Philip Herlihy <bounc...@you.com> wrote:
> > >
> > > > Nb: I'm no expert in CSS, and I may be missing something really dumb.
> > > >

...

>
> > When I've tried to build columnar layouts using CSS (when not using the
> > "background painting" technique you describe on page 12) I've tried
> > adding a margin to a left-floated image so that when browser squishing
> > forces the displaced text below the image itself, it continues to butt
> > against this artificial margin.
> >
>
> The margin that is usually needed to stop text wrapping under a
> left float should be a left margin on the element that the text
> is in, as discussed above. But perhaps there are ways to put some
> right margin combined with a 100% height on the float container
> itself - thought this would be mostly impractical and would not
> work if the text was long and had to be scrolled for, the text
> would wrap outside the viewport (you would be surprised what goes
> on outside the viewport, the stories I could tell you) and be
> seen to wrap when brought into view.
>

I don't 'get' this, I'm afraid.

>
> > I liked your phrasing: "Heights are hard to predict. To over compensate
> > with a high bid 'just in case' can lead to obvious ugliness where the
> > bluff is not called." That's just what I don't like about the margin-
> > bottom technique described above.
> >
> > Is not the addition of a margin-left just the same?
>
> If you put a left-margin on an element, the whole of that element
> will be left margined no matter how wide (or high) the element
> is. This bit is quite predictable at least and often what is
> wanted.
>
> > I tried it locally,
> > and it didn't deliver what I wanted - I'd like the green div to drop to
> > the left window border when the top line is forced below the bottom of
> > the left-floated element, but the constant margin prevents this. It
> > isn't a columnar effect I want, but an orderly packing of "un-sheared"
> > rectangles of text.
> >
>
> In your
>
> <http://www.rwsbs.co.uk/floats/div-test.htm>
>
> if you add
>
> margin-left: 160px;
>
> to both your #two and #three, you get what you want surely?

Sadly not. I want the orange div to preserve the same left-margin from
top to bottom, declining to wrap under the floated item. Similarly, if
the green div is pushed down so it must start wholly below the blue one
I want that green div to butt up against the left window border. Again,
if the green div starts at a level vertically *above* the bottom of the
blue ("snagged" by the blue, in your article's vivid terminology) I'd
want it to preserve its left margin even when it would otherwise wrap
underneath. Like this:

<div id="blue">
<div id="orange">
<div id="green">

div#blue {
...;
float: left;
}

div#orange, div#green {
...;
shape: dont-shear-dammit !important;
}

--

Phil, London

[Philip Herlihy]

In article <jbi2nr$fd0$2...@dont-email.me>, jkor...@cs.tut.fi says...

Thanks Ben, Jukka,

Time we all let go of quirks mode. I must admit I've given up trying to
cater for IE6 users: they'll be used to pages looking awful so why
should mine be any different? Made the same decision about NN4 ages
ago.

'Strict' sounds good, but I'd be glad to have it clarified whether
Transitional does or does not force quirks mode.

Obviously, you wouldn't want to change the doctype of a page once it's
been tested, but starting out you can pick which is most appropriate.
I'll have to look into all this (unless someone can suggest a good
reference?).

--

Phil, London

[Philip Herlihy]

In article <rhqod7dgkond8vb8l...@4ax.com>,
steve....@gmail.com says...

Thinking about it, standards do help us as they drive browsers towards
agreement on how our code should be rendered. However, choosing to use
a Table instead of CSS layout (both standard) would be entirely
acceptable if the designer recognises that the Table layout couldn't be
revised using a stylesheet. If the Table delivers the desired result
with simple and transparent code, I'd take the view that it would be
silly to press the desirability of expressing layout via CSS if the only
way to do so is to use arcane and unintuitive constructs which only work
because of side-effects of their principal purpose.

I still want to write:

shape: don't-shear-dammit !important;

--

Phil, London

[Philip Herlihy]

In article <jbhs9l$gqh$1...@dont-email.me>, jkor...@cs.tut.fi says...

Well, it's clear to me that this new-fangled CSS is a failed experiment,
and I'm going back to the better-established 'Blazon' for all my
designs.

Here's some example source code, and a link to the resulting layout:

"Quarterly, first and fourth Gules three lions passant gardant in pale
Or armed and langued Azure (for England), second quarter Or a lion
rampant within a double tressure flory-counter-flory Gules (for
Scotland), third quarter Azure a harp Or stringed Argent (for Ireland),
the whole surrounded by the Garter; for a Crest, upon the Royal helm the
imperial crown Proper, thereon a lion statant gardant Or imperially
crowned Proper; Mantling Or and ermine; for Supporters, dexter a lion
rampant gardant Or crowned as the Crest, sinister a unicorn Argent
armed, crined and unguled Proper, gorged with a coronet Or composed of
crosses patée and fleurs de lis a chain affixed thereto passing between
the forelegs and reflexed over the back also Or. Motto 'Dieu et mon
Droit' in the compartment below the shield, with the Union rose,
shamrock and thistle engrafted on the same stem."

http://bit.ly/8YUqm0

:-)

--

Phil, London

[Philip Herlihy]

In article <slrnjdp07f....@bowser.marioworld>,
spam...@spam.eggs says...

Thank you for a very thoughtful account. This is my top priority for
experimenting (although it may be a few days before I get another
opportunity to play with this, due to other work). I'll post back what
I come up with.

--

Phil, London

[Philip Herlihy]

In article <slrnjdpagp....@bowser.marioworld>,
spam...@spam.eggs says...

Whatever I'm doing by default (without thinking about my defaults in
Dreamweaver) I very rarely see any difference between IE9, Chrome,
Firfox and Safari. I don't test anything else.

--

Phil, London

[Swifty]

On Mon, 05 Dec 2011 21:50:44 +1100, dorayme <dor...@optusnet.com.au>
wrote:

>What's the problem in understanding the DIV element?

In my case, it's the amount that you have to take on, against a
background of age-related memory loss. In other words, I can forget
how to use DIV faster than I can learn it.

There are places where I would use DIV (and do, in a few cases), but
my experience is that you insert a DIV for one reason (say, I want to
position a block of text at the top right of the browser window). This
works, but then you notice that strange things have happened to the
rest of the page. It starts to dawn upon you that in order to correct
the problems that have crept in that you're going to have to add more
DIVs.

Pretty soon it becomes obvious that going forward is not an option,
because the page will never fully recover in the time you have
available. So you use a <TABLE WIDTH=100%> and that works first time.

I've been around this loop maybe a dozen times. I have 393 days left,
and I can find better things to do in that time than learning about
DIV.

[Gus Richter]

On 12/5/2011 7:09 AM, Philip Herlihy wrote:
>
> 'Strict' sounds good, but I'd be glad to have it clarified whether
> Transitional does or does not force quirks mode.
>
> Obviously, you wouldn't want to change the doctype of a page once it's
> been tested, but starting out you can pick which is most appropriate.
> I'll have to look into all this (unless someone can suggest a good
> reference?).

<http://hsivonen.iki.fi/doctype/>

--
Gus

[Gus Richter]

On 12/4/2011 7:52 PM, Philip Herlihy wrote:
> In article<jbfhcf$deg$1...@dont-email.me>, gusri...@netscape.net says...
>>

>> On 12/3/2011 10:12 PM, Philip Herlihy wrote:
>>>
>>> I want to be able to force a
>>> block of text (which might be a single paragraph or may include headers
>>> or lists) NOT to wrap round the bottom of a left-floated image but to
>>> have each new line start at the same horizontal distance from the left
>>> edge of the viewport even if it has run below the floated image.
>>>

>>> There's a demo page of what I'm after here:
>>

>> Not really. It may be once your requirements above have been fulfilled.
>>
>>> http://www.rwsbs.co.uk/floats/div-test.htm
>>
>> Place a wrapper div around all of the material to be to the right of
>> div#one (in this case around div#two and div#three) and then add to the
>> stylesheet:
>>
>> #wrapper {margin-left:150px;}
>>
>
> Thanks Gus. But that would surely prevent the green div dropping back
> to the left window-margin when pushed low enough (by a compressed orange
> one) to do so. It's not a columnar effect I'm after this time, but an
> efficient packing without "shearing".


Still trying to understand what it is that you want. "Shearing" is
meaningless in this context. If you want to have the wrapped text in the
green div to not start at the left edge, but at some other point, then
add e.g.:
padding-left:50px;
to #three in the stylesheet for your test case.

--
Gus

[tlvp]

Sorry, dorayme: them's your words behind what my newsreader shows as
">>>" marks, and I just quote them in my reply thereto (behind the ">>"
marks), so it's you better than me who'll be able to say "to what question
exactly" you chided me with the taunt that there's "a very simple CSS
answer" :-) .

Again: sorry, dorayme; but cheers, -- tlvp

[tlvp]

On Mon, 05 Dec 2011 15:02:51 +1100, dorayme wrote:

> In article <uviscdgdv4sf$.1s6xpcecvodfg$.d...@40tude.net>,
> tlvp <mPiOsUcB...@att.net> wrote:
>
>> What makes CSS so hard is that it's your end of an indirect action at a
>> distance -- you can change the CSS, and ultimately that affects the browser
>> rendering, but you have no clear handle on or control over just what a
>> browser makes of the CSS requirements you think you're imposing on it.
>
> Is there a browser in quite common use by ordinary folk today
> that does not make the text in the paragraph red when you style
> it to be red? And so on for a whole heap of CSS2? You are giving
> the impression that all CSS is so vague that browser makers make
> whatever they like of it, depending on what they have for
> breakfast almost!

Not *all*, I grant you. But go back over the whole recent Philip Herlihy
thread, and if you still think what I draw is ...

> ... Surely an extraordinarily exaggerated picture ...

then I simply bow out of the CSS fray entirely.

Cheers, -- tlvp

[Ben C]

On 2011-12-05, Philip Herlihy <bounc...@you.com> wrote:

[...]

> Thinking about it, standards do help us as they drive browsers towards
> agreement on how our code should be rendered. However, choosing to
> use a Table instead of CSS layout (both standard) would be entirely
> acceptable if the designer recognises that the Table layout couldn't
> be revised using a stylesheet.

It can. Tables are part of CSS just like everything else, and you can
use display: table-cell etc. to style non-table elements as tables.

You can also set display: inline on td, display: list-item on tr,
display: block on tbody and table, etc. to make a table display as not a
table.

Tables are specified in CSS, it's just that the spec leaves them quite a
bit of latitude. So you won't get such predictable results across
browsers (especially if you use colspan a lot).

> If the Table delivers the desired result with simple and transparent
> code, I'd take the view that it would be silly to press the
> desirability of expressing layout via CSS if the only way to do so is
> to use arcane and unintuitive constructs which only work because of
> side-effects of their principal purpose.

Yes, by all means use tables if you want that sort of layout. Floats are
useful if you want a slightly less boxy layout and if you want things to
get underneath each other when the viewport gets too narrow.

> I still want to write:
>
> shape: don't-shear-dammit !important;

It's because of people like you that they keep adding more and more
arcane properties to CSS making the problem worse not better :)

[dorayme]

In article <MPG.2946bb2b8...@news.demon.co.uk>,
Philip Herlihy <bounc...@you.com> wrote:

>?> dor...@optusnet.com.au:
...

> > In your
> >
> > <http://www.rwsbs.co.uk/floats/div-test.htm>
> >
> > if you add
> >
> > margin-left: 160px;
> >
> > to both your #two and #three, you get what you want surely?
>
> Sadly not. I want the orange div to preserve the same left-margin from
> top to bottom, declining to wrap under the floated item. Similarly, if
> the green div is pushed down so it must start wholly below the blue one
> I want that green div to butt up against the left window border. Again,
> if the green div starts at a level vertically *above* the bottom of the
> blue ("snagged" by the blue, in your article's vivid terminology) I'd
> want it to preserve its left margin even when it would otherwise wrap
> underneath. Like this:
>

Ah! Finally, one of the little lightbulbs I have in my brain
circuitry for this sort of thing has come on! Should I have
realised this earlier? You want any block of text (like a
paragraph) that starts above (and to the right of the float) to
stay right, in other words for its left edge to be vertical all
the way down but if it starts below the float, it should go to
the left of the viewport under the float.

I can think only of one CSS property that will do this easily, it
is one that a wizard gave a while back and I use it for this sort
of thing. Unfortunately, the wizard has threatened me not to give
it to anyone at all.

But I will call it skunk-oil here (not its real name) and it
works like this: if you rub it on a float's edge, the block of
text next to that edge is so traumatised by the smell that its
own left edge is scared to go left even when it is clear of the
float.

The syntax for your case would be #one {skunk-oil: right;}

There might be a solution to your question with javascript, you
need to get the position of the bottom of the float and the top
of the element of id="three" and this varies according to user
text size and browser width etc.

--
dorayme

[Jukka K. Korpela]

2011-12-05 13:25, Ben C wrote:

>>> This one still gives me quite a few quirks:

[...]
> Sorry, http://www.tidraso.co.uk/misc/quirks-mode/

Quirky indeed. It seems that doctype sniffing and browser modes are even
more messy than documents like http://hsivonen.iki.fi/doctype/ describe.
But some of the tests on your page do not relate to quirks mode issues.
Test 4 uses a presentation attribute, align="center" in a <td> cell.
Browser behavior is the same in all modes: the attribute is honored
(unless overridden by other settings). Besides, <td align="center"> is
valid HTML 4.01 Strict.

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

[dorayme]

In article <1lhjcuumfkxsa.1bz086vtnq6gv$.d...@40tude.net>,

tlvp <mPiOsUcB...@att.net> wrote:

> On Mon, 05 Dec 2011 15:02:51 +1100, dorayme wrote:
>
> > In article <uviscdgdv4sf$.1s6xpcecvodfg$.d...@40tude.net>,
> > tlvp <mPiOsUcB...@att.net> wrote:
> >
> >> What makes CSS so hard is that it's your end of an indirect action at a
> >> distance -- you can change the CSS, and ultimately that affects the browser
> >> rendering, but you have no clear handle on or control over just what a
> >> browser makes of the CSS requirements you think you're imposing on it.
> >
> > Is there a browser in quite common use by ordinary folk today
> > that does not make the text in the paragraph red when you style
> > it to be red? And so on for a whole heap of CSS2? You are giving
> > the impression that all CSS is so vague that browser makers make
> > whatever they like of it, depending on what they have for
> > breakfast almost!
>
> Not *all*, I grant you.

The truth is surely that there is an increasing convergence among
browsers over the interpretation of a very useful and substantial
range of CSS. For a substantial set of CSS, website makers can
have great confidence in how browsers will display their pages.

Much trouble comes from an improper expectation of website makers
for their designs. It is not the fault or vagueness of CSS that
many expect users to have the same eyesight, screens, viewport
sizes. When things don't go as they expect, it is mostly not the
CSS or the browsers that needs cursing.

I just think, with respect, that it is a distorted picture of
this issue to think that, on the whole, website makers can have
no clear control over their products with CSS.

In none of this am I saying that CSS skills are a walk in the
park or that there have not been browsers in the past (some of
which are still peskily hanging about!) that behave in a way
tries everyone's patience on various issues.

--
dorayme

[Ben C]

On 2011-12-05, Jukka K. Korpela <jkor...@cs.tut.fi> wrote:

> 2011-12-05 13:25, Ben C wrote:
>
>>>> This one still gives me quite a few quirks:
> [...]
>> Sorry, http://www.tidraso.co.uk/misc/quirks-mode/
>
> Quirky indeed. It seems that doctype sniffing and browser modes are even
> more messy than documents like http://hsivonen.iki.fi/doctype/ describe.
> But some of the tests on your page do not relate to quirks mode issues.
> Test 4 uses a presentation attribute, align="center" in a <td> cell.

Your built-in mental validator has auto-corrected it for you :) It
actually uses align="middle".

> Browser behavior is the same in all modes: the attribute is honored
> (unless overridden by other settings).

In Firefox (at least) align="middle" only appears to "work" in quirks mode.

[dorayme]

In article <03hpd71hr2nc1v858...@4ax.com>,

You seem to be frustrated at the wrong object! It is not the poor
DIV that should be the focus of your loop but CSS. You write as
if the DIV itself is something mysterious whereas it is surely
CSS that is mysterious to you. There is nothing to learn about
DIVS, they are just an HTML container element we use when there
is nothing more semantically appropriate.

Perhaps the only thing to learn, perhaps it is not quite nothing,
about the DIV is its default styling. Without author CSS, it will
be styled according to the browser coding or hidden default style
sheet. Basically, it begins a new block, is as wide as its
containing element (for example BODY) and as high as whatever
content in it dictates.

Like its inline cousin, SPAN, it is the element you use when
nothing more meaningful is available, an element that is raw
material to be styled all sorts of ways.

--
dorayme

[Thomas 'PointedEars' Lahn]

[A proper, software-supported subject change looks as follows:

1. Subject: Subject A
2. Subject: Subject B (was: Subject A)
3. Subject: Re: Subject B

I am assuming that you did step #2 here.]

Philip Herlihy wrote:

> Well, it's clear to me that this new-fangled CSS is a failed experiment,

You must be joking. CSS turns 15 (years) in 11 days from now [1], and is
anything but "a failed experiment".

> and I'm going back to the better-established 'Blazon' for all my
> designs.
>
> Here's some example source code, and a link to the resulting layout:
>
> "Quarterly, first and fourth Gules three lions passant gardant in pale
> Or armed and langued Azure (for England), second quarter Or a lion
> rampant within a double tressure flory-counter-flory Gules (for
> Scotland), third quarter Azure a harp Or stringed Argent (for Ireland),
> the whole surrounded by the Garter; for a Crest, upon the Royal helm the
> imperial crown Proper, thereon a lion statant gardant Or imperially
> crowned Proper; Mantling Or and ermine; for Supporters, dexter a lion
> rampant gardant Or crowned as the Crest, sinister a unicorn Argent
> armed, crined and unguled Proper, gorged with a coronet Or composed of
> crosses patée and fleurs de lis a chain affixed thereto passing between
> the forelegs and reflexed over the back also Or. Motto 'Dieu et mon
> Droit' in the compartment below the shield, with the Union rose,
> shamrock and thistle engrafted on the same stem."
>
> http://bit.ly/8YUqm0
>
> :-)

So you *are* joking? Well, it is funny in at least *two* ways. The other
being that the "resulting layout" you are referring to is actually created
using a markup language, SVG, (naturally) *formatted with CSS*.

But regarding your question, you do have a blind spot there. Perhaps if you
stated which parts of CSS you have problems with, you could be given an
explanation. But see <http://www.w3.org/Style/CSS/learning> pp. before.


PointedEars
___________
[1] <http://www.w3.org/TR/CSS1>
--
Use any version of Microsoft Frontpage to create your site.
(This won't prevent people from viewing your source, but no one
will want to steal it.)
-- from <http://www.vortex-webdesign.com/help/hidesource.htm> (404-comp.)

[Philip Herlihy]

In article <jbio4s$d8e$1...@dont-email.me>, gusri...@netscape.net says...

Neat - I'll study it!

--

Phil, London

[Philip Herlihy]

In article <jbisbv$aji$1...@dont-email.me>, gusri...@netscape.net says...

Just to clarify: what I mean by "shearing" is when a group of inline
content (think a long paragraph of text) passes the bottom of a left-
floated object and while some remains to the right of the object, some
wraps below it. The resulting shape is a mirror 'L' rather than a
rectangle. In some contexts (narrative flowing around a small-ish
image) it looks great, but where there are many small paragraphs and one
'shears' and those below that point have their "centre of gravity" out
of line with the "c-o-g" of the ones above, I think that looks ugly.

--

Phil, London

[Thomas 'PointedEars' Lahn]

Swifty wrote:

> dorayme wrote:
>> What's the problem in understanding the DIV element?
>
> In my case, it's the amount that you have to take on, against a
> background of age-related memory loss. In other words, I can forget
> how to use DIV faster than I can learn it.
>
> There are places where I would use DIV (and do, in a few cases), but
> my experience is that you insert a DIV for one reason (say, I want to
> position a block of text at the top right of the browser window). This
> works, but then you notice that strange things have happened to the
> rest of the page. It starts to dawn upon you that in order to correct
> the problems that have crept in that you're going to have to add more
> DIVs.
>
> Pretty soon it becomes obvious that going forward is not an option,
> because the page will never fully recover in the time you have
> available. So you use a <TABLE WIDTH=100%> and that works first time.
>
> I've been around this loop maybe a dozen times. I have 393 days left,
> and I can find better things to do in that time than learning about
> DIV.

But CSS is _not_ about using DIV elements (that is only a side-effect). It
is about using stylesheets to achieve things that are purely presentational
(like the display width of a table), instead of markup. IOW, both (X)HTML
and CSS are used in the best possible way if you can take the CSS away and
the document still makes sense. There are testing tools, but a text browser
like Lynx, Links or w3m comes in handy there already.

With regard to DIV elements, however, IMHO the rule of thumb is fairly
simple: If there is to be a block of content, and no semantic block element
fits (e. g., it does not *make sense* to use P, UL, OL, etc.), use DIV.
Prefer SPAN over DIV when you are not formatting blocks of text (e. g., when
neither a `P' nor a `B' element would make sense.) This is regarding HTML4,
though, and something to be discussed elsewhere anyway.


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, <f806at$ail$1$8300...@news.demon.co.uk>

[Philip Herlihy]

In article <slrnjdqbff....@bowser.marioworld>,
spam...@spam.eggs says...

>
> On 2011-12-05, Philip Herlihy <bounc...@you.com> wrote:
> [...]
> > Thinking about it, standards do help us as they drive browsers towards
> > agreement on how our code should be rendered. However, choosing to
> > use a Table instead of CSS layout (both standard) would be entirely
> > acceptable if the designer recognises that the Table layout couldn't
> > be revised using a stylesheet.
>
> It can. Tables are part of CSS just like everything else, and you can
> use display: table-cell etc. to style non-table elements as tables.
>
> You can also set display: inline on td, display: list-item on tr,
> display: block on tbody and table, etc. to make a table display as not a
> table.
>
> Tables are specified in CSS, it's just that the spec leaves them quite a
> bit of latitude. So you won't get such predictable results across
> browsers (especially if you use colspan a lot).

I'd wondered about that, and figured it would be a lot of work to try it
out, and took a guess that browser support would be very variable!

>
> > If the Table delivers the desired result with simple and transparent
> > code, I'd take the view that it would be silly to press the
> > desirability of expressing layout via CSS if the only way to do so is
> > to use arcane and unintuitive constructs which only work because of
> > side-effects of their principal purpose.
>
> Yes, by all means use tables if you want that sort of layout. Floats are
> useful if you want a slightly less boxy layout and if you want things to
> get underneath each other when the viewport gets too narrow.
>
> > I still want to write:
> >
> > shape: don't-shear-dammit !important;
>
> It's because of people like you that they keep adding more and more
> arcane properties to CSS making the problem worse not better :)

I'm sure that's right!

--

Phil, London

[Jukka K. Korpela]

2011-12-06 0:50, Ben C wrote:

> Your built-in mental validator has auto-corrected it for you :) It
> actually uses align="middle".

No, it was Firefox! Or rather Firebug. When I right-clicked on Test 4 at
http://www.tidraso.co.uk/misc/quirks-mode/strict.html
and selected "Inspect Element", I saw the source code

<td align="center"> This should be horizontally centered only in quirks
mode </td>

though the actual source code shows align="middle".

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

[Philip Herlihy]

In article <dorayme-CE351B...@news.albasani.net>,
dor...@optusnet.com.au says...

Whole house stinks of skunk-oil already.

My background as a 'software engineer' makes me shudder at the
complexity of thrashing a browser's rendering engine with JavaScript.
It might be possible, but my blood-pressure couldn't take it...

See my final post this evening where I compare methods and show a very
rough draft of what I want. 'Overflow:hidden is the key.

--

Phil, London

[Philip Herlihy]

In article <7235099.o...@PointedEars.de>, Point...@web.de
says...

Thomas, you need to get out more :-)

I've been playing with CSS for several years now (although I'm no
expert). The hoops you have to jump through to get things to work, even
as browsers begin to coincide on standards, seem excessive to me. The
best languages tame complexity (SQL comes to mind) and CSS doesn't do
this for me, at least. Still, we're trying to write instructions which
are clear both to a human author and to an evolving tribe of unrelated
but similar robots, so I suppose we shouldn't be too surprised.

I can't resist an anecdote (which might shed some light on how I see
such things). My undergraduate subject was Psychology. At the outset
of a third-year lecture course in Mathematical Psychology, the much-
loved Sandy M. observed that for centuries mankind thought the Sun went
round the Earth. Copernicus taught us that the Earth went round the
Sun. Sandy then taught the class: "Of course neither version is any
more true than the other - it's just that with one, the mathematics are
much simpler to write down."

--

Phil, London

[Philip Herlihy]

In article <MPG.2944f52c8...@news.demon.co.uk>,
bounc...@you.com says...

>
> Nb: I'm no expert in CSS, and I may be missing something really dumb.
>

> Here's what I want to do, in code (with an invented value for
> "display"):
>
>
> <div id="This-is-a-left-floated-image"
> style="float:left; height: 200px; width: 200px">
> <img src="myImage.jpg">
> </div>
>
> <div id="I-want-this-to-stay-rectangular"
> style="display: be-a-rectangle-dammit !important">
> <p>several lines of text</p>
> </div>
>
>
> I've tried everything (?) to achieve this: I want to be able to force a

> block of text (which might be a single paragraph or may include headers
> or lists) NOT to wrap round the bottom of a left-floated image but to
> have each new line start at the same horizontal distance from the left
> edge of the viewport even if it has run below the floated image.
>

> If all I had on the page were small-ish images, it would be easy - I'd
> just float everything :left and they would pack themselves across the
> viewport until there was no room for another and then start a new line
> of images. Nothing would "shear" so that part was to the right of the
> preceding element and part was underneath. I want exactly that for
> text.
>
> I'm working on a page which has a map (of Epping Forest), an intro, and
> a dozen similar descriptions of a monthly "walk" (each is currently a
> div with an h2, h3 and a couple of p). I'd like the "walk" divs to wrap
> around the map without any of them going L-shaped.
>
> Is that so hard? (I guess...)
>
> One thing I came up with was to make the image a background-image, and
> to duplicate the div, so that each appeared twice. The first copy is
> cleared :both and floated :left, and I set width and padding by
> percentage so that both would squish up nicely as the window is squished
> up. Then I set the left-hand one to have visibility: hidden, and all
> you see is the right-hand one. It doesn't "shear", as the thing it's
> being floated round is guaranteed to have the same dimensions. Thought
> I was pretty smart with this dodge. Initially.
>
> But it doesn't scale. As you pass the bottom of the map there is now
> room for two of these "walk" divs (in a typical window width) but this
> (crazy?) method just leaves a big gap (where the hidden div is lurking).
>
> What I want is a truly fluid layout, so I can start with full-screen on
> my huge monitor and then squish it narrower and have everything slot
> into place in the space available without any of my "walk" divs
> "shearing" (wrapping partly under its neighbour on the left).
>
> How can I do this? Make an old fool happy...

>
> The page I've been working on (very much incomplete) is here:
> http://www.rwsbs.co.uk/floats/
>

> There's a demo page of what I'm after here:

> http://www.rwsbs.co.uk/floats/div-test.htm

Thanks very much indeed for the patient and wise responses I've received
to a problem that has driven me potty since I started playing with
Floats (surely the first positional technique anyone tries).

This demo page shows what I didn't want:
http://www.rwsbs.co.uk/floats/div-test.htm

Ben and others mentioned the 'overflow' attribute, and Block Formatting
Contexts. This page shows my first use of it:
http://www.rwsbs.co.uk/floats/div-test-overflow.htm
... it seems to be doing what I want.

My first (tortuous) attempt to achieve this effect had been to duplicate
or "mirror" the blocks I wanted to prevent from 'shearing' (see earlier
message for my explanation of this term) and to set visibility:hidden
for the place-holding duplicates. As the viewport was squished and
stretched the mirror block would necessarily claim the same vertical
space but would not be visible. It sort of worked (but always had to be
a lunatic way to do this):
http://www.rwsbs.co.uk/floats/index-visibility-hidden.htm

(in these examples I've moved the CSS into the same file in case anyone
wants to follow it without having to track down my external stylesheet.)

I also experimented with a solution based on tables. It *sort of* got
there, but clearly lacks the flexibility of a floated approach:
http://www.rwsbs.co.uk/floats/index-table.htm
(I've left the borders at 1px so you can see where things are easily.)

But it looks like this is the basis of a solution:
http://www.rwsbs.co.uk/floats/index-spacers-overflow.htm

I've used a couple of transparent, sized "spacer" DIVs, both floated
left, above the map which is a background-image to an encompassing DIV.
I've contained the multiple 'walk' DIVs in a DIV id="walks", and set
overflow:hidden on that outer one. Toggling that overflow value between
hidden & visible is enough to inflict and remove the 'shearing' that I
dislike so much (although you might notice that it looks fine in the
'intro' DIV which precedes the walks.

Yes, I might instead have 'sliced' the map and used the slices in the
foreground, but I rather think the use of a background-image has less
complexity overall.

Obviously there is a lot of cosmetic attention needed before I'd want
anyone other than a CSS-head to see it, but I'm satisfied that it's the
basis of a solution. I'm now ruminating over whether (and how) to fill
the blank spaces which emerge at some window dimensions - perhaps a
repeated washed-out background image (but that's another story). You'll
see I've emphasised the structure for anyone interested with otherwise
superfluous borders and 'labels'.

I'll have fun tinkering with this over the rest of the month, and with a
bit of luck it'll soon be incorporated into the main website for the
"Friends..." (normally maintained by a good and decent chap who has
declared he'll get by without CSS altogether).

Best wishes to all; very happy to make your acquaintance.

Phil

--

Phil, London

[Philip Herlihy]

In article <1429152.B...@PointedEars.de>, Point...@web.de
says...

If you want to see the power of CSS when done really, really well, you
should look at www.csszengarden.com.

Same HTML, different stylesheets loaded by clicking a link (take care to
distinguish that link from the adjacent link to the designer's
portfolio, to avoid confusion). Those workmen won't be blaming their
tools any time soon.

--

Phil, London

[Thomas 'PointedEars' Lahn]

Philip Herlihy wrote:

> In article <7235099.o...@PointedEars.de>, Point...@web.de
> says...

It is called attribution *line*, _not_ attribution novel, for a reason.

>> > Here's some example source code, and a link to the resulting layout:

>> > […]

>> > http://bit.ly/8YUqm0
>> >
>> > :-)
>>
>> So you *are* joking? Well, it is funny in at least *two* ways. The
>> other being that the "resulting layout" you are referring to is actually
>> created using a markup language, SVG, (naturally) *formatted with CSS*.

Did you even notice this while mindlessly full-quoting my article?

>> But regarding your question, you do have a blind spot there. Perhaps if
>> you stated which parts of CSS you have problems with, you could be given
>> an explanation. But see <http://www.w3.org/Style/CSS/learning> pp.
>> before.
>

> Thomas, you need to get out more :-)

Smileys do not make impolite things suddenly funny.

> I've been playing with CSS for several years now (although I'm no
> expert).

You should stop playing, and do something serious with it, or you will never
be an expert.

> The hoops you have to jump through to get things to work, even
> as browsers begin to coincide on standards, seem excessive to me.

That must be because you do not really understand (the purpose of) CSS. The
hoops you "have to" jump through are only for IE/MSHTML by now; Conditional
Comments can take care of that. Everything else is optional, and if you are
(very) lucky, even (some of) the hoops are optional.

> The best languages tame complexity (SQL comes to mind) and CSS doesn't do
> this for me, at least.

CSS is not remotely like SQL by any measure. It is not a database query
language, and it is not a programming language (standard SQL is not as
well). It is a formatting language for (SGML-based) markup, using a rather
smart approach (the cascade). Live *with* it.

> Still, we're trying to write instructions which are clear both to a human
> author and to an evolving tribe of unrelated but similar robots, so I
> suppose we shouldn't be too surprised.

I do not know whom your "we" includes, but *I* do _not_ write instructions
in CSS, and I do _not_ write CSS for robots. I write selectors and property
declarations for layout engines.

> I can't resist an anecdote […]

This is not your diary or autobiography. Stop wasting (my) time, skip the
fairytales, and get some convincing arguments on the table. Or be quiet,
please.


PointedEars
--
realism: HTML 4.01 Strict
evangelism: XHTML 1.0 Strict
madness: XHTML 1.1 as application/xhtml+xml
-- Bjoern Hoehrmann

[Philip Herlihy]

In article <6246084.C...@PointedEars.de>, Point...@web.de
says...

>
> Philip Herlihy wrote:
>
> > In article <7235099.o...@PointedEars.de>, Point...@web.de
> > says...
>
> It is called attribution *line*, _not_ attribution novel, for a reason.
>
> >> > Here's some example source code, and a link to the resulting layout:

> >> > [?]

> > I can't resist an anecdote [?]

>
> This is not your diary or autobiography. Stop wasting (my) time, skip the
> fairytales, and get some convincing arguments on the table. Or be quiet,
> please.
>
>
> PointedEars

Thomas, you *really* need to get out more. :-(

--

Phil, London

[dorayme]

In article <MPG.294765549...@news.demon.co.uk>,

Philip Herlihy <bounc...@you.com> wrote:

> See my final post this evening where I compare methods and show a very
> rough draft of what I want. 'Overflow:hidden is the key.

OK, I see. You don't need js.

As a general solution, I guess we all have different aesthetic
senses, looks odd to me to want a paragraph, especially a long
one, that is next to a float to keep the same distance from
vertical line of the right of the float but have the next para -
which may be way down the page - go quite left. And maybe you
might have a few paras with floats, the floats might be of
different sizes, a few paras without floats, it sounds like a
complicated aesthetics. simpler and more consistent looking to
have all the text with a left margin or all the text to wrap to
left when it can. But your purpose might be very particular and
so good luck to you.

--
dorayme

[Gus Richter]

On 12/5/2011 6:25 PM, Philip Herlihy wrote:
>
> Just to clarify: what I mean by "shearing" is when a group of inline
> content (think a long paragraph of text) passes the bottom of a left-
> floated object and while some remains to the right of the object, some
> wraps below it. The resulting shape is a mirror 'L' rather than a
> rectangle. In some contexts (narrative flowing around a small-ish
> image) it looks great, but where there are many small paragraphs and one
> 'shears' and those below that point have their "centre of gravity" out
> of line with the "c-o-g" of the ones above, I think that looks ugly.

Why not call it wrapping or shrink-wrapping instead of shearing?

So, did you find the answer to your question? I still don't know what
your question is.

--
Gus

[Norman Peelman]

On 12/05/2011 06:25 PM, Philip Herlihy wrote:
> In article<jbisbv$aji$1...@dont-email.me>, gusri...@netscape.net says...

So why not wrap DIVs 2 and 3 within a container DIV that will keep
them aligned regardless of how long DIV 1 is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Page</title>
<style type="text/css">
<!--
#one {
background-color:#009;
color: white;
width: 150px;
height: 200px;
float: left;
}
#two {
width: 75%;
background-color:#FC6;
}
#three {
width: 75%;
background-color:#6C9;
}
#container {
width: 75%;
float:left;
background-color:red;
}
-->
</style>
</head>
<body>
<div id="one">
<p>Regardless of browser-width, I want both other divs to maintain a
constant horizontal distance from the left window edge, if necessary
leaving white space under this blue div. Any ideas?</p>
</div>
<div id="container">
<div id="two">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum. </p>
</div>
<div id="three">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus
error sit voluptatem accusantium doloremque laudantium, totam rem
aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto
beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni
dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam
est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
sed quia non numquam eius modi tempora incidunt ut labore et dolore
magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis
nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut
aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit
qui in ea voluptate velit esse quam nihil molestiae consequatur, vel
illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
</div>
</div>
</body>
</html>


--
Norman
Registered Linux user #461062
AMD64X2 6400+ Ubuntu 10.04 64bit

[Gus Richter]

On 12/5/2011 9:13 PM, Gus Richter wrote:
>
> So, did you find the answer to your question? I still don't know what
> your question is.

I read your subsequent posting and understand now.

--
Gus

[dorayme]

In article <MPG.294765549...@news.demon.co.uk>,

Philip Herlihy <bounc...@you.com> wrote:

> See my final post this evening where I compare methods and show a very
> rough draft of what I want. 'Overflow:hidden is the key.

I did. I better not criticise what I am seeing considering the
confusion that has occurred on all our parts (including mine) in
communication so far.

Someone keeps changing the thread subject for some reason btw?

May I suggest keeping things much simpler? Using some of the
things you have but taking a large pair of scissors to it, maybe
you can get an idea of simpler from

<http://dorayme.netweaver.com.au/friendsOfEppingForest.html>

--
dorayme

[Gus Richter]

On 12/5/2011 9:25 PM, Norman Peelman wrote:
>
> So why not wrap DIVs 2 and 3 within a container DIV that will keep them
> aligned regardless of how long DIV 1 is:

I had suggested this earlier, but called your #container a #wrapper and
it was rejected as:

Thanks Gus. But that would surely prevent the green div dropping
back to the left window-margin when pushed low enough (by a
compressed orange one) to do so. It's not a columnar effect I'm
after this time, but an efficient packing without "shearing".

Of course you are right as to his latest requirement per his latest test
case. I believe that he had a little too much of the bubbly along the
way, resulting in his rejection.

BTW, this method *or* the overflow method give the same results.
Whatever, I'm happy he's happy.

--
Gus

[Gus Richter]

On 12/5/2011 9:25 PM, Norman Peelman wrote:
>

> So why not wrap DIVs 2 and 3 within a container DIV that will keep them
> aligned regardless of how long DIV 1 is:

Of course I also at the same time advised him to:
1. Get rid of the html comments in your stylesheet, and
2. Use strict and not transitional doctype
I note that you have carried the same bad habit on here.

--
Gus

[Swifty]

On Tue, 06 Dec 2011 01:30:57 +0200, "Jukka K. Korpela"
<jkor...@cs.tut.fi> wrote:

>I saw the source code
>
><td align="center"> This should be horizontally centered only in quirks
>mode </td>
>
>though the actual source code shows align="middle".

Argh! I just felt the Universe shudder a little. Now we know where the
dark matter is; it's somewhere inside Firebug...

--
Steve Swift
http://www.swiftys.org.uk/swifty.html
http://www.ringers.org.uk

[Swifty]

On Tue, 06 Dec 2011 09:45:10 +1100, dorayme <dor...@optusnet.com.au>
wrote:

>The truth is surely that there is an increasing convergence among
>browsers over the interpretation of a very useful and substantial
>range of CSS.

Off topic here, but I recently read that Microsoft had written a
comprehensive HTML5 compliance test, and it had been accepted as the
de facto reference. This would ensure that all browsers would
converge on how Microsoft thinks it should be done. Convergence is
good, but I'm less sure about this.

[Ben C]

Looks very nice but I can't help thinking that what is really needed is
an openstreetmap mashup at this point. Actually you can even do Ordnance
Survey mashups these days. Either is better than Google maps since that
doesn't have footpaths on it.

The minimum would be to make those grid refs links to openstreetmap.
See: http://wiki.openstreetmap.org/wiki/Browsing#Linking_to_Maps.

This will require converting them to latitudes and longitudes properly
accounting for the curvature of the earth.

[dorayme]

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

Interesting, "OpenStreetMap is a free editable map of the whole
world." and all sorts of things in all of this, never knew about
any of it.

Am living for the moment in this area:

<http://osm.org/go/uN~U0aOb-->

Rather nice part of Sydney.

There, I practised using it and getting the 'short' link. Must
look at this some more.

Confession: I rather like Google Maps! And more so now I am on
fast cable. It is for simpler creatures like me, you geek you! <g>

Not sure OP is interested but whatever he decides, I think a
background image, I think that is what he had, is not the way to
go on what is a critical bit of information for the page.

--
dorayme

[Jukka K. Korpela]

2011-12-06 8:53, Swifty wrote:

> Off topic here, but I recently read that Microsoft had written a
> comprehensive HTML5 compliance test, and it had been accepted as the
> de facto reference.

I think it was over year ago, see e.g.
http://www.conceivablytech.com/3862/products/ie9-pp6-wins-w3c-html5-shootout

HTML5 compliance may be a CSS issue too, especially if CSS3 is regarded
as part of HTML5, as some people do...

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

[Thomas 'PointedEars' Lahn]

Swifty wrote:

> Philip Herlihy wrote:
>> Maybe it's a bit like the horror hand-coders always feel when they see
>> generated code. Yes it's truly awful, but does it really matter?
>
> There is a complete spectrum of opinion from those who think that the
> HTML/CSS must be 100% correct (which will generate correct pages) and
> people who think that if the page appears correctly, then the HTML/CSS
> is irrelevant.
>
> I'm inside the second camp, but not far off-centre. So I'm free to use
> tables if that gets the job done. I'm paid to get the job done, not to
> be elegant (anyone who's met me will know that "elegant" is
> inconceivable).

You do realize, of course, that the "elegant solution" here is the one that
makes the most sense, is the most flexible one, and the most efficient one
once you know how to do it? That it is *part of the job*?


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

[Ben C]

On 2011-12-06, dorayme <dor...@optusnet.com.au> wrote:
> In article <slrnjdrmg8....@bowser.marioworld>,
> Ben C <spam...@spam.eggs> wrote:

[...]

>> Looks very nice but I can't help thinking that what is really needed is
>> an openstreetmap mashup at this point. Actually you can even do Ordnance
>> Survey mashups these days. Either is better than Google maps since that
>> doesn't have footpaths on it.
>>
>> The minimum would be to make those grid refs links to openstreetmap.
>> See: http://wiki.openstreetmap.org/wiki/Browsing#Linking_to_Maps.
>>
>> This will require converting them to latitudes and longitudes properly
>> accounting for the curvature of the earth.
>
> Interesting, "OpenStreetMap is a free editable map of the whole
> world." and all sorts of things in all of this, never knew about
> any of it.

The mapping is very good anywhere a lot of geeks live-- Cambridge,
Germany, etc. France however is a desert.

> Am living for the moment in this area:
>
><http://osm.org/go/uN~U0aOb-->
>
> Rather nice part of Sydney.

It looks very nice. Quite well mapped too, probably a good area :)

> There, I practised using it and getting the 'short' link. Must
> look at this some more.
>
> Confession: I rather like Google Maps! And more so now I am on
> fast cable. It is for simpler creatures like me, you geek you! <g>

Google maps is very good but only for car driving. For walking or
cycling OSM is much better. If the footpaths OP is using in Epping
Forest are not on OSM he can just put them there himself.

[Norman Peelman]

I'm no pro, I just copied n' pasted for the quick example.

[Norman Peelman]

On 12/04/2011 08:29 PM, Philip Herlihy wrote:
> In article<MPG.2944f52c8...@news.demon.co.uk>,

> bounc...@you.com says...
>>
>> Nb: I'm no expert in CSS, and I may be missing something really dumb.
>>
>> Here's what I want to do, in code (with an invented value for
>> "display"):
>>
>>
>> <div id="This-is-a-left-floated-image"
>> style="float:left; height: 200px; width: 200px">
>> <img src="myImage.jpg">
>> </div>
>>
>> <div id="I-want-this-to-stay-rectangular"
>> style="display: be-a-rectangle-dammit !important">
>> <p>several lines of text</p>
>> </div>
>>
>>

>> I've tried everything (?) to achieve this: I want to be able to force a

>> block of text (which might be a single paragraph or may include headers
>> or lists) NOT to wrap round the bottom of a left-floated image but to
>> have each new line start at the same horizontal distance from the left
>> edge of the viewport even if it has run below the floated image.
>>

>> There's a demo page of what I'm after here:

>> http://www.rwsbs.co.uk/floats/div-test.htm
>
> Over the 30 years or so I've been in the IT industry (mostly as a
> programmer) I've found few "languages" I've struggled with as much as I
> have with CSS. Even nroff was easier than this!
>
> It dawned on me a long time ago that computers only "understand" strings
> of ones and zeroes, and that all other languages are useful only to aid
> human comprehension of complexity. A "good" language is intuitive and
> expressive, and much of my effort in writing code has always gone into
> making what I'm intending transparent to a human reader. Maybe I have a
> blind spot, but CSS is hard...
>
> Phil
>

In Firefox if I zoom in 3 times #intro goes 'L' shaped around
#spacer2. However, I believe I have duplicated your design by:

1) removed the divs #spacers 1 & 2, and #walks

2) div.intro -> changed

div#intro {
border: 5px solid brown;
margin: 1% 0 2%;
overflow: visible;
padding-left: 45%;
padding-right: 1%;
padding-top: 1%;
text-align: center;
}

3) div.walk -> changed

div.walk {
background-color: #EEEEEE;
border: 3px solid green;
margin-bottom: 1%;
margin-left: 35%;
padding: 2%;
text-align: center;
width: 50%;

[Gus Richter]

On 12/5/2011 10:23 PM, Gus Richter wrote:

>
> BTW, this method *or* the overflow method give the same results.
> Whatever, I'm happy he's happy.

Nobody is coming back to correct me, so I will followup with a
correction/summary.

There are three methods shown in this thread; use of overflow (by Ben),
a wrapper with float applied (by Norman) and a wrapper with margin-left
applied (me).

--
Gus

[Dr J R Stockton]

In comp.infosystems.www.authoring.stylesheets message <MPG.2947752475c44
1c89...@news.demon.co.uk>, Tue, 6 Dec 2011 00:41:44, Philip Herlihy
<bounc...@you.com> posted:

>> > I can't resist an anecdote [?]
>>
>> This is not your diary or autobiography. Stop wasting (my) time, skip the
>> fairytales, and get some convincing arguments on the table. Or be quiet,
>> please.
>>
>>
>> PointedEars
>
>Thomas, you *really* need to get out more. :-(

Perhaps he is not *allowed* out. He does have a peculiar angle in
things.

I see that his Web site still contains an elementary error in a
JavaScript library, and needs a spelling-checker nearby.

--
(c) John Stockton, nr London, UK. ?@merlyn.demon.co.uk Turnpike v6.05.
Website <http://www.merlyn.demon.co.uk/> - w. FAQish topics, links, acronyms
PAS EXE etc. : <http://www.merlyn.demon.co.uk/programs/> - see in 00index.htm
Dates - miscdate.htm estrdate.htm js-dates.htm pas-time.htm critdate.htm etc.

[Philip Herlihy]

In article <dorayme-4B4B25...@news.albasani.net>,
dor...@optusnet.com.au says...

You're right that complexity in design needs to be accounted for! What
I have in the back of my mind is to shrink the "walk" blocks
significantly, and see if I can get them to wrap one, two, three (more?)
to a line, depending on the browser width. Of course I may find that
overflow:hidden and float:left either don't coexist or have some ghastly
side-effect, but I now have the tools to try it, thanks to the help I've
had here.

--

Phil, London

[Philip Herlihy]

In article <jbjtoa$8ct$1...@dont-email.me>, gusri...@netscape.net says...

>
> On 12/5/2011 6:25 PM, Philip Herlihy wrote:
> >
> > Just to clarify: what I mean by "shearing" is when a group of inline
> > content (think a long paragraph of text) passes the bottom of a left-
> > floated object and while some remains to the right of the object, some
> > wraps below it. The resulting shape is a mirror 'L' rather than a
> > rectangle. In some contexts (narrative flowing around a small-ish
> > image) it looks great, but where there are many small paragraphs and one
> > 'shears' and those below that point have their "centre of gravity" out
> > of line with the "c-o-g" of the ones above, I think that looks ugly.
>
>
> Why not call it wrapping or shrink-wrapping instead of shearing?
>

I found this definition (among surprisingly many others!):

"Mechanics, Geology . to become fractured along a plane as a result of
forces acting parallel to the plane."

http://dictionary.reference.com/browse/shear

--

Phil, London

[Philip Herlihy]

In article <jbk1rd$73q$1...@dont-email.me>, gusri...@netscape.net says...

They don't give the same results. The 'overflow' method seems to do
exactly what I wanted, which is to allow objects to wrap completely
underneath the floated object, but all-or-nothing.

Generally, bubbly makes me more acquiescent, and I question whether you
can have too much...

--

Phil, London

[Philip Herlihy]

In article <jbntft$1id$1...@dont-email.me>, gusri...@netscape.net says...

Only the overflow method allows wrapping but prevents partial wrapping
(what I've called "shearing").

--

Phil, London

[Philip Herlihy]

In article <dorayme-B19DA8...@news.albasani.net>,
dor...@optusnet.com.au says...

Yes - that's very nice! I must say that I've probably been a bit
fixated on filling the empty space bottom-right of the map. Not enough
bubbly!

It's certainly a solution. (Much appreciated.) I'll still fool around
with floats, though, as I've sweated to avoid "shearing" many times in
the past.

I've certainly learned a lot from this. Your article on Floats is a
cracker...

--

Phil, London

[Philip Herlihy]

In article <slrnjdrsf3....@bowser.marioworld>,
spam...@spam.eggs says...

I love maps, and always have. I've only recently renewed my
acquaintance with OSM, and they've come on in leaps and bounds since I
last looked a few years ago. I use OS maps from Anquet.co.uk - great
selection of custom maps, although the software that runs them is really
flaky on my Windows 6.5 mobile. I have OS maps at loads of different
scales, including historical maps from 1805, so I can march around
Walthamstow, London, with the GPS cross-hairs showing me what would have
been under my feet in 1805. I've also used the OpenData from the OS to
show very detailed mapping in websites - it's easy to use and very good
indeed.

I'm only a contributor to the website which this page is to be part of.
That's currently maintained by a lovely chap who has never used any CSS
ever, so everything is HTML tables. The page I'm trying to replace
simply has a full-size scanned image of a printed newsletter. I'd quite
like to take the site over and do it (I was going to say properly, but
I'm in more senior company here...). Nevertheless, I have to fit in
gently and diplomatically. I'm new to the society which runs these
walks so it's best not to be too cocky!

Certainly there would be links to maps, particularly for the starting
point. I'll be tinkering with this page for quite a while yet, now that
I know how to solve the particular problem I'd identified (and have seen
a neat and now obvious way of side-stepping it!).

Picking up on Dorayme's comment (is that Dora, or Ray?) about use of a
background image - that was merely a consequence of the dotty solution
involving visibility:hidden duplicates of div.walk.

--

Phil, London

[Philip Herlihy]

In article <jbl654$kki$1...@dont-email.me>, npeel...@cfl.rr.com says...

>
> On 12/04/2011 08:29 PM, Philip Herlihy wrote:
> > In article<MPG.2944f52c8...@news.demon.co.uk>,
> > bounc...@you.com says...
> >>
> >> Nb: I'm no expert in CSS, and I may be missing something really dumb.
> >>
>

> In Firefox if I zoom in 3 times #intro goes 'L' shaped around
> #spacer2. However, I believe I have duplicated your design by:
>
> 1) removed the divs #spacers 1 & 2, and #walks
>
> 2) div.intro -> changed
>
> div#intro {
> border: 5px solid brown;
> margin: 1% 0 2%;
> overflow: visible;
> padding-left: 45%;
> padding-right: 1%;
> padding-top: 1%;
> text-align: center;
> }
>
> 3) div.walk -> changed
>
> div.walk {
> background-color: #EEEEEE;
> border: 3px solid green;
> margin-bottom: 1%;
> margin-left: 35%;
> padding: 2%;
> text-align: center;
> width: 50%;
> }

Yes, the #intro does wrap around #spacer2 - "shearing" as it does so -
and I think it looks fine at this point. I removed the overflow:hidden
markup to allow it to do so. I hope that doesn't seem quixotically
inconsistent!

I incorporated your suggestion (using margins) into a copy of my page.
It looks ok down to a viewport width of 1024px, but below that the text
starts to cover up the map. I think either a float (either of
transparent spacers or a sliced map in the foreground) would be better,
or possibly Dorayme's huge simplication of having the map on the right-
hand side! Although there are less monitors out there at 800x600, there
are tablets and mobiles now to consider.

I'll persist with this a bit, as I've learned some really useful stuff
here. I guess what I'm after is a sort of horizontal Tetris! If I get
something looking as I want it I'll post a link.

Thanks again to all for the interest, and the generous help.
--

Phil, London

[Philip Herlihy]

In article <oP2Va3F$e83O...@invalid.uk.co.demon.merlyn.invalid>,
repl...@merlyn.demon.co.uk says...

>
> In comp.infosystems.www.authoring.stylesheets message <MPG.2947752475c44
> 1c89...@news.demon.co.uk>, Tue, 6 Dec 2011 00:41:44, Philip Herlihy
> <bounc...@you.com> posted:
>

> I see that his Web site still contains an elementary error in a
> JavaScript library, and needs a spelling-checker nearby.

Good to see you eye for detail is undiminished, John!

--

Phil, London

[Ben C]

On 2011-12-08, Philip Herlihy <bounc...@you.com> wrote:
[...]

> You're right that complexity in design needs to be accounted for! What
> I have in the back of my mind is to shrink the "walk" blocks
> significantly, and see if I can get them to wrap one, two, three (more?)
> to a line, depending on the browser width. Of course I may find that
> overflow:hidden and float:left either don't coexist or have some ghastly
> side-effect

No they'll be fine. If a box is floated you don't need overflow: hidden
to make it into a "block formatting context"-- floats are BFCs anyway.
So all overflow: hidden does on them is clip any overflowing content
(but there usually isn't any if you left height as auto, width as
comfortably longer than the longest word, and didn't do anything else
too out of the ordinary).

[tlvp]

On Thu, 8 Dec 2011 17:27:26 -0000, Philip Herlihy wrote:

> ... there are less monitors out there at 800x600, ...

I'm only a sample of 1, but, fwiw, while my monitor is a full laptop's
1280 x 800, I tend to run my browser not full-screen but only "restored,"
at anywhere from 500 to 1000 px wide. So I'd never imagine anyone else
would care to run their browser full-screen, either :-) .

In fact, my own design seeks to display well in browser viewports of width
anywhere between 500 and 1500 px.

> ... there

> are tablets and mobiles now to consider.

Indeed. But I find it hopeless to imagine a page designed for a netbook,
notebook, or desktop can possibly be rendered satisfactorily on a screen
as small as that of a basic "feature phone", that is, 128 x 128, or even
160 x 120, or even 240 x 180. Totally alternative design required there,
from my PoV -- and WML coding more than likely, not HTML :-) .

Cheers, -- tlvp
--
Avant de repondre, jeter la poubelle, SVP.

[Philip Herlihy]

In article <slrnje2312....@bowser.marioworld>,
spam...@spam.eggs says...

So I see!

I now have my 'tetris' effect - sort of. I set the individual .walk
items to float:left (and so didn't need the overflow:hidden). The
problem is that because they are not all the same size, they don't pack
neatly. I've only just got this far, but I'm sharing the half-baked
result in case anyone's still interested.

http://www.rwsbs.co.uk/floats/tetris.htm

I've changed from a background image to two slices of the original,
which float (the second one is set to clear:left). The #intro is set to
wrap around, but the divs .walk are set to float and have a fixed width.
I get the Tetris effect, but it's a bit of a mess. Current thinking is
I'll set a fixed height, but if I don't take the dog for a walk right
now he'll chew my leg off...

If you are curious enough to want to fiddle with it, the images (to go
in an /images folder) are here:

http://www.rwsbs.co.uk/floats/images/leaves_light_md_wht.jpg
http://www.rwsbs.co.uk/floats/images/map_r1_c1.jpg
http://www.rwsbs.co.uk/floats/images/map_r2_c1.jpg
--

Phil, London

[Philip Herlihy]

In article <6bf4eod48cdo$.1irkjyb9y6502$.d...@40tude.net>,
mPiOsUcB...@att.net says...

I tend to aim for a minimum of 800 and I lose interest in layout when
the viewport is more than double that - few people will run a full-
screen browser with resolutions more than 1600 and they'll know what to
expect! You may be right about my needing to think smaller.

For mobile devices it depends crucially on the graphics involved, I
think (although the day is coming when we can rely on browsers to scale
graphics acceptably perhaps). I did one site recently which had an
'impact' graphic as its background and the client had chosen one with
the main feature on the right hand side. I mangaged to figure a layout
which right-aligned the graphic so at the very narrowest this feature
was all you could see, and it looks fine at 350px (and all but one page
is acceptable at 220px). The 'wide' page has a table to lay out contact
details nicely.

--

Phil, London

[dorayme]

In article <MPG.294b02ee2...@news.demon.co.uk>,

Philip Herlihy <bounc...@you.com> wrote:

> or possibly Dorayme's huge simplication of having the map on the right

Just a further word on this. The map on the right is not that
important (though I had my reasons), you can use the space under
it for further notices and information and you could do this if
it was on left. This is the sort of thing it is difficult for
anyone but you to judge in the actual concrete situation.

I was offering the page more as a real simplification in the mark
up and styling that might appeal to you.

If I was doing this page for real, I would likely make the map at
the limits of readability so it would be small and neat to fit
in, not meant to be studied *in detail* right there and then. But
anchored or hoverable to a first class bigger and readable and/or
separately printable one. The map is an important feature of the
communication, it should not be a bg image.

--
dorayme

[Philip Herlihy]

In article <MPG.294b312c4...@news.demon.co.uk>,
bounc...@you.com says...

One more image (after some titivating):
http://www.rwsbs.co.uk/floats/images/clip.gif

The problem with trying to get the things the same height, in a truly
fluid layout, is that the content is all different, so unless I fix
everything in pixels, it's going to be tricky!

--

Phil, London

[Philip Herlihy]

In article <dorayme-35847A...@news.albasani.net>,
dor...@optusnet.com.au says...

Interesting thought. I rather think I've given myself a lot of trouble
in the past by trying to create fluid layouts around rather large
images.

--

Phil, London

[Philip Herlihy]

In article <MPG.294b4ccdc...@news.demon.co.uk>,

Spent quite a while (out walking the dog) ruminating on how to solve the
height problem. Tetris would be a lot harder to play if the boxes were
different sizes! I thought of:
* Trying to fill the entries with invisible text (nbsp even) to pad
every line to the same length (come on...)
* Loading the .walk DIVs with transparent floated spacers in a different
z-layer to get the same area (which is what's needed), but I figured I'd
need 12 per div, times 13 divs (come on...)
* Reluctantly I tried fixed pixel sizes. And of course, some entries
are short, and some are long. So then I went back to the overflow
property but set it to :scroll. And I now I get the Tetris effect
exactly as I'd wanted it.

Some tuning needed, but this:
http://www.rwsbs.co.uk/floats/tetris.htm
... could be a solution.

However, is dorayme's pragmatic approach a better way forward?
http://www.rwsbs.co.uk/floats/dorayme.htm

Opinions welcome.

I've learned more about CSS in this thread than I have for years, so
even if I do junk the 'tetris' approach I have new tools in my toolbox.
Thanks to all.
--

Phil, London

[tlvp]

On Fri, 9 Dec 2011 15:59:09 -0000, Philip Herlihy wrote:

> ...

> Some tuning needed, but this:
> http://www.rwsbs.co.uk/floats/tetris.htm
> ... could be a solution.

Do you wish that folks printing that page out get only
the restricted view of what the scrollable walk-boxes
happen to be showing on the screen at the moment of
printing?

That's what I'd be getting, if printing your page
in Safari v. 5.1 under Win Vista, at any rate.

To print the full content of a given walk-box, I'd have to
^A-select its content, ^C-copy it to clip-board, ^V-paste
it into a text editor, and finally ^P-print it from there.

Don'tcha wanna make it easier on your target audience :-) ?

Cheers, -- tlvp (w/ perhaps yet more to come)

[tlvp]

On Fri, 9 Dec 2011 15:59:09 -0000, Philip Herlihy wrote:

> ...

> Some tuning needed, but this:
> http://www.rwsbs.co.uk/floats/tetris.htm
> ... could be a solution.

A quick first response: at the width my browser just happened to
open with, I was struck by one (monstruous ?) incongruity, namely:

the introductory "There's a varied programme ..." paragraph (under
the heading "Join is in the celebratory year of 2012", and right
alongside the "Theydon Bois Stn." bulge of the walking map)
maintains a flush left edge up through the line

: 364522 or Judy Adams on 020 8418

after which it jogs over about two inches to the left, to tuck the
"0730" remainder of that telephone number -- along with the new line

: Walks free, donations welcome.

-- underneath the map bulge, alongside the map's <sc>ROBIN HOOD</sc>,
more or less.

Two quick fixes suggest themselves:

(1) treat the box that that introductory stuff comes in like any of the
individual-walk boxes; or, alternatively, simply
(2) replace the "space" characters within the telephone numbers
there offered by non-breaking-space "&nbsp;" characters instead
(that way, wherever the phone numbers put in an appearance, they'll
at least each occupy one same line, whereas at the width where Judy Adams'
020 8418 0730 breaks so exasperatingly, so does the Tricia Moxey number,
with 01277 at the end of one line, and 364522 at the start of the next).

That's all for now, at least. HTH. Cheers, -- tlvp

[Philip Herlihy]

In article <qotkm99ljuq6$.16wfiye2t0ajy$.d...@40tude.net>,
mPiOsUcB...@att.net says...

Great point - I'll make a note to create a print stylesheet.

Thanks!

--

Phil, London