How to display a box in "em" units?

[axlq]

I'm trying to figure out how to display a box that has a width in
"em" units. So far no luck. Below is some HTML that displays two
rows of 30 'm' characters in lowercase and uppercase, followed by
a 30em-wide table and a 30em-wide div block. I'm using HTML 4.01
Transitional doctype.

=============== =============== ==
<p>lines of 30 M:<br>
MMMMMMMMMMMMMMM MMMMMMMMMMMMMMM <br>
mmmmmmmmmmmmmmm mmmmmmmmmmmmmmm <br>
<table width="30em" border=1 cellspacing=0 cellpadding=0>
<tr><td>30em wide table</td></tr>
</table>
<div style="border: 1px solid black; width=30em; min-width=30em; float: left;">
30em wide rectangle
</div>
=============== =============== ==

The resulting table appears to be 30 pixels instead of 30em. It's
very narrow.

The div block is only as wide as the containing text. It's
certainly not 30 M characters wide.

What am I doing wrong? The example above works the same in IE and
Opera.

Also, which M width is used by the "em" units? Uppercase or
lowercase? These widths are different for larger font sizes.

-A

[Chris Morris]

ax**@spamcop.ne t (axlq) writes:

I'm using HTML 4.01 Transitional doctype.
Why not strict?
<table width="30em" border=1 cellspacing=0 cellpadding=0>
<table style="width: 30em" border=1 ...
Also, which M width is used by the "em" units? Uppercase or
lowercase? These widths are different for larger font sizes.

Neither - it's the width of the "em quad".

--
Chris

[axlq]

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

ax**@spamcop.n et (axlq) writes:

I'm using HTML 4.01 Transitional doctype.

Why not strict?

Does it matter? Does the behavior of "em" units change between
transitional and strict?

-A

[Jim Moe]

axlq wrote:

I'm using HTML 4.01 Transitional doctype.

Why not strict?

Does it matter? Does the behavior of "em" units change between
transitional and strict?

Yes.
No.

Transitional, as you might surmise from the term, was meant to allow a
gradual transition from pre-v4 HTML to v4. Implied in the name is
transition, temporary, for a little while, short time, placeholder, a
breather space. It was never intended for common, ongoing usage.
A more cogent reason for Strict is that browser rendering is more
uniform and predictable, especially IE.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[Eric B. Bednarz]

Jim Moe <jm************ ***@sohnen-moe.com> writes:

A more cogent reason for Strict is that browser rendering is more
uniform and predictable, especially IE.

Pardon, 'especially IE'?

I suppose you actually mean doctype sniffing by 'strict'.

* IE < 6 doesn't do doctpe sniffing. Double your efforts.
* IE 6 in 'standards-compliant mode' does have lots of bugs that IE 6 (and
lower) otherwise does not sport. Quadripple you efforts.
* Client side or any inbetween proxy software can unexpectedly -- and
legally -- wave good-bye to 'standards-compliant mode', and you'll
never know; say hello to voodoo-programming.
* The MSDN excuse for documentation clearly states that
'standards-compliant mode' is *not* predictable.
--
||| hexadecimal EBB
o-o decimal 3771
--oOo--( )--oOo-- octal 7273
205 goodbye binary 111010111011

[Tim]

ax**@spamcop.ne t (axlq):

Also, which M width is used by the "em" units? Uppercase or lowercase?
These widths are different for larger font sizes.

Chris Morris: Neither - it's the width of the "em quad".

The *size* used for it. It also has height, and it's not necessarily
square.

For those not wanting to look up the em quad, broadly speaking it's the
space used for printing the capital M, including the spacing that goes
around it. Much the same as when you printed using blocks (individual
letters on a block), in ye olde printing machines, it refers to the entire
size of the block, not just the size of the letter on it.

--
If you insist on e-mailing me, use the reply-to address (it's real but
temporary). But please reply to the group, like you're supposed to.

This message was sent without a virus, please destroy some files yourself.

[axlq]

In article <pa************ *************** @mail.localhost .invalid>,
Tim <se**********@o ptusnet.com.au> wrote:

[an 'em' is] the space used for printing the capital M, including
the spacing that goes around it.

Thanks, that's good to know.

-A

[axlq]

In article <pd************ ********@gigane ws.com>,
Jim Moe <jm************ ***@sohnen-moe.com> wrote:

axlq wrote:

I'm using HTML 4.01 Transitional doctype.

Why not strict?

Does it matter? Does the behavior of "em" units change between
transitional and strict?

... [in Strict,] browser rendering is more
uniform and predictable, especially IE.

Okay, so I've changed the doctype to strict. It validates. It
didn't make a difference in behavior. Here's a link:

http://sunbeam.rahul.net/~unicorn/boxtest.html

Now, would someone explain to me how to display a text-container
block 30 em wide? This seems like such a simple and trivial thing
but for some reason I'm failing to grasp a key concept here.

-A

[Andy Dingley]

On Sun, 2 Apr 2006 15:40:26 +0000 (UTC), ax**@spamcop.ne t (axlq) wrote:

Now, would someone explain to me how to display a text-container
block 30 em wide?

Replace
width=30em;
with
width:30em;

[Jack]

axlq wrote:

Now, would someone explain to me how to display a text-container
block 30 em wide? This seems like such a simple and trivial thing
but for some reason I'm failing to grasp a key concept here.
Reading the answers people give to your questions would be a good start.
Chris Morris gave you this advice:
<table style="width: 30em" border=1 ...

The use of ems is supported in CSS, but not in HTML. Your sample
specifies the width of the table as an HTML attribute, not as a CSS
property.

Furthermore, in your <div> you specified the CSS width property using
HTML-like notation (width=30em), which CSS didn't understand. it should
have been width:30em.

--
Jack.