CSS Drop Cap: Is this bad on anyone's system?

[Greg G]

I just added a "Testimonial Letters" page for our band's web site. On
a whim, I decided to try using a drop cap to start each paragraph.

I looked up how to do it on someone's web site. His example looked
good, but had a lot of "pixel sized" elements. I'm no expert, but I
don't like when pages go haywire on different browsers, or with
different text sizes.

So I blundered around changing the stylesheet parameters. Here's what
I came up with:

..cap {
float: left;
width: 1.5ex;
font-size: 395%;
line-height: 1.6ex;
font-weight: normal;
color:#D70000;
font-family: serif;
font-style : normal;
background-image : url(bkgnd_noise.jpg);
padding : 2px 2px 2px 2px;
text-align : center;
border : 1px solid Yellow;
margin-right : 2px;
}

I tried out the page on IE and Opera, and at various text sizes. Seems
reasonable. Does anyone see anything really unacceptable?

Greg Guarino

[Greg G]

Oops. Some of you might find the URL helpful:

www.risky-biz.com/testimonials.html

On Mon, 05 Jul 2004 02:40:24 GMT, Greg G <gd*******@verizon.net>
wrote:

I just added a "Testimonial Letters" page for our band's web site. On
a whim, I decided to try using a drop cap to start each paragraph.

I looked up how to do it on someone's web site. His example looked
good, but had a lot of "pixel sized" elements. I'm no expert, but I
don't like when pages go haywire on different browsers, or with
different text sizes.

So I blundered around changing the stylesheet parameters. Here's what
I came up with:

.cap {
float: left;
width: 1.5ex;
font-size: 395%;
line-height: 1.6ex;
font-weight: normal;
color:#D70000;
font-family: serif;
font-style : normal;
background-image : url(bkgnd_noise.jpg);
padding : 2px 2px 2px 2px;
text-align : center;
border : 1px solid Yellow;
margin-right : 2px;
}

I tried out the page on IE and Opera, and at various text sizes. Seems
reasonable. Does anyone see anything really unacceptable?

Greg Guarino

[Neal]

On Mon, 05 Jul 2004 02:46:38 GMT, Greg G <gd*******@verizon.net> wrote:

Oops. Some of you might find the URL helpful:

www.risky-biz.com/testimonials.html

On Mon, 05 Jul 2004 02:40:24 GMT, Greg G <gd*******@verizon.net>
wrote:

I just added a "Testimonial Letters" page for our band's web site. On
a whim, I decided to try using a drop cap to start each paragraph.

I looked up how to do it on someone's web site. His example looked
good, but had a lot of "pixel sized" elements. I'm no expert, but I
don't like when pages go haywire on different browsers, or with
different text sizes.

So I blundered around changing the stylesheet parameters. Here's what
I came up with:

.cap {
float: left;
width: 1.5ex;
font-size: 395%;
line-height: 1.6ex;
font-weight: normal;
color:#D70000;
font-family: serif;
font-style : normal;
background-image : url(bkgnd_noise.jpg);
padding : 2px 2px 2px 2px;
text-align : center;
border : 1px solid Yellow;
margin-right : 2px;
}

I tried out the page on IE and Opera, and at various text sizes. Seems
reasonable. Does anyone see anything really unacceptable?

Greg Guarino

A couple quick comments.

1) No need to class the span. The div it's always a child of has a class.
That'll save some bytes in your code.

..testimonial3 span {}

2) Be certain your width will acommodate whatever width character you need
in there in whatever serif font the page happens to render in. Some might
have a wider W, say, than yours.

[Stan Brown]

"Greg G" <gd*******@verizon.net> wrote in
comp.infosystems.www.authoring.stylesheets:

Oops. Some of you might find the URL helpful:

www.risky-biz.com/testimonials.html

They look okay in Mozilla 1.4 on Windows 98.

(I liked them better at first, before the speckled yellowish
background filled in behind the drop cap.)

The boxes all seem to be about one pixel bigger than three lines, so
there's an uncomfortably large amount of space under them, almost a
full line visually. But again, that's an aesthetic judgment, so
maybe it's what you were going for,

--
Stan Brown, Oak Road Systems, Cortland County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2 spec: http://www.w3.org/TR/REC-CSS2/
2.1 changes: http://www.w3.org/TR/CSS21/changes.html
validator: http://jigsaw.w3.org/css-validator/

[DU]

Greg G wrote:

I just added a "Testimonial Letters" page for our band's web site. On
a whim, I decided to try using a drop cap to start each paragraph.

I looked up how to do it on someone's web site. His example looked
good, but had a lot of "pixel sized" elements. I'm no expert, but I
don't like when pages go haywire on different browsers, or with
different text sizes.

So I blundered around changing the stylesheet parameters. Here's what
I came up with:

.cap {
float: left;
width: 1.5ex;
font-size: 395%;
line-height: 1.6ex;
font-weight: normal;
color:#D70000;
font-family: serif;
font-style : normal;
background-image : url(bkgnd_noise.jpg);
padding : 2px 2px 2px 2px;
text-align : center;
border : 1px solid Yellow;
margin-right : 2px;
}

I tried out the page on IE and Opera, and at various text sizes. Seems
reasonable. Does anyone see anything really unacceptable?

Greg Guarino

You probably can reduce these 13 declarations to just a few by using
first-letter pseudo-class. You misunderstand how style info is inherited.

DU

[Haines Brown]

DU <dr*******@hotWIPETHISmail.com> writes:

Greg G wrote:

You probably can reduce these 13 declarations to just a few by using
first-letter pseudo-class. You misunderstand how style info is
inherited.

Since you brought this up, I have a drop cap that works nicely on
galeon/mozilla, but not IE:
#intro:first-letter {
margin-top: -0.1em;
margin-right: 0.2em;
margin-bottom: -0.2em;
float: left;
display: block;
color: #CC0000;
font-weight: bolder;
font-size: 200%;
}
<div id="intro">
Documents. . .

With IE, the "D" of "Documents" appears as a normal character.

--
Haines Brown

[tomasio]

Greg G <gd*******@verizon.net> schrieb:

}

I tried out the page on IE and Opera, and at various text sizes. Seems
reasonable. Does anyone see anything really unacceptable?

Greg Guarino

Looks good on various font-sizes with Firefox 0.9.1, IE 6 on WinXP
Prof.

Btw, does anyone know how to fix fontsizes for a navigation bar?
usually i would let the user decide about the fontsize, but in this
case a fixed size would be useful..
--
kind regards,
tomasio
"describing an issue reveals the way to solve it"

[Greg G]

On Mon, 05 Jul 2004 05:00:15 -0400, DU <dr*******@hotWIPETHISmail.com>
wrote:

Greg G wrote:

I just added a "Testimonial Letters" page for our band's web site. On
a whim, I decided to try using a drop cap to start each paragraph.

I looked up how to do it on someone's web site. His example looked
good, but had a lot of "pixel sized" elements. I'm no expert, but I
don't like when pages go haywire on different browsers, or with
different text sizes.

So I blundered around changing the stylesheet parameters. Here's what
I came up with:

.cap {
float: left;
width: 1.5ex;
font-size: 395%;
line-height: 1.6ex;
font-weight: normal;
color:#D70000;
font-family: serif;
font-style : normal;
background-image : url(bkgnd_noise.jpg);
padding : 2px 2px 2px 2px;
text-align : center;
border : 1px solid Yellow;
margin-right : 2px;
}

I tried out the page on IE and Opera, and at various text sizes. Seems
reasonable. Does anyone see anything really unacceptable?

Greg Guarino

You probably can reduce these 13 declarations to just a few by using
first-letter pseudo-class. You misunderstand how style info is inherited.

DU

That's where you are wrong :)

In order to MISunderstand something, you first have to think you KNOW
something about it. I don't understand anything useful about style
inheritance, except to know that it exists.

I have a hazy familiarity with the idea that other constructs within a
div or paragraph "inherit" the parameters of the "parent" structure,
but I'm a busy guy and I've been putting off learning it. I did the
whole site with only a css web tutorial under my belt and didn't know
about the inheritance concept at all until recently.

As for the first-letter pseudo class, I tried that and it didn't work,
at least in IE. This could easily be my own incompetence, but I think
I may have heard a rumor that it is not universally supported.

Greg

[Greg G]

On Mon, 5 Jul 2004 02:29:59 -0400, Stan Brown
<th************@fastmail.fm> wrote:

"Greg G" <gd*******@verizon.net> wrote in
comp.infosystems.www.authoring.stylesheets:

Oops. Some of you might find the URL helpful:

www.risky-biz.com/testimonials.html
They look okay in Mozilla 1.4 on Windows 98.

(I liked them better at first, before the speckled yellowish
background filled in behind the drop cap.)

I'm not sure I'll even keep that. I was just curious to see if I could
do it. The yellow noise image was just something I had around.
The boxes all seem to be about one pixel bigger than three lines, so
there's an uncomfortably large amount of space under them, almost a
full line visually. But again, that's an aesthetic judgment, so
maybe it's what you were going for,

I'm still working on it. I wanted to see if I had made a gross
usability error before spent any more time tweaking it. Thanks for the
help.

Greg

[DU]

Haines Brown wrote:

DU <dr*******@hotWIPETHISmail.com> writes:

Greg G wrote:

You probably can reduce these 13 declarations to just a few by using
first-letter pseudo-class. You misunderstand how style info is
inherited.
Since you brought this up, I have a drop cap that works nicely on
galeon/mozilla, but not IE:
#intro:first-letter {
margin-top: -0.1em;
margin-right: 0.2em;
margin-bottom: -0.2em;
float: left;
display: block;
color: #CC0000;
font-weight: bolder;
font-size: 200%;
}

Why float: left? Why display: block?


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

With IE, the "D" of "Documents" appears as a normal character.

It's going to be difficult to agree with you without any url.

DU

[Haines Brown]

DU <dr*******@hotWIPETHISmail.com> writes:

Haines Brown wrote:

DU <dr*******@hotWIPETHISmail.com> writes:

...

Since you brought this up, I have a drop cap that works nicely on
galeon/mozilla, but not IE:
#intro:first-letter {
margin-top: -0.1em;
margin-right: 0.2em;
margin-bottom: -0.2em;
float: left;
display: block;
color: #CC0000;
font-weight: bolder;
font-size: 200%;
}

Why float: left? Why display: block?

Without the float, the cap does not drop in galeon and Mozilla. I
don't recall why I felt it necessary to display as a block, but it
seems to do no harm (galeon) or any good (IE). At one point, without
it, only the "D" was displayed, and all text thereafter disappeared,
but I suspecect that was fluke.

<div id="intro">
Documents. . .
With IE, the "D" of "Documents" appears as a normal character.

Here's the URL of the document:
http://www.hartford-hwp.com/archives/index.html

Thanks for your interest.
--
Haines Brown