blockquote in a speech buuble?

[Carter Brandon]

hi,

can anyone tell me how to use CSS, whether using blockquote or a CSS
class, to allow me to show quotes in a speech bubble?

thanks.

[Johannes Koch]

Carter Brandon schrieb:

can anyone tell me how to use CSS, whether using blockquote or a CSS
class, to allow me to show quotes in a speech bubble?

What is a speech bubble?
--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)

[Jón Fairbairn]

Johannes Koch <ko**@w3development.dewrites:

Carter Brandon schrieb:

can anyone tell me how to use CSS, whether using blockquote or a CSS
class, to allow me to show quotes in a speech bubble?

What is a speech bubble?

_______
/ \
| this is |
\ ______/
//
'
O_/
/|
|
/ \

Which looks like the sort of thing that could be done with a
border and some images covering up the corners.

--
Jón Fairbairn Jo***********@cl.cam.ac.uk

[Johannes Koch]

Jón Fairbairn schrieb:

Johannes Koch <ko**@w3development.dewrites:

>What is a speech bubble?

_______
/ \
| this is |
\ ______/
//
'
O_/
/|
|
/ \

I wondered whether the OP really meant this.

Which looks like the sort of thing that could be done with a
border and some images covering up the corners.

and the little triangle pointing to the speaker's mouth.
--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)

[Martin Eyles]

"Johannes Koch" <ko**@w3development.dewrote in message
news:45***********************@authen.yellow.readf reenews.net...

Jón Fairbairn schrieb:

>Johannes Koch <ko**@w3development.dewrites:

>>What is a speech bubble?

_______
/ \
| this is |
\ ______/
//
'
O_/
/|
|
/ \

I wondered whether the OP really meant this.

>Which looks like the sort of thing that could be done with a
border and some images covering up the corners.

and the little triangle pointing to the speaker's mouth.

Can you do backgrounds on the pseudo elements before and after?

If so you might be able to do a fixed-width, variable height speach bubble,
with square edges and rounded corners...

300px wide example...

blockquote {width: 300px; border-left: 1px solid black; border-right: 1px
solid black}
blockquote:before {width: 300px; height: 10px; background:
url("300x10pxImageOfRoundedCornersAndTopBorder.png ")}
blockquote:after {width: 300px; height: 20px; background:
url("300x20pxImageOfRoundedCornersTriangleBitAndBo ttomBorder.png")}

However, I suspect that backgrounds aren't supported in the before and after
pseudo elements. If not, these might be a good addition to a future css
spec.

Martin

[Martin Eyles]

"Martin Eyles" <ma**********@NOSPAMbytronic.comwrote in message
news:12*************@corp.supernews.com...

"Johannes Koch" <ko**@w3development.dewrote in message
news:45***********************@authen.yellow.readf reenews.net...

>Jón Fairbairn schrieb:

>>Johannes Koch <ko**@w3development.dewrites:
What is a speech bubble?
_______
/ \
| this is |
\ ______/
//
'
O_/
/|
|
/ \

I wondered whether the OP really meant this.

>>Which looks like the sort of thing that could be done with a
border and some images covering up the corners.

and the little triangle pointing to the speaker's mouth.

Can you do backgrounds on the pseudo elements before and after?

If so you might be able to do a fixed-width, variable height speach
bubble, with square edges and rounded corners...

300px wide example...

blockquote {width: 300px; border-left: 1px solid black; border-right: 1px
solid black}
blockquote:before {width: 300px; height: 10px; background:
url("300x10pxImageOfRoundedCornersAndTopBorder.png ")}
blockquote:after {width: 300px; height: 20px; background:
url("300x20pxImageOfRoundedCornersTriangleBitAndBo ttomBorder.png")}

However, I suspect that backgrounds aren't supported in the before and
after pseudo elements. If not, these might be a good addition to a future
css spec.

Martin

A little experimentation, and it appears to work in firefox 2 RC 2 (but
unsuprisingly, not IE6) with a slight modification

You need to add this to the css off the pseudo elements

content: ''; display: block;

Martin