Click here to get back home

Elements not sizing consistently
 Home | NewsGroups | Search | About
Login Password
Register Now!
 comp.infosystems.www.authoring.html    Post an article   get this group's latest topics as an RSS feed add this group's latest topics to your My MSN content add this group's latest topics to your My Yahoo content
Subject Author Date
Elements not sizing consistently Chris Mahoney 10-18-2007
Posted by Chris Mahoney on October 18, 2007, 10:31 pm
Please log in for more thread options
 Hi

I'm not sure whether this is an HTML or CSS issue, but hopefully most
of you in here would know at least some CSS :-)

I have the following code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Language" content="en-nz" />
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Test</title>
</head>
<body>
<p>
<input type="text" style="width: 20em;" /><br />
<textarea rows="2" cols="20" style="width: 20em;"></
textarea><br />
<select size="2" style="width: 20em;">
<option>Test</option>
</select>
</p>
</body>
</html>

I get different element widths in different browsers:

IE 6 (XP): The Select element is smaller than the Input and Textarea
elements.
Firefox 2 (XP): All of the elements are different sizes.
Netscape 9 (XP): Same as Firefox.
Opera 9 (OS X): The elements are all different sizes, and are
different from Firefox/NS.
Safari 2 (OS X): The elements are all the same size.
IE 5 (OS X): The elements are all the same size, although it somehow
manages to pull a Euro symbol out of somewhere!

I'm trying to make them all the same width, but have so far only
managed to accomplish that in Safari and Mac IE. What am I doing
wrong?

Thanks
Chris


Posted by Lars Eighner on October 19, 2007, 6:52 am
Please log in for more thread options
 In our last episode,
the lovely and talented Chris Mahoney
broadcast on comp.infosystems.www.authoring.html:

> Hi

> I'm not sure whether this is an HTML or CSS issue, but hopefully most
> of you in here would know at least some CSS :-)

> I have the following code:

><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
> www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
><html xmlns="http://www.w3.org/1999/xhtml">
><head>
> <meta http-equiv="Content-Language" content="en-nz" />
> <meta http-equiv="Content-Type" content="text/html;
> charset=utf-8" />
> <title>Test</title>
></head>
><body>
> <p>
> <input type="text" style="width: 20em;" /><br />
> <textarea rows="2" cols="20" style="width: 20em;"></
> textarea><br />
> <select size="2" style="width: 20em;">
> <option>Test</option>
> </select>
> </p>
></body>
></html>

> I get different element widths in different browsers:

> IE 6 (XP): The Select element is smaller than the Input and Textarea
> elements.
> Firefox 2 (XP): All of the elements are different sizes.
> Netscape 9 (XP): Same as Firefox.
> Opera 9 (OS X): The elements are all different sizes, and are
> different from Firefox/NS.
> Safari 2 (OS X): The elements are all the same size.
> IE 5 (OS X): The elements are all the same size, although it somehow
> manages to pull a Euro symbol out of somewhere!

> I'm trying to make them all the same width, but have so far only
> managed to accomplish that in Safari and Mac IE. What am I doing
> wrong?

First, start with valid html. Your <p> and </p> are nonsense, and where is
the form element?

Once you have valid markup, most browsers will get the INPUT and SELECT*
elements the same size. The problem with the TEXTAREA element is that cols
is a required attribute, but its value is in "average character width" while
em in the style attribute is supposed to be the width of the widest
character in the font. The only kind of font in which those two will be
more or less equal is a monospaced font. When you have set font-family to
monospace (for each element) in valid markup, you will get almost equal
sized boxes in most browsers.*


*but the widget used for SELECT may throw things off a bit.

In short:

1) Write valid markup, even for examples.
2) Stop wanting that.


--
Lars Eighner <http://larseighner.com/> <http://myspace.com/larseighner>
Countdown: 459 days to go.
What do you do when you're debranded?

Posted by Bergamot on October 19, 2007, 9:08 am
Please log in for more thread options
Lars Eighner wrote:
>
> em in the style attribute is supposed to be the width of the widest
> character in the font.

