Curious style

[Patrick Smith]

Hi All,

I found this in a page I was looking at and am wondering what does the
slash in the second width do? Is this valid css? This technique was used
in several places in the style sheet.
Another example is: font: 78%/1.5 arial, helvetica, serif;

Patrick

#nav a {
display: block;
width: 10em;
w\idth: 6em; <------ That
color: #7C6240;
text-decoration: none;
padding: 0.25em 2em;
}
--
Patrick A. Smith Assistant System Administrator
Ocean Circulation Group – USF - College of Marine Science
http://ocgweb.marine.usf.edu Phone: [phone]

The trouble with doing something right the first time is that nobody
appreciates how difficult it was. - La Rochefoucauld

[Steve Pugh]

Patrick Smith <ps****@marine.usf.eduwrote:

>I found this in a page I was looking at and am wondering what does the
slash in the second width do? Is this valid css? This technique was used
in several places in the style sheet.

#nav a {
display: block;
width: 10em;
w\idth: 6em; <------ That
padding: 0.25em 2em;
}

IE5 doesn't understand CSS character escaping so it doesn't realise
that w\idth is the same as width.

Hence IE5 with its broken box model sees width: 10em; padding: 0.25em
2em; where the 2em is placed inside the 10em.
Other browsers see width: 6em; padding: 0.25em 2em; where the 2em is
correctly placed outside the 6em.
So both browsers display the same.

>Another example is: font: 78%/1.5 arial, helvetica, serif;

In the fort shorthand you can use either font-size or
font-size/line-height.

Steve
--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net <http://steve.pugh.net/>

[Jukka K. Korpela]

Scripsit Patrick Smith:

I found this in a page I was looking at and am wondering what does the
slash in the second width do?

The idea with
width: 10em;
w\idth: 6em;
is that faulty browsers that apply a wrong box model (read: old IE versions
and newer IE versions in "quirks" mode) are supposed to fail to understand
the latter, leaving the former in force. Conforming browsers process both,
treating \i as identical with i.

It's one of the many hacks to deal with faulty browsers. Hacks often fire
back as browsers change. Why shouldn't faulty browsers be allowed to display
a page poorly? That's part of their being faulty, after all. The situation
was different when IE 5 was common, but how long are we going to serve it?

Is this valid css?

The snippet you posted is "valid" - syntactically correct - CSS, except for
for added text "<------ That". You can use
http://jigsaw.w3.org/css-validator/#validate-by-input
to check such things out quickly.

Another example is: font: 78%/1.5 arial, helvetica, serif;

What about it? Any CSS reference tells you what it means. It is more or less
clueless, though, since it probably sets the overall font size to 78% of the
value selected by the user and the line-height to an excessively large value
(1.3 is OK for Arial). It also has arial and helvetica in a wrong order - if
both are available, Helvetica probably looks better than its Microsoft
clone, Arial. The final bogosity is making serif the fallback after listing
down two sans-serif fonts.

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

[dorayme]

In article <es*********@news1.usf.edu>,
Patrick Smith <ps****@marine.usf.eduwrote:

Hi All,

I found this in a page I was looking at and am wondering what does the
slash in the second width do? Is this valid css? This technique was used
in several places in the style sheet.
Another example is: font: 78%/1.5 arial, helvetica, serif;

Patrick

#nav a {
display: block;
width: 10em;
w\idth: 6em; <------ That
color: #7C6240;
text-decoration: none;
padding: 0.25em 2em;
}

It is a way of talking to some browsers like some IE (which
recognise escape characters) and not others (which ignore the ill
understood construction). So, in above, the good Firefox will use
10em and ignore the attempt to overide in the next width
specification. IE will read and note both, using the last 6em as
it overrides the 10em.

--
dorayme

[Martin Clark]

dorayme wrote...

Patrick Smith <ps****@marine.usf.eduwrote:

>#nav a {
display: block;
width: 10em;
w\idth: 6em; <------ That
color: #7C6240;
text-decoration: none;
padding: 0.25em 2em;
}

It is a way of talking to some browsers like some IE (which
recognise escape characters) and not others (which ignore the ill
understood construction). So, in above, the good Firefox will use
10em and ignore the attempt to overide in the next width
specification. IE will read and note both, using the last 6em as
it overrides the 10em.

