Drop cap with IE

[Haines Brown]

I'll try this question again: I have a drop cap that works fine under
galeon, mozila, opera, but does not show up under IE.

#intro:first-letter {
margin-top: -0.1em;
margin-right: 0.2em;
margin-bottom: -0.2em;
float: left;
color: #CC0000;
font-weight: bolder;
font-size: 200%;
}
#intro {
...
text-align: left;
}

<div id="intro">
Documents to. . .

More specifically, the initial "D" is right where I want it with
galeon and Mozilla. It is placed about 25% too high under Opera. The
"D" appears only as a normal character under IE 5.

Does IE 5 support drop caps?

Any idea of how to tune so that Opera displays the same positioning as
Mozilla?

--
Haines Brown

[Steve Pugh]

Haines Brown <br****@teufel.hartford-hwp.com> wrote:

I'll try this question again: I have a drop cap that works fine under
galeon, mozila, opera, but does not show up under IE.
It shows up in IE6 and IE5.5 but not in IE5.
IE 5.5 was the first (windows) version to support the :first-letter
selector.
#intro:first-letter {
margin-top: -0.1em;
margin-right: 0.2em;
margin-bottom: -0.2em;
float: left;
color: #CC0000;
font-weight: bolder;
font-size: 200%;
}
#intro {
...
text-align: left;
}

<div id="intro">
Documents to. . .

More specifically, the initial "D" is right where I want it with
galeon and Mozilla. It is placed about 25% too high under Opera. The
"D" appears only as a normal character under IE 5.

Does IE 5 support drop caps?
5.0 doesn't support first-letter. You have to hack the drop cap some
other way.
Any idea of how to tune so that Opera displays the same positioning as
Mozilla?

Opera 7.52 and Firefox 0.9 display it more or less the same. IE6 and
5.5 are slightly higher but not enough to worry about.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>

[Haines Brown]

Steve Pugh <st***@pugh.net> writes:

Haines Brown <br****@teufel.hartford-hwp.com> wrote:

I'll try this question again: I have a drop cap that works fine under
galeon, mozila, opera, but does not show up under IE.

Does IE 5 support drop caps?

5.0 doesn't support first-letter. You have to hack the drop cap some
other way.

Well, thanks for the simple answer. I'll not worry about its absence,
for it is not all that important.

Any idea of how to tune so that Opera displays the same positioning as
Mozilla?

Opera 7.52 and Firefox 0.9 display it more or less the same. IE6 and
5.5 are slightly higher but not enough to worry about.

Interesting, based on your standard (Opera, Firefox), galeon and
Mozilla display it 25% lower. Again, not something to worry too much
about.

--
Haines Brown

[Steve Pugh]

Haines Brown <br****@teufel.hartford-hwp.com> wrote:

Steve Pugh <st***@pugh.net> writes:

Haines Brown <br****@teufel.hartford-hwp.com> wrote:

>Any idea of how to tune so that Opera displays the same positioning as
>Mozilla?

Opera 7.52 and Firefox 0.9 display it more or less the same. IE6 and
5.5 are slightly higher but not enough to worry about.

Interesting, based on your standard (Opera, Firefox), galeon and
Mozilla display it 25% lower. Again, not something to worry too much
about.

Hmm, I've tried it in Opera 7.23, Opera 7.52, Netscape 6.2.3 (hence
Gecko 0.9), Mozilla 1.7.1 and Firefox 0.9.2 (both Gecko 1.7) and the
position of the drop cap is the same in all of them - the baseline of
the dropped letter is just below the top of the lowercase letters on
the second line of the div.

So either some other styles which you didn't quote are causing the
difference or there's something else going on with your copy of Opera
that causes it to behave differently.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>

[Haines Brown]

Steve Pugh <st***@pugh.net> writes:

Haines Brown <br****@teufel.hartford-hwp.com> wrote:

Steve Pugh <st***@pugh.net> writes:

Hmm, I've tried it in Opera 7.23, Opera 7.52, Netscape 6.2.3 (hence
Gecko 0.9), Mozilla 1.7.1 and Firefox 0.9.2 (both Gecko 1.7) and the
position of the drop cap is the same in all of them - the baseline of
the dropped letter is just below the top of the lowercase letters on
the second line of the div.

Thanks for the specific info. It's a help.

It seems that your suspicion there's other coding that is having
influence is probably correct, for on my Opera 7.52, I don't quite get
the same position of the "D" as on your copy. The baseline of the
dropped letter is just _above_ the top of the lowercase letters on the
second line of the div.

On that assumption, I hestitate to burden you with more specifics, for
it's like looking for a needle in a haystack, and the proper approach
should be to start with a very simple test page and then develop it
bit by bit until its no longer matches your result.

Given that here's some of the tags. I've cut out what obviously is
irrelevant:

body {
width: 640px;
margin-left: auto;
margin-right: auto;
text-align: center;
...
}
#IE-hack {
width: 640px;
text-align: left;
margin: auto;
}

/* Now comes the first div on the page. It nests two other
divs */
#graphics {
left-margin: auto;
right margin: auto;
text-align: center;
}

/* Now the paragraph with the Dropped letter, with complete
style definition */
#intro:first-letter {
margin-top: -0.1em;
margin-right: 0.2em;
margin-bottom: -0.2em;
float: left;
color: #CC0000;
font-weight: bolder;
font-size: 200%;
}
#intro {
width: 640px;
font-size: 0.9em;
margin-top: 1em;
text-align: left;
}

Now, in the body I have:

<div id="graphics">
<img id="graphic-a" src="bin/title-a.gif" ...
<br />
<img id="graphic-b" src="bin/title-b.gif" ...
</div>
<div id="intro">
Documents to support ...

So the coding is quite simple. I did not put the "intro" paragraph
into a paragraph container.

--
Haines Brown

[Steve Pugh]

Haines Brown <br****@teufel.hartford-hwp.com> wrote:

Steve Pugh <st***@pugh.net> writes:

Haines Brown <br****@teufel.hartford-hwp.com> wrote:

>Steve Pugh <st***@pugh.net> writes:

Hmm, I've tried it in Opera 7.23, Opera 7.52, Netscape 6.2.3 (hence
Gecko 0.9), Mozilla 1.7.1 and Firefox 0.9.2 (both Gecko 1.7) and the
position of the drop cap is the same in all of them - the baseline of
the dropped letter is just below the top of the lowercase letters on
the second line of the div.

Thanks for the specific info. It's a help.

At least you knew what I meant. 'lowercase' is totally the wrong word
to use here but my brain is refusing to supply the word I'm looking
for. I meant the small letters, the ones without ascenders, there must
ba name for them?
#graphics {
right margin: auto;
You're missing a hyphen there.

#intro {
margin-top: 1em;

This is the most likely candidate. The combination of vertical margin
collapsing and floats is probably a deadly one. Very few browsers
handle either of them 100% correctly on their own, and together...

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>

[PeterMcC]

Steve Pugh wrote in
<rb********************************@4ax.com>

<snip>

At least you knew what I meant. 'lowercase' is totally the wrong word
to use here but my brain is refusing to supply the word I'm looking
for. I meant the small letters, the ones without ascenders, there must
ba name for them?

x-height characters?

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

[Haines Brown]

Steve Pugh <st***@pugh.net> writes:

Haines Brown <br****@teufel.hartford-hwp.com> wrote:

Steve Pugh <st***@pugh.net> writes:

Haines Brown <br****@teufel.hartford-hwp.com> wrote:
>Steve Pugh <st***@pugh.net> writes:

#graphics {
right margin: auto;
You're missing a hyphen there.

Thanks. Didn't notice that. Apparently the line is optional.

#intro {
margin-top: 1em;

