Webmaster Forum / HTML, CSS, Scripts / CSS / May 2007

<br style="clear: both"> for <br clear="all"> is an interesting one.
Clear is only supposed to apply to block-level elements. The value of
display for <br> is not specified in Appendix D of CSS 2.1, which makes
it the default, inline, which is also what I would expect. So
technically, setting the clear property on <br> ought to be ignored,
just as it would be if you set it on <span> or <em>. But most browsers
I've tried allow it, as an alternative to using the clear attribute.

I suppose you could have <div style="clear: both"></div>. Content after
the clearing div will start a new anonymous block nested inside the one
you were in. That is mostly equivalent but there are I think ambiguities
here when it comes to containing blocks.

In this example,

<div style="height: 400px">Hello
   <div style="clear: both"></div>
   world
   <div style="height: 50%; width: 20px; background-color: blue"></div>
</div>

should the 50% mean anything? It depends what is the containing block
for the second div: the outer div, which has a fixed height or the
auto-height anonymous block that begins before "world"? If the latter,
the 50% should be ignored.

In this case however:

<div style="height: 400px">Hello
   <br clear="all">
   world
   <div style="height: 50%; width: 20px; background-color: blue"></div>
</div>

the 50% should definitely work out as 200px since there is no ambiguity
about which block is the containing block for the second div. The <br>
is just an inline element which causes a line break and there are no
anonymous blocks.

So arguably browsers should treat these two examples differently. If
they should, then there is no CSS equivalent to <br clear="all">.

A quibble is that you say "border-spacing: npx" for each cell. But you
set border-spacing on the table, not on the cells, and it is really a
property of the table.

Nice, Jukka, thanks. I hadn't realized there wasn't something like this
around already. I guess there's probably something on about.com or
similar, but that'd be rather "non-authoritative," wouldn't it?

Well, it could stand a bit of a textual introduction at the top, even if
it's only a tip to see the Legend [linked] below.

I gather this is your description of things which should work
equivalently, without much regard for browser bugs or lack of support in
one or the other UA. You might want to make clearer what level(s) of CSS
you are listing. From your first note it seems you've just grabbed
equivalents out of the CSS cupboard, without mentioning whether it came
out of the 2.1 drawer or the 3.0 drawer.

Is there some universal definition for terms like fontlist and htmlsize,
or are we just supposed to know what you mean (I _do_, but I'm also
compulsive enough to check for the explanation or link, and I don't see
one)?

For some reason, when I try to print the page in FF, the first printed
page ends after the first rox of table content (element
align="bottom">). The second page starts with <element align="center">,
and all of the other pages print full of content. I don't see why, and
my other browsers don't seem to have this problem, so I guess it's just
a bug in my installation here.

Corrigenda:

1) Search for
<span class="x">foo</b> and you would additionally write .x {
font-weight: bold;

Change the /b to /span.
Add a closing brace }.

2) Search for
subscripting may change the meaning of and expression.

Remove the d from "and".

3) Search for
functional rather than presentation.

Possibly change to "presentational".

Thanks for sharing, Jukka.

the basefont link is broken
you have "bf" in id of heading but "basefont" in anchor's href.

<br><element>    element:before { content: "\A"; white-space: pre; }

^^ appears twice

This is not HTML to CSS-
<dir>content</dir>   ->>           <ul>content</ul>
<menu>content</menu>   ->>  <ul>content</ul>

Why the size link on this line :
<nobr>content</nobr> ->>  <span style="white-space: nowrap">content</
span> (size)

Why not white-space:pre ??  :
<pre>content</pre>  ->>  <div style="white-space: nowrap">content</
div>

suggestion-

put these in one line
<s>content</s> ->  <span style="text-decoration: line-
through">content</span>
<strike>content</strike> ->  <span style="text-decoration: line-
through">content</span>

group some elements like:
<b>,<i>,<u>,<s>
e.g.
<b>content</b> -> <span style="font-weight: bold">content</span>
<i>content</i> ->  <span style="font-style: italic">content</span>

the basefont link is broken
you have "bf" in id but "#basefont" in anchor's href

Are you joining the Friends of DIV Layout, Jukka?
This is disappointing. One should avoid the meaningless SPAN and DIV
as far as possible. We can discuss whether to write <I> or <EM>
in a given situation. But SPAN with a style is worse! It's not
even necessary for HTML 4 Strict since <B> and <I> are in Strict.

Please remove
b, bdo, big, blockquote, br, col, i, small, sub, sup
and possibly  U  from your list! You can *additionally* style
these elements but I can see no advantage in replacing them
by meaningless SPAN.

A word on BDO:
BDO markup is mostly *not* presentational. See the examples at
http://www.unics.uni-hannover.de/nhtcapri/bidirectional-text.html#bdo

On the other hand, <H1> from
http://www.unics.uni-hannover.de/nhtcapri/bidirectional-text.html
is clearly presentational. So we should distinguish between
BDO markup and unicode-bidi style.