Isn't that the opposite of what Steve and Jukka have just said?
I'm confused!
--
Martin Clark

[dorayme]

In article <bF**************@getta.life>,
Martin Clark <ma****@spl.atwrote:

dorayme wrote...

Patrick Smith <ps****@marine.usf.eduwrote:

#nav a {
display: block;
width: 10em;
w\idth: 6em; <------ That
color: #7C6240;
text-decoration: none;
padding: 0.25em 2em;
}

It is a way of talking to some browsers like some IE (which
recognise escape characters) and not others (which ignore the ill
understood construction). So, in above, the good Firefox will use
10em and ignore the attempt to overide in the next width
specification. IE will read and note both, using the last 6em as
it overrides the 10em.

Isn't that the opposite of what Steve and Jukka have just said?
I'm confused!

Don't be, if in doubt, rule of thumb, believe them.

I recall reading once that IE in non quirks mode will read and
follow w\idth.

Anyway, you better research the details. Was just meaning to let
you know generally what it was about as you seemed totally
puzzled.

Take a look at

<http://css-discuss.incutio.com/?page=BoxModelHack>

(As it happens, whenever I feel the need to use these things, I
look it all up to get it roughly right. But I try to avoid
designs that depend on such things. I don't know if you want to
know this!)

--
dorayme

[Martin Clark]

dorayme wrote...

>In article <bF**************@getta.life>,
Martin Clark <ma****@spl.atwrote:

>

Isn't that the opposite of what Steve and Jukka have just said?
I'm confused!

Don't be, if in doubt, rule of thumb, believe them.

But I believe you, too! I am in awe of extra-terrestrial usenet beings!

>I recall reading once that IE in non quirks mode will read and
follow w\idth.

Anyway, you better research the details. Was just meaning to let
you know generally what it was about as you seemed totally
puzzled.

Not me, mate. My reply was my first post in this thread. I don't say
very much in these groups. I am more of a compulsive lurker. Are
Martians able to detect the thoughts of usenet lurkers, perhaps?

>Take a look at

<http://css-discuss.incutio.com/?page=BoxModelHack>

(As it happens, whenever I feel the need to use these things, I
look it all up to get it roughly right. But I try to avoid
designs that depend on such things. I don't know if you want to
know this!)

Yes, I am aware of the box model stuff and, like you, try to avoid
designs where this would be critical. I can't help thinking that hacks
are all very well, but that they are not very future-proof. I understand
that there are a number of IE hacks that do not work with IE7. I did not
pay attention to which ones these were, as I don't use them.
--
Martin Clark

[Jukka K. Korpela]

Scripsit dorayme:

I recall reading once that IE in non quirks mode will read and
follow w\idth.

It seems that IE 6 and IE 7 read and follow it in either mode, so you cannot
really simulate IE 5 just by making them work in quirks mode. In quirks
mode, you get the wrong box model but you still have correct parsing that
reads w\idth as width.

This means that in order to test that the hack is of any use in some
particular situation, you would need a real IE 5 along with a newer version.

http://css-discuss.incutio.com/?page=BoxModelHack

Looks a bit dusty. Most of those contrived hacks would best be forgotten,
since they struggle with fairly old browser versions and involve (largely
unpredictable) risks with _new_ versions. Anyone who still uses IE 5 should
be prepared to see pages more or less poorly formatted, in an increasing
amount. Maybe they should install the favelet that turns CSS off entirely.
:-)

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

[dorayme]

In article <aE**************@getta.life>,
Martin Clark <ma****@spl.atwrote:

Anyway, you better research the details. Was just meaning to let
you know generally what it was about as you seemed totally
puzzled.

Not me, mate. My reply was my first post in this thread. I don't say
very much in these groups.

OK, sorry, but you get the drift...

[btw, be shy no longer, speak up Martin! I will defend you
against all vicious attacks, they are sending me a bodyguard
contingent because of my many earthling enemies and they (my
minders) always lean towards the hysterical overkill and there
will be many to spare for you. It will be like a whole army
division (remember Saddam's Republican Guard anyone?) <g>

--
dorayme