I will return to tables

[=?ISO-8859-1?Q?Fran=E7ois_de_Dardel?=]

http://dardel.info/Eau.html

What I wanted to achieve was not really complicated: essentially a left
hand column with a 75% width, and a right hand column containing
occasional right-flush picts, plus some stuff filling the whole horiz
space.

I developed that very nicely, it was exactly what I wanted under Safari
or Firefox (Mac), but when I opened it under MSIE it was all over the
place, none of the widths was OK, and the Mac and PC versions were also
different.

What you will see if you click the above is something that is more or
less acceptable in all browsers I have tested, but none is exactly what
I aimed at, and I had to resort to some hack about widths so it renders
acceptably under IE as well as the more compliant browsers.

If anybody has a way to make it better, I'd be immensely grateful.
However, I am seriously considering to return to the table layouts that
I used a few years ago. There are less surprises to expect.

--
François de Dardel
http://dardel.info/
Faber est suae quisque fortunae
Enlever le quatorze pour m'écrire
Remove fourteen in the address to send mail

[Nik Coughlin]

François de Dardel wrote:

http://dardel.info/Eau.html

What I wanted to achieve was not really complicated: essentially a
left hand column with a 75% width, and a right hand column containing
occasional right-flush picts, plus some stuff filling the whole horiz
space.

I developed that very nicely, it was exactly what I wanted under
Safari or Firefox (Mac), but when I opened it under MSIE it was all
over the place, none of the widths was OK, and the Mac and PC
versions were also different.

What you will see if you click the above is something that is more or
less acceptable in all browsers I have tested, but none is exactly
what I aimed at, and I had to resort to some hack about widths so it
renders acceptably under IE as well as the more compliant browsers.

If anybody has a way to make it better, I'd be immensely grateful.
However, I am seriously considering to return to the table layouts
that I used a few years ago. There are less surprises to expect.

You can use display: table, display: table-row and display: table-cell to
make Html elements behave like a table. Unfortunately IE doesn't support
this part of the Css standard, but you can hack around it with conditional
comments. See:

http://nrkn.com/displayTable/

[Spartanicus]

"Nik Coughlin" <nr******@gmail.comwrote:

>However, I am seriously considering to return to the table layouts
that I used a few years ago. There are less surprises to expect.

You can use display: table, display: table-row and display: table-cell to
make Html elements behave like a table.

CSS tables used to create a layout grid share all of the nasty drawbacks
of HTML tables used to create a layout grid minus the false semantics
(arguably the least important problem).

--
Spartanicus

[=?ISO-8859-1?Q?Fran=E7ois_de_Dardel?=]

On 2007-02-05 23:36:23 +0100, "Nik Coughlin" <nr******@gmail.comsaid:

François de Dardel wrote:

>http://dardel.info/Eau.html

What I wanted to achieve was not really complicated: essentially a
left hand column with a 75% width, and a right hand column containing
occasional right-flush picts, plus some stuff filling the whole horiz
space.

You can use display: table, display: table-row and display: table-cell
to make Html elements behave like a table. Unfortunately IE doesn't
support this part of the Css standard, but you can hack around it with
conditional comments. See:

http://nrkn.com/displayTable/

Thanks but if there were no IE life would be easier. I precisely would
like to avoid conditional comments. I found a hack that helps with
widths, I would prefer to avoid a hack. If I wanted to do tables I
would do HTML tables, not mimic their behaviour with CSS.

I have put a version of this page with borders so it is more obvious:
http://dardel.info/test.html

--
François de Dardel
http://dardel.info/
Faber est suae quisque fortunae
Enlever le quatorze pour m'écrire
Remove fourteen in the address to send mail

[Nik Coughlin]

Spartanicus wrote:

"Nik Coughlin" <nr******@gmail.comwrote:

>>However, I am seriously considering to return to the table layouts
that I used a few years ago. There are less surprises to expect.

You can use display: table, display: table-row and display:
table-cell to make Html elements behave like a table.

CSS tables used to create a layout grid share all of the nasty
drawbacks of HTML tables used to create a layout grid minus the false
semantics (arguably the least important problem).

