how to do rows of images without tables?

[Roberto]

Hallo,
I'm building a page that wants to respect XHTML 1.0 strict and CSS2
specifics. In this page I have to present thumbnails arranged to cover the
entire width of the window, but there are problems that are easier to see
than to explain...
http://www.wildzone.it/stage/thumbs/...lleria=samburu
the CCS code is readable in a click. The document is correct in his xhtml
and css sintax, and the code has been completely cleared from other
contents.

This is my first attempt to do the layout of a site without making use of
tables, and I know that you are all expert in constructing pages using an
advanced CSS.
Since I'm trying to adjust the code for days, I wonder that that you are so
kind to take a look at it and suggest me something.
Thanks for any help

Roberto

[Evertjan.]

Roberto wrote on 09 mei 2005 in
comp.infosystems.www.authoring.stylesheets:

I'm building a page that wants to respect XHTML 1.0 strict and CSS2
specifics. In this page I have to present thumbnails arranged to cover
the entire width of the window, but there are problems that are easier
to see than to explain...
http://www.wildzone.it/stage/thumbs/...lleria=samburu
the CCS code is readable in a click. The document is correct in his
xhtml and css sintax, and the code has been completely cleared from
other contents.

This is my first attempt to do the layout of a site without making use
of tables, and I know that you are all expert in constructing pages
using an advanced CSS.
Since I'm trying to adjust the code for days, I wonder that that you
are so kind to take a look at it and suggest me something.
Thanks for any help

div.thumbBox {
width: 115px;
float: left;
margin: 15px;

height:80px;
overflow: hidden;
border:#ddd dotted 1px;
text-align:center;
}

[The border is just temporary to show the effect]

--
Evertjan.
The Netherlands.
(Replace all crosses with dots in my emailaddress)

[Lauri Raittila]

in comp.infosystems.www.authoring.stylesheets, Roberto wrote:

Hallo,
I'm building a page that wants to respect XHTML 1.0 strict
Then why are you using xhtml1.1 doctype?
http://www.wildzone.it/stage/thumbs/...lleria=samburu
[floated divs with width, variable height -> normal effect]
The document is correct in his xhtml and css s[y]ntax,

But it is not very good xhtml (empty title, wrongly used p element, empty
alt attributes)

KISS.
First, have the content.
Then, mark it up
Look.
Style.
If more markup is needed, add it.

Here, you have already overmarkupped your content, wrapping those images
to divs that has no other purpose. That is not needed for what you ask.

The problem is that when floating images that are different size, there
will be gaps, which are not too fun. I don't get why you are using
different height images, why not make them all same height?

I would use this CSS
img {margin:20px;}

and get rid of div elements (except the one containing them all)

If you do want columns (or captions) as well as rows (which you didn't
specify...), then you can
a) use different margins for different sized images
b) use those divs, and you need to make them same width and height
(add height:70px or whatever is height of biggest image to your css)
c) or use display:inline-block (not supported by FF, partially supported
by IE and Opera 7-8) and display:inline-table (Opera 5+)

IMHO, columns make no sence, so I never (again) use columns in image
gallery, unless they come naturally.

And forget XHTML, you are using it wrong way:
1) xhtml1.1 shouldn't be served with text/html
2) you put IE to quirks mode
3) just valid is not enough

Use HMTL4 strict. Especially if you did not understand the reasons.
(google for them, if you want to understand them.)

Also, you should send some cache information.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.
Support me, buy Opera:
https://secure.bmtmicro.com/opera/bu...tml?AID=882173

[Jan Roland Eriksson]

On Mon, 9 May 2005 23:33:29 +0200, "Roberto" <de*********@despammed.com>
wrote:

I'm building a page that wants to respect XHTML 1.0 strict...
Why? serves no purpose over HTML4.01
...and CSS2 specifics.
Well, except for the fact that CSS2.1 has not yet been formally approved
by the knight, it seems that good browsers in general are more in
adherence to that specification; that is if not CSS1 is fully sufficient
for what you want to suggest in the first place.
In this page I have to present thumbnails arranged to cover
the entire width of the window, but there are problems that
are easier to see than to explain...
Nah; the KISS principle will always work, have a look...

<http://www.fantasywoman.nu/terra/terra01.html>

[...]
This is my first attempt to do the layout of a site without
making use of tables...

