Browser Specific CSS

[Icarus]

Hi all,

I need to use one class for IE and another class for all other
browsers. Is this possible in the same style sheet?

Here is the class for IE:
input {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
height: 14px;
width: 88px;
color: 6F5F30;
padding-left: 2px;
background-color: #CAB886;
top: auto;
border-top: 1px solid #6F5F30;
border-right: 1px solid #6F5F30;
border-bottom: 1px solid #6F5F30;
border-left: 1px solid #6F5F30;
}

And here is the class for all others:
input {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
width: 88px;
color: 6F5F30;
padding-left: 2px;
background-color: #CAB886;
top: auto;
border-top: 1px solid #6F5F30;
border-right: 1px solid #6F5F30;
border-bottom: 1px solid #6F5F30;
border-left: 1px solid #6F5F30;
}

Basically I don't want browsers like Firebird, Mozilla, Netscape to
see the height attribute.

TIA.

[Brian]

Icarus wrote:

I need to use one class for IE and another class for all other
browsers. Is this possible in the same style sheet?

Here is the class for IE:
input {
font-family: Verdana, Arial, Helvetica, sans-serif;
Mistake to use verdana, for reasons already discussed here numerous
times.[1]

font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
Mistake to specify font size in pixels, for reasons already discussed
here numerous times.[1] (Pity the poor IE/Win user who then cannot
resize the text, no matter how small it is on his monitor.)

font-size: 1em;
height: 14px;
width: 88px;
Mistake to specify size in pixles if the box will contain text, for
reasons already discussed here numerous times.[1] (What if a Mozilla
users overrides your font-size choice? The contents will no longer fit
in the box.)

height: 8em; /* use appropriate value */
width: 30em; /* use appropriate value */
Basically I don't want browsers like Firebird, Mozilla, Netscape to
see the height attribute.

Use a child selector with neither spaces nor punctuation separating
the two parts in rule, as below:
/* this rule is for all browsers */
input {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
height: 8em; /* use appropriate value */
width: 30em; /* use appropriate value */
color: 6F5F30;
padding-left: 2px;
background-color: #CAB886;
top: auto;
border-top: 1px solid #6F5F30;
border-right: 1px solid #6F5F30;
border-bottom: 1px solid #6F5F30;
border-left: 1px solid #6F5F30;
}

/* IE/Win will not see this rule due to child selector */
div>input {
height: auto; /* override specified font */
}

[1] Google for relevant discussions
http://groups.google.com/groups?grou...ng.stylesheets

--
Brian
follow the directions in my address to email me

[Alan J. Flavell]

On Wed, 7 Jan 2004, Brian wrote:

Mistake to use verdana, for reasons already discussed here numerous
times.[1]

I'd recommend http://www.xs4all.nl/~sbpoley/webmatters/verdana.html as
a fine summary of the issues and an actual demonstration.

[Ian Fitchet]

Brian <us*****@julietremblay.com.invalid-remove-this-part> writes:

height: 8em; /* use appropriate value */
width: 30em; /* use appropriate value */

Brought up a long time ago on (La)TeX, I thought you were meant to
use font based metrics where em was the *height* of a capital `M' and
ex was the *width* of a lowercase `x.'

Whilst there's nothing to stop them being used arbitrarily, you were
supposed to use them to describe the corresponding dimensions,
verticals in ems and horizontals in exs:

height: 8em;
width: 76ex;

I imagine there was some hijinks to handle inter-line/character
spacing, etc..

Just curious.

Cheers,

Ian

[PeterMcC]

Ian Fitchet wrote:

Brian <us*****@julietremblay.com.invalid-remove-this-part> writes:

height: 8em; /* use appropriate value */
width: 30em; /* use appropriate value */

Brought up a long time ago on (La)TeX, I thought you were meant to
use font based metrics where em was the *height* of a capital `M' and
ex was the *width* of a lowercase `x.'

As it was a long time ago, I think your memory may be at fault :)

In (La)TeX, as in CSS, an em is the width of the letter M and ex is the
height of the letter x in the current font.

