Re: using both style and class in an element

Stephen Poley <sbpoley (AT) xs4all (DOT) nl> writes:

Or alternatively:

.x250, .x270, .x278 { float:right; margin: 0 0 1em 1em; text-align:
center; border: thin solid black; }
.x250 { width: 250px; }
.x270 { width: 270px; }
.x278 { width: 278px; }

The other alternative, provided you don't mind losing browser support
for the stylesheets a bit earlier than normal, is:

<tag class="photo x250">

photo { float: right; ... }
..x250 { width: 250px; }

I don't see it as particularly useful in this case.

--
Chris

In article <tin7hv0j3cp8h7b229rrlb0p6vn0fsh9s6 (AT) 4ax (DOT) com>,
sbpoley (AT) xs4all (DOT) nl says...

On Mon, 14 Jul 2003 20:37:18 +0100, Headless <invalid_address (AT) dna (DOT) ie
wrote:

Stephen Poley <sbpoley (AT) xs4all (DOT) nl> wrote:

I used to do the same thing, I've moved those widths to an external
stylesheet because if an image has a caption wider than the image so
that it wraps, I prefer it not to wrap when my external stylesheets are
not used (UA not capable of retrieving my external stylesheets, or
disabled by the user).

With the consequence that every photo needs its own style in the
external stylesheet. Doesn't seem like an attractive option to me.

.x250{width:250px}

in an external stylesheet, or

style="width:250px"

in the markup.

Why would the first option be "unattractive"?

....
No, it's unattractive because one ends up with something like

....
Or alternatively:

.x250, .x270, .x278 { float:right; margin: 0 0 1em 1em; text-align:
center; border: thin solid black; }
.x250 { width: 250px; }
.x270 { width: 270px; }
.x278 { width: 278px; }

Or alternatively:

#pix img {float:right; margin: 0 0 1em 1em; text-align:
center; border: thin solid black; }

..x250 { width: 250px; }
..x270 { width: 270px; }
..x278 { width: 278px; }

Which isn't so bad.

On 15 Jul 2003 12:11:01 +0100, Chris Morris <c.i.morris (AT) durham (DOT) ac.uk>
wrote:

Stephen Poley <sbpoley (AT) xs4all (DOT) nl> writes:
Or alternatively:

.x250, .x270, .x278 { float:right; margin: 0 0 1em 1em; text-align:
center; border: thin solid black; }
.x250 { width: 250px; }
.x270 { width: 270px; }
.x278 { width: 278px; }

The other alternative, provided you don't mind losing browser support
for the stylesheets a bit earlier than normal, is:

tag class="photo x250"

photo { float: right; ... }
.x250 { width: 250px; }

I don't see it as particularly useful in this case.

I was under the impression that this lost you an awful lot of browser
support, but I could be wrong. Which browsers support this?

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

Stephen Poley <sbpoley (AT) xs4all (DOT) nl> wrote:

No, it's unattractive because one ends up with something like

.x250 { float:right; margin: 0 0 1em 1em; text-align: center; border:
thin solid black; width: 250px; }
.x270 { float:right; margin: 0 0 1em 1em; text-align: center; border:
thin solid black; width: 270px; }
.x278 { float:right; margin: 0 0 1em 1em; text-align: center; border:
thin solid black; width: 278px; }

etc, etc, etc. Plus the accompanying class attributes.

img.left{clear:left;float:left;margin:0 1em 1em 0}
..x250{width:250px}

<img class="left x250" alt="">


Headless

Stephen Poley <sbpoley (AT) xs4all (DOT) nl> writes:

On 15 Jul 2003 12:11:01 +0100, Chris Morris <c.i.morris (AT) durham (DOT) ac.uk
tag class="photo x250"

I was under the impression that this lost you an awful lot of browser
support, but I could be wrong. Which browsers support this?

Correctly in Mozilla, Netscape 6+, IE 6(win), IE5 (mac), Opera 5+,
Konqueror 3.

Loses both styles in Netscape 4 (which might well be the least of your
problems with that browser)

Not tested in IE 5, but from memory I think it works okay.

So it seems *fairly* safe nowadays.

--
Chris

Stephen Poley <sbpoley (AT) xs4all (DOT) nl> writes:

On 15 Jul 2003 14:07:42 +0100, Chris Morris <c.i.morris (AT) durham (DOT) ac.uk
tag class="photo x250"
Not tested in IE 5, but from memory I think it works okay.

Can anyone confirm that one? I thought that IE 6 was the first IE
version that supported this (on Windows) but it may be my memory that is
faulty.

Right, tested it now, it works fine in IE5 Win. I'll have to start
using this more often myself, I think.

--
Chris

On 16 Jul 2003 11:08:36 +0100, Chris Morris <c.i.morris (AT) durham (DOT) ac.uk>
wrote:

Stephen Poley <sbpoley (AT) xs4all (DOT) nl> writes:
On 15 Jul 2003 14:07:42 +0100, Chris Morris <c.i.morris (AT) durham (DOT) ac.uk

tag class="photo x250"

Not tested in IE 5, but from memory I think it works okay.

Can anyone confirm that one? I thought that IE 6 was the first IE
version that supported this (on Windows) but it may be my memory that is
faulty.

Right, tested it now, it works fine in IE5 Win. I'll have to start
using this more often myself, I think.

Thanks. I might well do the same.

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

Lauri Raittila <lauri (AT) raittila (DOT) cjb.net> writes:

In article <87znjeokbf.fsf (AT) dinopsis (DOT) dur.ac.uk>, Chris Morris wrote:
Stephen Poley <sbpoley (AT) xs4all (DOT) nl> writes:
On 15 Jul 2003 14:07:42 +0100, Chris Morris <c.i.morris (AT) durham (DOT) ac.uk
tag class="photo x250"

Does anyone know what happends in IE4? I mean, do I need to hide stuff
from it?

http://www.xs4all.nl/~ppk/css2tests/intro.html

Lists a few more browsers, including IE4 Mac (which doesn't). Not IE4
Win, though.

According to http://www.richinstyle.com/bugs/ie4.html IE4 for windows
only applies the *last* class in the set. Depending on what the
multiple classes are, this may not be too big a problem. Presumably
<tag class="x250 photo"> would be better to use.

Interestingly http://www.richinstyle.com/bugs/ie5.html#multipleclass
thinks IE5 does the same, but it worked when I tested it... Anyone
else got IE5 Win to do a test with?

--
Chris