Yes, lets say that you have definitely started on the right track but
you are "overdoing" things a bit :-)

Other posters in this thread have given more specific info on that part
so I don't need to repeat it.

--
Rex

[Roberto]

Thanks a lot, Evertian. It's ok now!

[Roberto]

Hi Lauri,

I'm building a page that wants to respect XHTML 1.0 strict
Then why are you using xhtml1.1 doctype?

I correct myself. A PHP script checks if the client supports XTHML 1.1 or
1.0 and sends a correct header and doctype.

$xml = stristr($_SERVER["HTTP_ACCEPT"],"application/xhtml+xml");
if($xml){
header("Content-Type: application/xhtml+xml; charset=ISO-8859-1");
print "<?xml version=\"1.0\" ?>\n";
print "<?xml-stylesheet href=\"common/style.css\"
type=\"text/css\"?>\n";
print '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">';
}
else {
header("Content-Type: text/html; charset=ISO-8859-1");
print '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">';
}

[...]

The document is correct in his xhtml and css s[y]ntax,

But it is not very good xhtml (empty title, wrongly used p element, empty
alt attributes)

The document is intended to be just an example of what happens in the
original page. So the title is not important here. The alt text is not
shown because I'm going to insert captions under the thumbs instead.
Can you say why the p element is wrongly used?
KISS.
First, have the content.
Then, mark it up
Look.
Style.
If more markup is needed, add it.
ok I'll remember in the future :-)
By the way, I have already prepared the contents and the layout. I have
written this
page just to test if the cause of the problem was the thumbs or something
else in
the original page, and also to show it to you without all the unnecessary
code and
contents.
Here, you have already overmarkupped your content, wrapping those images
to divs that has no other purpose. That is not needed for what you ask.
you are right, but I used the divs because they have to embed images and
captions together, that are not shown in the example.
The problem is that when floating images that are different size, there
will be gaps, which are not too fun. I don't get why you are using
different height images, why not make them all same height?
yes, you're right. I'll do that

[...]
And forget XHTML,
I'm using XHTML because I want to make practice with it (first time for me),
and becasue w3c recommends it. It's seems to me that only very old browsers
doesn't support it, so why not?
you are using it wrong way:
1) xhtml1.1 shouldn't be served with text/html
the document is served as text application/xhtml+xml if the client support
it, otherwise as text/html.
2) you put IE to quirks mode
Lauri, what is quirks mode?
3) just valid is not enough
that's true
Use HMTL4 strict. Especially if you did not understand the reasons.
(google for them, if you want to understand them.)

Also, you should send some cache information.

which cache information is needed?

thanks for answering me
Roberto

[Roberto]

Hi Jan,

I'm building a page that wants to respect XHTML 1.0 strict...

Why? serves no purpose over HTML4.01

I already replyed to Lauri about this point. Do you mean that it's still
better to use HTML 4.01 for compatibility reasons with all browsers?

...and CSS2 specifics.

Well, except for the fact that CSS2.1 has not yet been formally approved
by the knight, it seems that good browsers in general are more in
adherence to that specification; that is if not CSS1 is fully sufficient
for what you want to suggest in the first place.

Yes, CSS1 is not sufficient. My purpose is to use CSS 2.0 version. This is
approved, right?

thanks for answering, Jan

Roberto

[Roberto]

Hi Jan,

I'm building a page that wants to respect XHTML 1.0 strict...

Why? serves no purpose over HTML4.01

I already replyed to Lauri about this point. Do you mean that it's still
better to use HTML 4.01 for compatibility reasons with all browsers?

...and CSS2 specifics.

Well, except for the fact that CSS2.1 has not yet been formally approved
by the knight, it seems that good browsers in general are more in
adherence to that specification; that is if not CSS1 is fully sufficient
for what you want to suggest in the first place.

Yes, CSS1 is not sufficient. My purpose is to use CSS 2.0 version. This is
approved, right?

thanks for answering, Jan

Roberto

[Alan J. Flavell]

On Tue, 10 May 2005, Roberto wrote:

I already replyed to Lauri about this point. Do you mean that it's still
better to use HTML 4.01 for compatibility reasons with all browsers?

This isn't a write-only group, you know. You'd do better to read it
and get an idea of what's gone before, rather than asking to be
spoonfed the same answers that have been posted countless times.