--
PeterMcC
If you feel that any of the above is incorrect,
inappropriate or offensive in any way,
please ignore it and accept my apologies.

[Ian Fitchet]

"PeterMcC" <pe***@mccourt.org.uk> writes:

As it was a long time ago, I think your memory may be at fault :)

In (La)TeX, as in CSS, an em is the width of the letter M and ex is the
height of the letter x in the current font.

Ah, of course, ...[thinks quickly]... you've spotted my deliberate
typo to catch out copyright infringers... :-)

That still leaves the question, shouldn't font based sizing
statements say, ahem:

width: 40em;
height: 10ex;

I'm assuming it won't be too long before condensed fonts appear for
the web (don't tell me, they're already here) and fun things happen.

Cheers,

Ian

[Harlan Messinger]

"Ian Fitchet" <id*@lunanbay.LESS-SPAM.com> wrote in message
news:x7***************@redhat-9.home.lunanbay.com...

Brian <us*****@julietremblay.com.invalid-remove-this-part> writes:

height: 8em; /* use appropriate value */
width: 30em; /* use appropriate value */

Brought up a long time ago on (La)TeX, I thought you were meant to
use font based metrics where em was the *height* of a capital `M' and
ex was the *width* of a lowercase `x.'

Whilst there's nothing to stop them being used arbitrarily, you were
supposed to use them to describe the corresponding dimensions,
verticals in ems and horizontals in exs:

You have the basic concepts behind these two measures reversed. Even without
getting to what the measurement of an "em" is, consider that an *em dash* is
a dash whose width is 1 em, so clearly there is no principle that ems are
restricted to measurement of height. In fact, an "em" is the width *or* the
height of a square piece of type (typically the width of an upper-case "M"),
so by definition there isn't generally a difference between the two.

An ex refers to the *ex-height* of a typeface, typically the height of the
lower-case letters not having ascenders or descenders--such as the
lower-case "x".

[Christoph Paeper]

*PeterMcC*:

In (La)TeX, as in CSS, an em is the width of the letter M and ex is the
height of the letter x in the current font.

I don't know about TeX, but in CSS an 'em' is not based on any letter, but
the font-size. In most current browsers an 'ex' simply equals 0.5em, but
actually it should be---as in Gecko---the relevant font's x-height.
<http://www.w3.org/TR/CSS2/syndata.html#length-units>:

The x-height is so called because it is often equal to the height
of the lowercase "x". However, an 'ex' is defined even for fonts
that don't contain an "x".

--
"A wise man gets more use from his enemies than a fool from his friends."
Baltasar Gracian

[PeterMcC]

Christoph Paeper wrote:

*PeterMcC*:

In (La)TeX, as in CSS, an em is the width of the letter M and ex is
the height of the letter x in the current font.

I don't know about TeX, but in CSS an 'em' is not based on any
letter, but the font-size. In most current browsers an 'ex' simply
equals 0.5em, but actually it should be---as in Gecko---the relevant
font's x-height.
<http://www.w3.org/TR/CSS2/syndata.html#length-units>:

The x-height is so called because it is often equal to the height
of the lowercase "x". However, an 'ex' is defined even for fonts
that don't contain an "x".

There's a danger of a circular definition of font size and ems developing -
the cited w3.org page says: an em is "the font-size of the relevant font".
The letter M is used in establishing the font size and, since the em is
based on the font size, the em's size is relative to the M.

Time, and the divergence between print and web technologies, have
complicated the issue but the definitions of ems and x-heights are based on
the M and x - it's just got a little clouded. There are significant
differences, however, between the measurement of fonts in print and on the
web.

For more info:
ems http://css.nu/articles/typograph1-en.html#Ch23
x-height http://css.nu/articles/typograph1-en.html#Ch24

--
PeterMcC
If you feel that any of the above is incorrect,
inappropriate or offensive in any way,
please ignore it and accept my apologies.

[Jukka K. Korpela]

"PeterMcC" <pe***@mccourt.org.uk> wrote:

There's a danger of a circular definition of font size and ems
developing
It's already circular, intentionally.
- the cited w3.org page says: an em is "the font-size of
the relevant font".
Indeed. And the font size is _roughly_ the distance between the bottom
of the lowest descender up to the top of the highest ascender. But it
may actually be somewhat larger.
The letter M is used in establishing the font
size and, since the em is based on the font size, the em's size is
relative to the M.
No, not at all. The font size is surely larger than the height of M,
and the width of M has no defined relationship to the font size.
Time, and the divergence between print and web technologies, have
complicated the issue
Actually, changed it completely.
but the definitions of ems and x-heights are
based on the M and x
No, they are not. They don't even postulate the existence of those
letters.
For more info:
ems http://css.nu/articles/typograph1-en.html#Ch23
x-height http://css.nu/articles/typograph1-en.html#Ch24

Actually, that page contains a very good treatise on the topic, and
presents facts that are quite contrary to what you wrote. Don't confuse
historical background with current definitions and practices.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

[Christoph Paeper]

*PeterMcC*:

<http://www.w3.org/TR/CSS2/syndata.html#length-units>:
There's a danger of a circular definition of font size and ems developing -
the cited w3.org page says: an em is "the font-size of the relevant font".

Yes it's the definition of the CSS unit 'em', which may slightly differ from
definitions for 'em's used elsewhere, but is the only one relevant here.
The letter M is used in establishing the font size
Not in CSS and neither in computer font formats, because they must also work
without such a glyph ("M") included.
Time, and the divergence between print and web technologies, have
complicated the issue

If you want to understand the details, yes (and throw in "quad").
However, for the normal CSS author it's enough to know, that 1em is defined
to be the height of the font.

--
The English language is the result of Norman soldiers
trying to set up dates with Saxon barmaids.
---
A polar bear is a rectangular bear after a coordinate transform.

[PeterMcC]

Jukka K. Korpela wrote:

"PeterMcC" <pe***@mccourt.org.uk> wrote:

There's a danger of a circular definition of font size and ems
developing
It's already circular, intentionally.

<snip> Actually, that page contains a very good treatise on the topic, and
presents facts that are quite contrary to what you wrote. Don't
confuse historical background with current definitions and practices.

Sound advice and I don't - but my brevity may have done so for the reader.
Thank you for your clarification.

--
PeterMcC
If you feel that any of the above is incorrect,
inappropriate or offensive in any way,
please ignore it and accept my apologies.

[PeterMcC]

Christoph Paeper wrote:
<snip>

However, for the normal CSS author it's enough to know, that 1em is
defined to be the height of the font.

That seems to sum it up quite tidily.

--
PeterMcC
If you feel that any of the above is incorrect,
inappropriate or offensive in any way,
please ignore it and accept my apologies.

[Ian Fitchet]

"PeterMcC" <pe***@mccourt.org.uk> writes:

Christoph Paeper wrote:
<snip>

However, for the normal CSS author it's enough to know, that 1em is
defined to be the height of the font.

That seems to sum it up quite tidily.

OK, in CSS an em is defined as the font height (bottom of descender
to top of diacritical) and ex, from the articles Peter listed and
general usage here, seems well on its way to being deprecated.

I seem to recall (La)TeX favouring the idea that there should be a
limit to the width of a body of text, in particular 76ex, such that
the eye had some hope of finding the next line as it scanned back.
Cue references to newspaper column widths etc..

The modern web seems to disdain setting a width for text elements
commonly leaving browser-wide columns of text to be managed by the
reader.

From the article:

Adjustment of line height is one of several methods to balance
the black -- white impression of a piece of text, with the final
target of making the text easy to read and understand. A
properly set line height will also help the human eye to find a
clear "return path" to the beginning of the next line of
text. Over time some recommendations on proper line heights has
been defined for use together with various font heights and
widths of text on printed media. For presentation on low
resolution media like a VDU, it may be a good idea to increase
the line height with approximately. 0.1em over what's
recommended for printed text.

