In article <14k8mpg0gyu93$.
uwvr8ma...@40tude.net>,
tlvp <
mPiOsUcB...@att.net> wrote:
> On Thu, 29 Dec 2011 10:54:28 +1100, dorayme wrote:
>
> > all style and no substance ...
> >
> > <
http://dorayme.netweaver.com.au/xmasTree/triangle.html>
>
> Has me mystified, dorayme, on three counts:
>
> First, when you specify 4em, for your border-top, -bottom, and -left,
> what absolute font size are those ems referring to?
>
xem means x times the font size, specifically the height of the
font. The height of the font can be thought to be the height of
the box as scaled from the original box that the designer of the
font used as his reference. Most modern fonts do not have any
particular size, they are like universals, like "red square" or
"dog" or "circle" - the platonic forms of which live in a
dimensionless world, only the instances have resolved sizes.
In a real situation, the resolved height, the actual height of
anything specified in ems depends on a few things. Sticking to
screens:
* The resolution of the monitor
* The number of ems specified in CSS
* The font size settings in browser preferences.
Let's suppose that the rare and savvy browser user has his font
size settings so that text in his favourite font is *perfectly*
comfortable to read as paragraph text when the author of the
webpage sets no text size or sets body or paragraph text to be
1em or 100%. This preference setting is the key initial frame of
reference to answer your question, whatever is set as normal for
a user determines how absolutely inch big is the em unit. If the
user decides to use Zoom and tactically ups the size on some
occasion, the frame of reference becomes a new value.
Let's suppose that a keen-eyed user sets his preference for font
size to be such that the fonts he usually sees in paragraph text
are 1/10" high on his monitor. Realism can take a holiday for the
moment, easier maths trumps. So, an em unit instanced for this
user is such that anything sized as 10em will normally be 1".
Normally, if he does not use his Zoom.
These em units are very useful for flexible designs because they
resolve up and down to suit the user's preferred font size. In
our example, an element that is widthed or heighted to be 1em
will be 1/10", 10em will be 1", and to answer your question 4em
will be 4/10"
Most people set their preferred size to be rather bigger than
1/10" and the em unit is correspondingly bigger.
On my screen and my settings the height of the 10em div on
<
http://dorayme.netweaver.com.au/emSizing.html>
is about 1.7"
> Second, why is no border-right (as white as -top and -bottom) needed?
>
Perhaps you did not see my reply to Ray_Net on alt.html recently
in a thread called 'Merry Xmas folks...'? Not even sure he did?
Anyway, I will repeat the salient bits and this might help you:
Usually, borders of boxes are not very thick and not variously
coloured and rarely coloured to the same background - making them
invisible - as their element's container. But when you do assign
such thick borders, the bevelling at the corners can become
evident.
There are some examples at the beginning of
<
http://netweaver.com.au/floatHouse/page1.php>
with some explanations about widths.
A DIV's content area is naturally as wide as its container, and
so even where there is no content, it still gets width. But its
height is determined by the height of its content. If there is no
content, it has no height. Of course, we can give it a height
without giving it content, but that is interfering with the
course of nature (not that this is necessarily a bad thing. As it
happens, giving height *is* generally a bad thing but let's save
why for another time).
You can see for yourself certain progressions in:
<
http://dorayme.netweaver.com.au/borderBits.html>
The first div has a bit of content and so has a bit of height.
And some mildly exaggerated borders.
The second has no height, it is all width and borders.
The third is all borders!
The rest of the DIVs are simply variations, the last is of
interest because to get the black triangle one needs the
existence of the invisible white borders.
> Third, by what mechanism do white border-top and -bottom and black
> border-left all agree to divvy up the block so triangularly, if you know?
>
See the above and note the idea of bevelling when two thick
borders meet.
> Enlightenment on those three counts would be more than welcome :-) .
--
dorayme