[Christoph Päper]

*Roberto*:

$xml = stristr($_SERVER["HTTP_ACCEPT"],"application/xhtml+xml");
if($xml){

That's way too narrow-minded and violates the RFC (the number of which I
don't remember right now). What if the 'Accept' header gives a/x+x a
lesser priority than 'text/html'?
I've seen content negotiation done correctly in PHP, but it's more than
two lines---I suppose a little Web research will find you a good, free
script.

[Anthony Delorenzo]

>>I'm building a page that wants to respect XHTML 1.0 strict...

Why? serves no purpose over HTML4.01

Unless you want to parse the page with an XML parser, in
which case it definitely serves a purpose.

Regards,
Anthony

[Lauri Raittila]

in comp.infosystems.www.authoring.stylesheets, Roberto wrote:

Hi Lauri, The document is intended to be just an example of what happens in the
original page. So the title is not important here. The alt text is not
shown because I'm going to insert captions under the thumbs instead.
Can you say why the p element is wrongly used?
When there is no period or other punctuation, there usually is no
paragraph. Those2 links are not paragraph
ok I'll remember in the future :-)
Or just define what you want more detail what you want...

Here, you have already overmarkupped your content, wrapping those images
to divs that has no other purpose. That is not needed for what you ask.

you are right, but I used the divs because they have to embed images and
captions together, that are not shown in the example.

So example was bad. Would have been easier to answer without it. (As
answer is on line of code then...)

CSS for simple cases are simple. Make case more complex, and you need
more complex CSS. So don't oversimplify examples.
I'm using XHTML because I want to make practice with it (first time for me),
and becasue w3c recommends it.
Does W3C actually recommend it? Where?
It's seems to me that only very old browsers
doesn't support it, so why not?
Name one browser that supports it better than HTML4?
the document is served as text application/xhtml+xml if the client support
it, otherwise as text/html.
I used external http viewer, and somehow managed to get wrong
combination... Or maybe I just read it wrong...

Anyway, using multible versions that way is not good idea (breaks proxy-
cache - which you will regret if you will get slashdotted). If something
don't accept html4, or prefers something else, then give it what it
wants. And e.g. FF don't do incremental rendering for xhtml AFAIK, which
can be nasty with slow connection. Named entities not always work.
Javascript might not work.

2) you put IE to quirks mode

Lauri, what is quirks mode?

http://www.quirksmode.org/css/quirksmode.html
(not exactly hard to find using google)

Anyway, you don't seem to use XML prolog for 1.0, so it is no problem
which cache information is needed?

Something that when I go back to this page after 10 seconds, I don't need
to download it again.
http://www.mnot.net/cache_docs/
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.
Support me, buy Opera:
https://secure.bmtmicro.com/opera/bu...tml?AID=882173

[Roberto]

Hi Lauri,
first of all thank you for your answer and for giving me precious
indications and links where I can improve my knowledge of this topic.

[...]

Does W3C actually recommend it? Where?

http://www.w3.org/MarkUp/#xhtml1 and w3.org itself uses XHTML 1.0 strict
doctype

It's seems to me that only very old browsers
doesn't support it, so why not?

Name one browser that supports it better than HTML4?

of course HTML4 is better supported, but I don't think a new standard can
never replace an old one if nobody decides to start to use it.
In my personal opinion, the real problem is *when* is convenient to do a
transition. And since w3.org itself uses XHTML 1.0 Strict doctype, this time
has come?

[...]

> 2) you put IE to quirks mode

Lauri, what is quirks mode?

http://www.quirksmode.org/css/quirksmode.html
(not exactly hard to find using google)

Anyway, you don't seem to use XML prolog for 1.0, so it is no problem

this is the doctype that I use for IE and other browsers that doesn't accept
xml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

According to the page that you suggested http://hsivonen.iki.fi/doctype/
(thank you!) IE is not switched in quirks mode

Roberto

[Lauri Raittila]

in comp.infosystems.www.authoring.stylesheets, Roberto wrote:

Hi Lauri,
first of all thank you for your answer and for giving me precious
indications and links where I can improve my knowledge of this topic.

[...]

Does W3C actually recommend it? Where?
http://www.w3.org/MarkUp/#xhtml1