Would you happen to have any links to resources that explain this in more
detail? Sounds like something I should look into. I don't use display:
table generally, so I've not come across this before.

[Nik Coughlin]

François de Dardel wrote:

On 2007-02-05 23:36:23 +0100, "Nik Coughlin" <nr******@gmail.com>
said:

>François de Dardel wrote:

>>http://dardel.info/Eau.html

What I wanted to achieve was not really complicated: essentially a
left hand column with a 75% width, and a right hand column
containing occasional right-flush picts, plus some stuff filling
the whole horiz space.

You can use display: table, display: table-row and display:
table-cell to make Html elements behave like a table. Unfortunately
IE doesn't support this part of the Css standard, but you can hack
around it with conditional comments. See:

http://nrkn.com/displayTable/

Thanks but if there were no IE life would be easier. I precisely would
like to avoid conditional comments. I found a hack that helps with
widths, I would prefer to avoid a hack. If I wanted to do tables I
would do HTML tables, not mimic their behaviour with CSS.

I have put a version of this page with borders so it is more obvious:
http://dardel.info/test.html

Sorry, I wasn't looking at the bigger picture. Your real problem is that
you're trying to enforce 75% width on the left, in order to leave room for
images on the right, when sometimes 25% of the screen won't be enough for
your widest image (250px).

Instead you should let go of the 75% idea, float the images to the right and
then leave a margin on the left content that's slightly bigger than the
widest image. Example:

http://nrkn.com/floatWidths/

[Spartanicus]

"Nik Coughlin" <nr******@gmail.comwrote:

>CSS tables used to create a layout grid share all of the nasty
drawbacks of HTML tables used to create a layout grid minus the false
semantics (arguably the least important problem).

Would you happen to have any links to resources that explain this in more
detail? Sounds like something I should look into. I don't use display:
table generally, so I've not come across this before.

The issues with table layouts (HTML and CSS) that affect most people:
http://groups.google.com/group/comp....4398e2dac1f5cd

Very few people might experience loss of functionality due to the false
semantics resulting from the use of a HTML table for layout purposes.
Only when a AT speaking browser reads a document in a mode where it
announces table elements can the false semantics cause a (minor)
problem. The use of HTML tables for layout is prevalent on the web, so
its no surprise that no AT speaking browser announces table elements by
default. Table reading mode needs to be activated by the user on a per
case basis.

--
Spartanicus

[Jukka K. Korpela]

Scripsit Nik Coughlin:

You can use display: table, display: table-row and display:
table-cell to make Html elements behave like a table. Unfortunately
IE doesn't support this part of the Css standard, but you can hack
around it with conditional comments.

The trick that you illustrate on your page is to use "conditional comments"
(comments of a special format recognized as directives by IE) to throw in
pieces of HTML markup for a table. I wonder how that is supposed to help
with formatting without tables, which was the original intent, if I am not
mistaken. If you are willing to use table markup, why don't you simply use
it the normal way? Much simpler.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

[Andy Dingley]

On 5 Feb, 22:36, "Nik Coughlin" <[e-mail]:

Unfortunately IE doesn't support
this part of the Css standard, but you can hack around it with conditional
comments. See:

Very clever. If that's ever the answer, I don't want to know what the
question is.

[Andy Dingley]

On 5 Feb, 21:05, François de Dardel <[e-mail]:

If anybody has a way to make it better, I'd be immensely grateful.

So you have a layout that works, but IE is broken. This is typical
behaviour for the web.

To start fixing it, do the following.

* Use valid HTML
* Use HTML 4.01 Strict, so as to switch IE into standards rendering,
not quirks
* Avoid 1990's <tablemarkup, pixel-based dimensions, mixes of HTML
3.2 attributes and CSS