This is the most likely candidate. The combination of vertical margin
collapsing and floats is probably a deadly one. Very few browsers
handle either of them 100% correctly on their own, and together...

Useful to know, but cutting out the margin didn't significantly change
the position of the letter.

I did what I should have done initially, which is to create an
elementary test page with nothing but the dropped cap. Here is its
entire style definition and body:

#intro:first-letter {
float: left;
color: #CC0000;
font-size: 200%;
}
#intro {
text-align: left;
}

<div id="intro">
Documents...

Playing with this showed me that the 200% is not being intrepreted
quite the same. In my three browsers (galeon, mozilla, opera), the top
of the "D" is about the same, just a hair higher than the x-height of the
first line. But in the former two, the base line of the D is the
middle of the x-height of the second line, while in opera, it is a bit
higher than the x-height of the second line.

I played with the font-size definition, but found whether it was 2em,
200% or 24pt made no difference.

I started thinking about font metrics. The default font in galeon and
mozilla is times, and apparently opera as well.

It turns out that this was the problem. If I set font-family:
lucida; , the "D" is displayed exactly the same in all my
browsers: top of D exactly at x-height of first line, and baseline of
D at mid-x-height of second line. If I specify font-family as times or
serif, the inconsistency reappears as with the default family.

I'd go with lucida, but it shows up as too heavy, and I don't know what
families will be understood by all browsers. The weight of sans-serif,
times and garamond are ok, but I get the same problem as with default
times. I get the feeling that fiddling with font-families is a waste
of time because users may well set their own.

--
Haines Brown

[Chris Morris]

Haines Brown <br****@teufel.hartford-hwp.com> writes:

Steve Pugh <st***@pugh.net> writes:

Haines Brown <br****@teufel.hartford-hwp.com> wrote:

Steve Pugh <st***@pugh.net> writes:
> Haines Brown <br****@teufel.hartford-hwp.com> wrote:
> >Steve Pugh <st***@pugh.net> writes: #graphics {
right margin: auto;

You're missing a hyphen there.

Thanks. Didn't notice that. Apparently the line is optional.

And you have the words the wrong way round:
margin-right, not right-margin

It'll be optional in circumstances where it's obvious that it should
be auto. The CSS2 specification has a fairly clear (though quite long)
description of how all this gets calculated.

--
Chris

[Steve Pugh]

Haines Brown <br****@teufel.hartford-hwp.com> wrote:

Playing with this showed me that the 200% is not being intrepreted
quite the same.

I started thinking about font metrics. The default font in galeon and
mozilla is times, and apparently opera as well.

Ah, I'd set a font-family and font-size on #intro in my test case. As
I have different default fonts (and different default font sizes) in
my various browsers I would have seen even more disparity than you did
if I hadn't done this. I suppose that I assumed that as you were
asking about a difference of a few pixels that you had already set
things like this.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>

[Haines Brown]

Steve Pugh <st***@pugh.net> writes:

Haines Brown <br****@teufel.hartford-hwp.com> wrote:

I started thinking about font metrics. The default font in galeon and
mozilla is times, and apparently opera as well.

Ah, I'd set a font-family and font-size on #intro in my test case.

My #intro style had font-family defined, but not font-size. I can see
that it would be wise to do so, but it had no effect. Here's my
current state of the test file:

#intro:first-letter {
float: left;
color: #CC0000;
font-size: 200%;
}
#intro {
font-family: serif;
font-size: 1em;
text-align: left;
}

After getting a ruler out to actually measure things on my screen, I
find that the default line height for geleon and mozilla is 1.075em,
but for Opera it was significantly larger. On the theory this was my
problem, I defined line height in #intro, and Opera now has a line
spacing of bit over 5mm. compared to 5mm. for the others. So they are
now approximately the same.

Unfortunately, it also pushes the "D" in Opera up so that its base
line is appximately mid-line, and the second text line now justifies
left. The D was forced upwards to accomodate the second line reaching
the left margin. Oh, well ;-(

--
Haines Brown