It doesn't say "We recommend everybody to use XHTML" there.
and w3.org itself uses XHTML 1.0 strict
doctype
Maybe. They do lots of sniffing to serve content...

Name one browser that supports it better than HTML4?

of course HTML4 is better supported, but I don't think a new standard can
never replace an old one if nobody decides to start to use it.

I don't see any reason why xhtml1.0 is better for general public than
HTML4. So I also fail to see why it would be good if everyone used it?
In my personal opinion, the real problem is *when* is convenient to do a
transition. And since w3.org itself uses XHTML 1.0 Strict doctype, this time
has come?

No. I would think that when large majority of web browsers support it.
(currently, IE6 e.g. don't support it, as you have noticed)
Currently, there is no browser that only supports XHTML1.0 served as
text/html, and there is no browser that would support XHTML better than
HTML4.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.
Support me, buy Opera:
https://secure.bmtmicro.com/opera/bu...tml?AID=882173

[Roberto]

Dear Lauri, this discussion is forcing me to read the documentation that I
certainly needed to understand better the question. That's good for me :-)

[...]

I don't see any reason why xhtml1.0 is better for general public than
HTML4. So I also fail to see why it would be good if everyone used it?
I think that a general diffusion of XHTML would be better for authors as
for public, considering that when most of browsers will be able to parse xml
the errors will be caught before the publication, forcing authors to
observe the standard. This would be a general benefit, public included.

This is the reason why I'm deciding to use it, and perhaps one of the
reasons
why w3c is encouraging its use, even if (it wouldn't be convenient) XHTML1
do not obsolete HTML4.01. Btw I agree with you that the final results that
can
be achieved with XHTML are quite the same that HTML ones.

In my personal opinion, the real problem is *when* is convenient to do a
transition. And since w3.org itself uses XHTML 1.0 Strict doctype, this
time
has come?

No. I would think that when large majority of web browsers support it.
(currently, IE6 e.g. don't support it, as you have noticed)

According to the page you have suggested http://hsivonen.iki.fi/doctype/ IE6
is put in "Almost Standard" mode either when XHTML1.0 is served as text/html
without an XML declaration and when using HTML4.01

Currently, there is no browser that only supports XHTML1.0 served as
text/html, and there is no browser that would support XHTML better than
HTML4.

Even if many user agents doesn't support XHTML1.0, W3C's RFC2854 <<defines a
profile of use of XHTML which is compatible with HTML 4.01 and
which may also be labeled as text/html>> (read also
http://www.w3.org/TR/xhtml-media-typ...tml#text-html).

In addition, <<"HTML Compatibility Guidelines" summarizes design guidelines
for authors who wish their XHTML documents to render on existing HTML user
agents. The use of 'text/html' for XHTML SHOULD be limited for the purpose
of rendering on existing HTML user agents, and SHOULD be limited to [XHTML1]
documents which follow the HTML Compatibility Guidelines.>>

So, if authors follow this profile of using XHTML1.0, take care of avoid all
known issues that rise when serving XHTML as text/html, validate their pages
instead of testing them against 2 or 3 browsers, I think that this can be
accepted.

[Spartanicus]

"Roberto" <de*********@despammed.com> wrote:

Dear Lauri
Please configure your client to insert a proper attribute line.
I think that a general diffusion of XHTML would be better for authors as
for public, considering that when most of browsers will be able to parse xml
the errors will be caught before the publication, forcing authors to
observe the standard. This would be a general benefit, public included.

XHTML myths examined: http://www.spartanicus.utvinternet.ie/no-xhtml.htm

--
Spartanicus

[Alan J. Flavell]

On Tue, 10 May 2005, Anthony Delorenzo wrote:

I'm building a page that wants to respect XHTML 1.0 strict...
Why? serves no purpose over HTML4.01

Unless you want to parse the page with an XML parser,

The WWW isn't really interested in what *you* want to do, but in what
the end users want to do. The vast majority of those have browsers
that were designed to parse HTML4, and which can only cope with XHTML
by relying on a (widespread) bug in their HTML handling. emacs-w3 had
to be deliberately broken to reproduce this bug, since it originally
parsed HTML correctly (and thus got XHTML wrong).
which case it definitely serves a purpose.

You're perfectly at liberty to use XHTML for your internal working if
you want to. The point that's being made here is about what you are
going to serve out to the WWW.

[Lauri Raittila]

in comp.infosystems.www.authoring.stylesheets, Roberto wrote:

Dear Lauri, this discussion is forcing me to read the documentation that I
certainly needed to understand better the question. That's good for me :-)

[...]

I don't see any reason why xhtml1.0 is better for general public than
HTML4. So I also fail to see why it would be good if everyone used it?
I think that a general diffusion of XHTML would be better for authors as
for public, considering that when most of browsers will be able to parse xml
the errors will be caught before the publication, forcing authors to
observe the standard. This would be a general benefit, public included.

That was idea, but it didn't work. Most XHTML is invalid and not
wellformed. See
http://www.hixie.ch/advocacy/xhtml

No. I would think that when large majority of web browsers support it.
(currently, IE6 e.g. don't support it, as you have noticed)

According to the page you have suggested http://hsivonen.iki.fi/doctype/ IE6
is put in "Almost Standard" mode either when XHTML1.0 is served as text/html
without an XML declaration and when using HTML4.01
But IE6 Don't support XHTML. It supports HTML4, and it has bugs that
makes it show XHTML as if it was HTML, when you do XHTML like described
in appendix C. Make your XHTML with some nice XML tool, and you are in
problems.
Even if many user agents doesn't support XHTML1.0, W3C's RFC2854 <<defines a
profile of use of XHTML which is compatible with HTML 4.01 and
which may also be labeled as text/html>> (read also
http://www.w3.org/TR/xhtml-media-typ...tml#text-html).
Sure XHTML is compatible with HTML4. After all, it *is* HTML4 with
different syntax. If you serve it in text/html it will be treted as it
was HTML4. And that profile is no way guarantee that HTML4 browser gets
things like intented - in fact browsers existed that did support HTML4
enough to fail with XHTML.
So, if authors follow this profile of using XHTML1.0, take care of avoid all
known issues that rise when serving XHTML as text/html, validate their pages
instead of testing them against 2 or 3 browsers, I think that this can be
accepted.

Well, it is far from trivial to avoid all known issues.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.
Support me, buy Opera:
https://secure.bmtmicro.com/opera/bu...tml?AID=882173

[Roberto]

Hi Spartanicus,
thank you for your contribution to the discussion (I'm learning a lot of
things).
I read your examination and navigated your site, which among the other
things gave me ideas on how to render an image gallery with captions.

You say that "Serving XHTML Strict 1.0 as text/html kicks IE and some
versions of Opera into quirks mode if you add the xml declaration on top of
your documents as W3C recommends". I found discrepancies with this article
http://hsivonen.iki.fi/doctype/, which says that IE and Opera 7.0 has an
"almost standard mode" that is kicked by XHTML 1.0 Strict doctype *without*
an XML declaration, the same mode in which they works using HTML4.01 strict.

[Roberto]

Hi Lauiri,

[...]

I think that a general diffusion of XHTML would be better for authors as
for public, considering that when most of browsers will be able to parse
xml
the errors will be caught before the publication, forcing authors to
observe the standard. This would be a general benefit, public included.

That was idea, but it didn't work. Most XHTML is invalid and not
wellformed. See
http://www.hixie.ch/advocacy/xhtml

the author of this article just says that the use of XHML1 is harmful for
non-advanced authors, which don't validate their documents, don't take care
to bypass all the issues that he mention, and send code not compatible with
Tag Soap user agents. I hope not to be in this category, or I would like to
approach XTML techniques respecting the w3c compatibility guidelines.

[Spartanicus]

"Roberto" <de*********@despammed.com> wrote:

I'm learning a lot of things.
Sadly configuring your news reader to include the customary attribute
line isn't amongst them.
You say that "Serving XHTML Strict 1.0 as text/html kicks IE and some
versions of Opera into quirks mode if you add the xml declaration on top of
your documents as W3C recommends". I found discrepancies with this article
http://hsivonen.iki.fi/doctype/, which says that IE and Opera 7.0 has an
"almost standard mode"

IE has only 2 modes:
http://msdn.microsoft.com/library/en...cements_topic2

Opera's documentation states that it too has only 2 modes:
http://www.opera.com/docs/specs/doctype/

IE and some older versions of Opera are kicked into Quirks mode when an
xml declaration is added on top of a document.

--
Spartanicus