If you do all three of these, then you've solved almost every IE
inconsistency. The few remaining ones can generally be ignored as
trivial or avoided by not using particular features. For a very few of
them (IMHO there's only one, that of default font size) then use IE
conditional comments in the CSS.

Don't use "hacks" to work around IE's errors (IMHO). They're unstable
with future versions of IE and people who use IE should learn to
accept that it's broken, we shouldn't pander to them.

However, I am seriously considering to return to the table layouts that
I used a few years ago. There are less surprises to expect.

"I can't make CSS work, therefore <tablemust be better and you
people are all fools for telling me otherwise"
Enjoy.

[=?ISO-8859-1?Q?Fran=E7ois_de_Dardel?=]

On 2007-02-06 16:45:15 +0100, "Jukka K. Korpela" <jk******@cs.tut.fisaid:

Scripsit Nik Coughlin:

>You can use display: table, display: table-row and display:
table-cell to make Html elements behave like a table. Unfortunately
IE doesn't support this part of the Css standard, but you can hack
around it with conditional comments.

The trick that you illustrate on your page is to use "conditional
comments" (comments of a special format recognized as directives by IE)
to throw in pieces of HTML markup for a table. I wonder how that is
supposed to help with formatting without tables, which was the original
intent, if I am not mistaken. If you are willing to use table markup,
why don't you simply use it the normal way? Much simpler.

Thanks Jukka. Your comments are soothing: I tried to manage everything
with DIVs, but in view of what I want to achieve, and the mess that is
resulting in different versions of different browsers, tables are
indeed simpler. It's just that I was brainwashed with the motto "tables
are evil"...

I will start again with tables. Thanks to everybody.

--
François de Dardel
http://dardel.info/
Faber est suae quisque fortunae
Enlever le quatorze pour m'écrire
Remove fourteen in the address to send mail

[=?ISO-8859-1?Q?Fran=E7ois_de_Dardel?=]

On 2007-02-06 17:37:03 +0100, "Andy Dingley" <di*****@codesmiths.comsaid:

On 5 Feb, 21:05, François de Dardel <[e-mail]:

>If anybody has a way to make it better, I'd be immensely grateful.

So you have a layout that works, but IE is broken. This is typical
behaviour for the web.

To start fixing it, do the following.

* Use valid HTML

The page passed the W3 validation test except for the "embed midi" bit
that I know is not valid, but works as I want it to work.

* Use HTML 4.01 Strict, so as to switch IE into standards rendering,
not quirks

Just tested that: it does not help the IE rendering.

* Avoid 1990's <tablemarkup, pixel-based dimensions, mixes of HTML
3.2 attributes and CSS

I have no pixel based dimensions except for some small padding or margins.

>However, I am seriously considering to return to the table layouts that
I used a few years ago. There are less surprises to expect.

"I can't make CSS work, therefore <tablemust be better and you
people are all fools for telling me otherwise"
Enjoy.

I don't think I was arrogant in my initial query. I would love you guys
to tell me the way to obtain resonably similar results in say IE (Mac),
IE (PC) and Safari. It seems that using the basic CSS tools this can't
be achieved. There are quite a lot of pages that tell you to do this or
that trick to "workaround" the problems. Frankly, I prefer to keep
things simple. I am accepting gratefully every useful piece of advice
here, and I have learnt a lot from this forum and from c.i.w.a.

Will still have to try Nik Coughlin's recommendation before turning to
tables...

Thanks again

--
François de Dardel
http://dardel.info/
Faber est suae quisque fortunae
Enlever le quatorze pour m'écrire
Remove fourteen in the address to send mail

[Jukka K. Korpela]

Scripsit François de Dardel:

I tried to manage
everything with DIVs, but in view of what I want to achieve, and the
mess that is resulting in different versions of different browsers,
tables are indeed simpler.

I'm not convinced of the necessity to move away from DIVs and pure CSS
layout, but I can understand your feelings. In practice, using _simple_
layout tables - such as a two-cell table to create a simple two-column
appearance, or something a little more complicated - is virtually harmless.

Troubles emerge if you start settings widths in pixels, but you can do that
with CSS just as well, and many people do. Besides, when you use a table,
the cell widths are suggested minimum widths, by definition and by browser
practice, so you get something more flexible than with CSS. (In CSS, you can
set minimum-width, but IE 6 doesn't support it.)

So I think it's quite feasible to set up the basic layout grid using a
simple table but then use CSS to style it, including widths, heights,
backgrounds etc.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

[=?ISO-8859-1?Q?Fran=E7ois_de_Dardel?=]

On 2007-02-06 19:21:21 +0100, "Jukka K. Korpela" <jk******@cs.tut.fisaid:

Scripsit François de Dardel:

>I tried to manage
everything with DIVs, but in view of what I want to achieve, and the
mess that is resulting in different versions of different browsers,
tables are indeed simpler.

I'm not convinced of the necessity to move away from DIVs and pure CSS
layout, but I can understand your feelings. In practice, using _simple_
layout tables - such as a two-cell table to create a simple two-column
appearance
So I think it's quite feasible to set up the basic layout grid using a
simple table but then use CSS to style it, including widths, heights,
backgrounds etc.

Yes, this is also my basic thinking.
However in the present case the idea given by Nik Goughlin seems to
work well, is simpler than my initial design and does not require
tables. The mess I have created yesterday was apparently related to
trying to fix DIV widths in percent.

Thanks to both of you
--
François de Dardel
http://dardel.info/
Faber est suae quisque fortunae
Enlever le quatorze pour m'écrire
Remove fourteen in the address to send mail

[Nik Coughlin]

Andy Dingley wrote:

* Avoid 1990's <tablemarkup, pixel-based dimensions,

Pixel-based dimensions are entirely appropriate when allocating space for
images.

[zzpat]

I'm trying to catch up on CSS and I could use a little help.

Can someone explain the following;

content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
..compact>p
{
margin-right: 1ex;
margin-bottom: 0;
padding: 0;
}
I understand everything except "."; and compact>p

What does .compact>p and content: "." mean? And why isn't contact:
written as .content?

Specifically, and "."

Also, the following;
#testelem1 div+div{clear: right}
#testelem1 *:first-child{direction:rtl}
#testelem1 *:last-child{direction:rtl}

What does div+div do?

And #testelem1 *:first-child{direction:rtl}

Specifically,
*: and
{direction:rtl}

Pat

[Rik]

zzpat <zz*******@gmail.comwrote:

I'm trying to catch up on CSS and I could use a little help.

Can someone explain the following;

content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
.compact>p
{
margin-right: 1ex;
margin-bottom: 0;
padding: 0;
}
I understand everything except ".";

Well, simplified:

content: '.';
Sets the content of an element you did not mention to '.'.

and compact>p

p if _direct_ child of compact, not just a descendant.

Also, the following;
#testelem1 div+div{clear: right}

a div directly after a div (adjacent) in element with id 'testelem1'
clears all floats to the right of it.

#testelem1 *:first-child{direction:rtl}

Every first child (first element) of every element in element with id
'testelem1' has the text direction from right to left (usually this is for
languages that are indeed read (and written) right to left, this
implementation seems just silly...)

#testelem1 *:last-child{direction:rtl}

Every last child (last element) of every element in element with id
'testelem1' etc...

--
Rik Wasmus

[zzpat]

Rik wrote:

>.compact>p
{
margin-right: 1ex;
margin-bottom: 0;
padding: 0;
}

>
p if _direct_ child of compact, not just a descendant.

Thanks. Can you give me an example of how the above would be used?

[zzpat]

Rik wrote:

>

>#testelem1 *:first-child{direction:rtl}

Every first child (first element) of every element in element with id
'testelem1' has the text direction from right to left (usually this is
for languages that are indeed read (and written) right to left, this
implementation seems just silly...)

If text were scrolling from right to left wouldn't this be useful or am
I missing it completely?

[Rik]

zzpat <zz*******@gmail.comwrote:

Rik wrote:

>>

>>#testelem1 *:first-child{direction:rtl}

Every first child (first element) of every element in element with id
'testelem1' has the text direction from right to left (usually this is
for languages that are indeed read (and written) right to left, this
implementation seems just silly...)

If text were scrolling from right to left wouldn't this be useful or am
I missing it completely?

No, not scrolling.

.tfel ot thgir nettirw segaugnal rof s'tI

For instance, often the bullets of ordered lists will appear on the right
hand side instead of the left, align will default to right etc.
--
Rik Wasmus

[Rik]

zzpat <zz*******@gmail.comwrote:

Rik wrote:

>>.compact>p
{
margin-right: 1ex;
margin-bottom: 0;
padding: 0;
}

> p if _direct_ child of compact, not just a descendant.

Thanks. Can you give me an example of how the above would be used?

..compact p { color:green;}

<div class="compact">
<pthis is green text</p>
<div>
<p>This isn't.</p>
</div>
</div>

A usefull purpose is for instance to avoid compound margins and/or padding
where you don't want it. Not supported by MSIE 6 I thought.
--
Rik Wasmus

[zzpat]

Rik wrote:

zzpat <zz*******@gmail.comwrote:

>Rik wrote:

>>>.compact>p
{
margin-right: 1ex;
margin-bottom: 0;
padding: 0;
}

>> p if _direct_ child of compact, not just a descendant.

Thanks. Can you give me an example of how the above would be used?

.compact p { color:green;}

<div class="compact">
<pthis is green text</p>
<div>
<p>This isn't.</p>
</div>
</div>

A usefull purpose is for instance to avoid compound margins and/or
padding where you don't want it. Not supported by MSIE 6 I thought.
--Rik Wasmus

Interesting!

It doesn't work in IE 6. I'll have to toy around with this one before I
get it.
..compact p { color:green;}
span {color : red}

<div style="color : purple">
<p>purple??</p>
<div class="compact">
<div>one more time</div>
<pthis is green text</p>
<p>test</p>
<span>red text</span>
<div>
<p>This isn't green or red??</p>
</div>
</div>
</div>

....got it! I think.

Thanks.

[Sherm Pendley]

François de Dardel <da*******@noos.frwrites:

I don't think I was arrogant in my initial query. I would love you
guys to tell me the way to obtain resonably similar results in say IE
(Mac), IE (PC) and Safari.

Well, for one thing, forget about IE/Mac. It's hopelessly outdated and no
longer supported or updated by MS. The Mac world is focused on Safari and
FireFox.

sherm--

--
Web Hosting by West Virginians, for West Virginians: http://wv-www.net
Cocoa programming in Perl: http://camelbones.sourceforge.net

[David Stone]

In article <m2************@Sherm-Pendleys-Computer.local>,
Sherm Pendley <sp******@dot-app.orgwrote:

François de Dardel <da*******@noos.frwrites:

I don't think I was arrogant in my initial query. I would love you
guys to tell me the way to obtain resonably similar results in say IE
(Mac), IE (PC) and Safari.

Well, for one thing, forget about IE/Mac. It's hopelessly outdated and no
longer supported or updated by MS. The Mac world is focused on Safari and
FireFox.

I'll second that. About the only reason to still be using IE/Mac is
if you have old hardware that will only run MacOS 9 or earlier. Even
then, there are better alternatives to IE that will run on those
systems.

[Dr J R Stockton]

In comp.infosystems.www.authoring.stylesheets message
<eq**********@aioe.org>, Wed, 7 Feb 2007 09:57:47, Nik Coughlin
<nr******@gmail.composted:

>Andy Dingley wrote:

>* Avoid 1990's <tablemarkup, pixel-based dimensions,

Pixel-based dimensions are entirely appropriate when allocating space for
images.

At most, only at present.

Where an image is an encoded bit-map, pixel-based dimensions are
generally appropriate. However, a small picture can be scaled up by an
integer factor without degradation, and it would be possible to arrange
that if the size was given in font units then the picture would be
scaled up accordingly, by the nearest integer. An obviously appropriate
application would be where the picture is actually a picture of text
such as an equation and the user needs ordinary text to be, say, 30pt
where most of us can manage 10pt.

If an image can be transmitted in vector encoding, or in a diagram-
drawing language, it's appropriate to dimension it in font units - the
author can determine that the width of the diagram needs to be so many
ems of the reader's preferred font size.

In my current work, the diagrams are readily determined by javascript
calculations; I just need the elementary graph-plotting primitives for
circle, line, positioned text, and position-plotting symbols.

--
(c) John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v6.05 IE 6
news:comp.lang.javascript FAQ <URL:http://www.jibbering.com/faq/index.html>.
<URL:http://www.merlyn.demon.co.uk/js-index.htmjscr maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/TP/BP/Delphi/jscr/&c, FAQ items, links.