using both style and class in an element

[Dan Langille]

Hi folks,

I found this in some pages:

<td style="border-bottom: 1px solid #000000; border-left: 1px solid
#000000; background-color:#4080A0;font-weight: bold; color: #000000;"
class="myclass">

I've never seen both style and class used in the same element. Is the
common? Which wins? What happens?

For what it's worth, the class myclass was not actually defined.
--
Dan Langille
resume: http://www.langille.org/

[David Dorward]

Dan Langille wrote:

I've never seen both style and class used in the same element. Is the
common?
No, thankfully. The style attribute is nasty.
Which wins? What happens?

The style attribute has a higher specificity then external style sheets.

--
David Dorward http://david.us-lot.org/
Redesign in progress: http://stone.thecoreworlds.net/
Microsoft announces IE is dead (so upgrade):
http://minutillo.com/steve/weblog/20...ces-ie-is-dead

[Richard Barnet]

"Dan Langille" <us******@YEAH.RIGHT.dvl-software.com.invalid> wrote in
message news:c5********************************@4ax.com...

Hi folks,

I found this in some pages:

<td style="border-bottom: 1px solid #000000; border-left: 1px solid
#000000; background-color:#4080A0;font-weight: bold; color: #000000;"
class="myclass">

I've never seen both style and class used in the same element. Is the
common? Which wins? What happens?

This is where the "cascade" rules come into play. IDs have more weight than
CLASSes, but locally-defined styles have more weight than linked
stylesheets, the last instance of style defined overrides a previous
instance, etc., etc.

-- Richard

[Headless]

David Dorward <do*****@yahoo.com> wrote:

I've never seen both style and class used in the same element. Is the
common?

Which wins? What happens?

The style attribute has a higher specificity then external style sheets.

Not necessarily, ID's in an external stylesheet have a higher
specificity than an inline style.
Headless

[David Dorward]

Headless wrote:

The style attribute has a higher specificity then external style sheets.

Not necessarily, ID's in an external stylesheet have a higher
specificity than an inline style.

Ah, I just did some looking in the spec.

Style attributes have the same specificity as ids, but are considered to be
defined later in the cascade order.

#foo { color: blue; }
<this id="foo" style="color: red;">

would be red BUT

this#foo { color: blue; }
<this id="foo" style="color: red;">

would be blue (as this#foo gets a score of 101, while style="" gets a score
of 100)

--
David Dorward http://david.us-lot.org/
Redesign in progress: http://stone.thecoreworlds.net/
Microsoft announces IE is dead (so upgrade):
http://minutillo.com/steve/weblog/20...ces-ie-is-dead

[Lasse Reichstein Nielsen]

David Dorward <do*****@yahoo.com> writes:

Style attributes have the same specificity as ids, but are considered to be
defined later in the cascade order.

In the original CSS 2 specification. However, it is changed in the CSS
2 errata, and therefore also in the the CSS2.1 working draft. In
these, inline styles have specificity 1,0,0,0 rather than 0,1,0,0 (as
#id).

I know Opera 7 is based on the CSS2.1 WD, and I think Mozilla is too.
IE 6 gives higher specificity to inline styles as well.

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'

[David Dorward]

Lasse Reichstein Nielsen wrote:

In the original CSS 2 specification. However, it is changed in the CSS
2 errata, and therefore also in the the CSS2.1 working draft. In
these, inline styles have specificity 1,0,0,0 rather than 0,1,0,0 (as
#id).

Insert stock "Why not update the spec at the main page instead of forcing
people to read errata!?" rant.
--
David Dorward http://david.us-lot.org/
Redesign in progress: http://stone.thecoreworlds.net/
Microsoft announces IE is dead (so upgrade):
http://minutillo.com/steve/weblog/20...ces-ie-is-dead

[Alan J. Flavell]

On Fri, Jul 11, David Dorward inscribed on the eternal scroll:

Insert stock "Why not update the spec at the main page instead of forcing
people to read errata!?" rant.

I'd say it's because the main page belongs to the authoritative
specification (TR), whereas the errata are a work in progress.

Note that the CSS2 TR version from 1998 still clearly states:

"This specification defines Cascading Style Sheets, level 2 (CSS2)."

and:

"The English version of this specification is the only normative
version. "

It does not say: "this specification _as amended by subsequent
errata_". I'd say there's a message in that.

[Stephen Poley]

On Thu, 10 Jul 2003 23:00:01 +0100, David Dorward <do*****@yahoo.com>
wrote:

Dan Langille wrote:

I've never seen both style and class used in the same element. Is the
common?

No, thankfully. The style attribute is nasty.

Why? Let's take a recent example I met: some photos of different sizes
to be floated at various places in the text, each photo with a caption.

I would do this by:
- placing photo and caption in a floated DIV;
- styling this by defining the float, padding, border, margin and text
properties in an external stylesheet;
- and setting the width of the floated box in a local style attribute,
as it will be different for every photo. (Or I might place a default
size in the stylesheet and override it locally when necessary.)

How would you do it?

--
Stephen Poley

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

[Stephen Poley]

On Sat, 12 Jul 2003 16:24:56 +0100, Headless <in*************@dna.ie>
wrote:

Stephen Poley <sb*****@xs4all.nl> wrote:

No, thankfully. The style attribute is nasty.
Why? Let's take a recent example I met: some photos of different sizes
to be floated at various places in the text, each photo with a caption.

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

--
Stephen Poley

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

[Headless]

Stephen Poley <sb*****@xs4all.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"?
Headless

[Stephen Poley]

On Mon, 14 Jul 2003 20:37:18 +0100, Headless <in*************@dna.ie>
wrote:

Stephen Poley <sb*****@xs4all.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"?

Because it doesn't do anything? :-P You're missing a class attribute.

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.

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

etc, etc, etc, plus the class attributes, which means one has to update
three different things when one adds a photo: 2 stylesheet definitions
and the markup.

--
Stephen Poley

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

[Chris Morris]

Stephen Poley <sb*****@xs4all.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

[Jacqui or (maybe) Pete]

In article <ti********************************@4ax.com>,
sb*****@xs4all.nl says...

On Mon, 14 Jul 2003 20:37:18 +0100, Headless <in*************@dna.ie>
wrote:

Stephen Poley <sb*****@xs4all.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.

[Stephen Poley]

On 15 Jul 2003 12:11:01 +0100, Chris Morris <c.********@durham.ac.uk>
wrote:

Stephen Poley <sb*****@xs4all.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/

[Headless]

Stephen Poley <sb*****@xs4all.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

[Chris Morris]

Stephen Poley <sb*****@xs4all.nl> writes:

On 15 Jul 2003 12:11:01 +0100, Chris Morris <c.********@durham.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

[Chris Morris]

Stephen Poley <sb*****@xs4all.nl> writes:

On 15 Jul 2003 14:07:42 +0100, Chris Morris <c.********@durham.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

[Stephen Poley]

On 16 Jul 2003 11:08:36 +0100, Chris Morris <c.********@durham.ac.uk>
wrote:

Stephen Poley <sb*****@xs4all.nl> writes:

On 15 Jul 2003 14:07:42 +0100, Chris Morris <c.********@durham.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/

[Chris Morris]

Lauri Raittila <la***@raittila.cjb.net> writes:

In article <87************@dinopsis.dur.ac.uk>, Chris Morris wrote:

Stephen Poley <sb*****@xs4all.nl> writes:

On 15 Jul 2003 14:07:42 +0100, Chris Morris <c.********@durham.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