Re: Margins in MSIE (was font sizes...)

Carl Morris wrote:
> No, thats not how margins, specially the right margin, works... 
> setting the right margin only effects where the text is centered in
> your example...  Theres the other flaw with shadowing effect...
setting
> the left or right margins of centered text changes where the text
is
> centered from...  Setting both margins at the same time may not
produce
> any change!  I think if you draw this out on paper I think you will
> understand:

If you look carefully at the code, and what I wrote ("...offset the
drop shadow to the right and the text to the left..."), you will see
what I mean. Here's it is "drawn out" (you need a monospaced font to
see this):

default margins:

---------------------------------------
|         Text Centered               |
---------------------------------------

drop shadow to the right (left margin):

       --------------------------------
margin |        Text Centered         |
       --------------------------------

red text to the left (right margin):

--------------------------------
|        Text Centered         | margin
--------------------------------

When the red text is then moved up over the drop shadow text, the
drop shadow will be offset to the right of the red text.

You should get the same offset of the drop shadow text relative to
the red text from (1) the above, (2) having no margin on the drop
shadow text and doubling the right margin on the red text, (3) having
no margin on the red text and doubling the left margin on the drop
shadow text. My example shows that not to be the case with MSIE.
Option (2) does not work as expected.

As for the problem with the sample on your page, here's the code:

  <P ALIGN=CENTER STYLE="font: bold 15px Comic Sans MS">
    <DIV STYLE="margin-right: 8px; color: #000000">Quick!</DIV>
    <DIV STYLE="color: #FF0000; margin-top: -23">Quick!</DIV>

Note the 8 pixel _right margin_ on the drop shadow text.
Theoretically, that should push your drop shadow text 4 pixels to the
left. But on your page it's offset 1 pixel to the right!

Note the top margin of -23 on the red text, seeming to indicate a 8
pixel drop shadow (the red text to be displayed 8 pixels higher than
the drop shadow text height of 15 pixels). The actual offset is 3
pixels, not 8.

Take your code and increase the font size to 40 pixels. Increase the
top margin of the red text to -48 pixels. I would expect these
numbers to display the red text 8 pixels higher than the black drop
shadow text. You will find, in fact, the red text is displayed 8
pixels _below_ the drop shadow text.

The larger the font, the larger the vertical offset discrepancy. This
occurs even when I explicitly initialize all vertical margins to 0.

As for the MS gallery page, I have Impact -- it's installed with MSIE
3.0b2. When I visited that page this morning, you see what I got.
When I visited that page just a few minutes ago, the font had been
changed to Impact. (It's still ugly, just not as ugly.)

BTW, this method for drop shadows is an old DTP trick I used in the
original DOS version of Ventura Publisher.

David Perrell

Received on Thursday, 1 August 1996 16:23:21 UTC