I tried this paragraph with an approximate browser width of 184
characters and it was OK to read which was quite surprising as it was
quite a wide field of view.

What's the group's take on setting widths on text blocks?

Cheers,

Ian

[Darin McGrew]

Ian Fitchet <id*@lunanbay.LESS-SPAM.com> wrote:

I seem to recall (La)TeX favouring the idea that there should be a
limit to the width of a body of text, in particular 76ex, such that
the eye had some hope of finding the next line as it scanned back.
Cue references to newspaper column widths etc..

The modern web seems to disdain setting a width for text elements
commonly leaving browser-wide columns of text to be managed by the
reader.

Fixing the width of a paragraph causes usability problems when the browser
window is narrower than the specified width.

But you can specify a max-width value to limit line lengths without
imposing horizontal scrolling on those with narrower browser windows. And
if you specify max-width in em (or ex) units, the result will be roughly
proportional to the user's font size.

Too bad MSIE (a popular browser-like OS component) doesn't support the
max-width property.
--
Darin McGrew, mc****@stanfordalumni.org, http://www.rahul.net/mcgrew/
Web Design Group, da***@htmlhelp.com, http://www.HTMLHelp.com/

"You learn nothing new the third time a mule kicks you in the head."

[Lauri Raittila]

In article Ian Fitchet wrote:

"PeterMcC" <pe***@mccourt.org.uk> writes:

Christoph Paeper wrote:
<snip>

However, for the normal CSS author it's enough to know, that 1em is
defined to be the height of the font.
That seems to sum it up quite tidily.

I seem to recall (La)TeX favouring the idea that there should be a
limit to the width of a body of text, in particular 76ex, such that
the eye had some hope of finding the next line as it scanned back.
Cue references to newspaper column widths etc..

In CSS,
p {max-width:76ex}

But there is people that don't like this. Still using that on my site as
I believe it is useful to most people, and it is possible to override if
needed. Biggest problem with it is that IE don't support it though.

Newspapers often use even smaller widths, as they have ability to cut
words to halves. That way they can use smaller line-height and get more
text on one page. But in WWW pages canvas is free, so it is not sensible
to put text too tight.
The modern web seems to disdain setting a width for text elements
commonly leaving browser-wide columns of text to be managed by the
reader.
Something like that.

[snipped]
What's the group's take on setting widths on text blocks?

Widths, never. max-widths are OK. The width property has unfortunate
effects when window is smaller than width. For example if user tries to
position dictionary software beside webpage, or another webpage or
whatever else.

I use on my site
max-width:80ex
and line height between 1.3 and 1.6 on pages with lots of text sometimes.

I use on my client
max-width:60ex and line-height 1.2
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Feel free to contact me by email if your message OT, or private, etc.
but do not CC same message to as you send to usenet.

[Nick Theodorakis]

On Wed, 07 Jan 2004 23:39:34 +0000, Ian Fitchet
<id*@lunanbay.LESS-SPAM.com> wrote:

Brian <us*****@julietremblay.com.invalid-remove-this-part> writes:

height: 8em; /* use appropriate value */
width: 30em; /* use appropriate value */

Brought up a long time ago on (La)TeX, I thought you were meant to
use font based metrics where em was the *height* of a capital `M' and
ex was the *width* of a lowercase `x.'

I'm not sure how LaTeX uses them but in CSS an "em" is defined as the
font-size of the current font (from the lowest descender to the
highest ascender or diacritical mark). An "ex" is meant to be the
x-height of the current font (although I have read that in practice
most browsers just consider an ex to be half an em, which makes it
less useful).

The CSS spec. defines them here:
<http://www.w3.org/TR/REC-CSS2/syndata.html#length-units>

But you may find this page to be more useful:
<http://css.nu/articles/typograph1-en.html>

Nick
PS: BTW, anybody heard from JRE? Who's maintaining CSS Pointers Group
website these days?
--
Nick Theodorakis
ni**************@hotmail.com
nicholas_theodorakis [at] urmc [dot] rochester [dot] edu