That's incorrect. em is a unit of height, not width - the height of the
letter "M". Width in em is that number(rotated 90 degrees), which may be
wider or narrow than the widest character depending on the particular
font. Compare width:1em in a condensed font to an expanded font for example.

There is no CSS unit that describes character width, but em is the
closest thing there is.

> When you have set font-family to
> monospace (for each element) in valid markup, you will get almost equal
> sized boxes in most browsers.

Since select and input elements generally use a proportional font and
textarea a monospace font, a 20em width will very likely be different
between them. But using monospace fonts in all form elements just to get
the desired spacing is probably unattractive.

> In short:
>
> 1) Write valid markup, even for examples.

Absolutely.

> 2) Stop wanting that.

I think it should be easy enough to achieve by putting the form elements
in div wrappers, setting the 20em width on the div, and 100% width on
the form elements.

--
Berg

Posted by Jukka K. Korpela on October 20, 2007, 3:12 am
Please log in for more thread options
Scripsit Bergamot:

> Lars Eighner wrote:
>>
>> em in the style attribute is supposed to be the width of the widest
>> character in the font.
>
> That's incorrect.

Yes, it's incorrect, as one could easily see either by checking the CSS
specification or with a very simple experiment.

> em is a unit of height, not width - the height of
> the letter "M".

No, that's incorrect, as one could easily see either by checking the CSS
specification or with a very simple experiment.

The em unit is the size of the font, which means the height of the font,
which in turn is a design concept, not the height of any letter, or of "M"
in particular. The height needs to accommodate descenders and ascenders and
usually contains some extra spacing as well, though some characters may
actually extend past the limits set by the height - this is really
typographic design, not mathematics.

But surely the height of "M" is _much_ smaller than 1 em. They could be
equal only if someone designed a font that basically contains just the
original, uppercase Latin letters in the design used in ancient
inscriptions, but that has been water under the bridge for almost two
thousand years.

> There is no CSS unit that describes character width, but em is the
> closest thing there is.

No, the ex unit is _much_ closer to average character width than em is,
though even the ex unit is something completely different: theoretically,
the height of lowercase letters without extenders, and practically
implemented (wrongly) on IE brutally as half of em (0.5em).

Just try it. Write any normal text, count its characters, and put a
horizontal rule below it, with the width set to the number of characters
times em. The width of the line of characters and the width of the
horizontal rule will be _very_ different.

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


Posted by Bergamot on October 21, 2007, 6:44 pm
Please log in for more thread options
Jukka K. Korpela wrote:
> Scripsit Bergamot:
>
>> There is no CSS unit that describes character width, but em is the
>> closest thing there is.
>
> No, the ex unit is _much_ closer to average character width than em is,

Theoretically speaking, maybe. In practice, no.

> implemented (wrongly) on IE brutally as half of em (0.5em).

IE is not the only browser that uses .5em instead of 1ex. Opera does as
well. I don't know what Safari does.

> Just try it. Write any normal text, count its characters,

A simpler test is to make 2 divs in your font of choice, preferably
something with a noticeably large or small x-height. Set the dimensions
of 1 div to 1em square, and the other to 2ex square. IE and Opera show
the same sizes regardless of font, gecko does not.

Considering that broken implementations of ex are more likely than
correct ones, I wouldn't recommend using it at all.

--
Berg

Similar ThreadsPosted
Images & relative sizing & IE December 20, 2004, 1:09 pm
dynamic sizing text September 6, 2007, 3:14 pm
Any way to make an auto-sizing window? January 16, 2007, 1:55 am
How to let the layout laterals auto sizing? March 26, 2008, 11:03 am
What is the most versatile sizing value for fonts? Percents?EM's? January 7, 2008, 7:13 pm
Image/Font sizing UI design question re directories March 29, 2006, 7:04 am
Why are we experiencing a table sizing issue with set pixel widths? May 21, 2008, 3:48 pm
CSS for All Elements (Bullets February 22, 2005, 12:17 pm
CSS gap between inline elements February 7, 2008, 3:03 am
Form and nested elements November 10, 2004, 11:57 am

Our other projects:

Art Dolls, Fairies and Mermaids - Sunnyfaces.net

Roy's Linux, Programming and Search Engines messages

1-Script XML SitemapXML Sitemap