Stylesheets - how to do rows of images without tables?

Author

how to do rows of images without tables?

Roberto

2005-05-09, 7:23 pm

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...alleria=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.

2005-05-09, 7:23 pm

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...alleria=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

2005-05-09, 7:23 pm

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...alleria=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/b...html?AID=882173

Jan Roland Eriksson

2005-05-09, 11:17 pm

On Mon, 9 May 2005 23:33:29 +0200, "Roberto" <deltacephei@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

2005-05-10, 7:34 pm

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

Roberto

2005-05-10, 7:34 pm

Hi Lauri,

>
> 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">';
}

[...]
>
> 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

2005-05-10, 7:34 pm

Hi Jan,

>
> 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?

>
> 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

2005-05-10, 7:34 pm

Alan J. Flavell

2005-05-10, 7:34 pm

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

2005-05-10, 7:34 pm

*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

2005-05-10, 7:34 pm

>>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

2005-05-10, 7:34 pm

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...

>
> 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.

>
> 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/b...html?AID=882173

Evertjan.

2005-05-11, 8:42 am

Lauri Raittila

2005-05-11, 8:42 am

Jan Roland Eriksson

2005-05-11, 8:42 am

Roberto

2005-05-11, 8:42 am

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

>
> 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?

[...]
>
> 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

2005-05-11, 8:42 am

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.
>
> [...]
>
> 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...

>
> 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/b...html?AID=882173

Roberto

2005-05-11, 7:29 pm

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.

>
> 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-ty....html#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

2005-05-11, 7:29 pm

"Roberto" <deltacephei@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

2005-05-11, 7:29 pm

On Tue, 10 May 2005, Anthony Delorenzo wrote:

>
> 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

2005-05-11, 7:29 pm

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 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

[color=darkred]
> 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-ty....html#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/b...html?AID=882173

Roberto

2005-05-11, 7:29 pm

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

2005-05-11, 7:29 pm

Hi Lauiri,

[...]
>
> 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

2005-05-11, 7:29 pm

"Roberto" <deltacephei@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/e...ncements_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

Roberto

2005-05-14, 4:20 am

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

Roberto

2005-05-14, 4:20 am

Anthony Delorenzo

2005-05-14, 7:47 am

Lauri Raittila

2005-05-14, 7:47 am