Email conversation
| From | Kevin Rodgers |
|---|
| To | Me |
|---|
| Subject | how to visually denote <br /> |
|---|
| Date | 22 December 2005 20:27 |
|---|
First, thanks for your wonderful tutorials and email archive -- what a
great resource!
Now for my CSS problems: We've just deployed the [brand] HTML editor for
a data capture application, and I was able to come up a nice way to
indicate to the users where each paragraph break occurs:
p:before {content: "\B6"} /* PARAGRAPH SIGN */
p:first-letter {color: blue}
That works fine in Mozilla Firefox 1.0.6 on my desktop, but in MS IE 6
on their desktop the paragraph sign is not displayed at all and the
first letter of the <p>...<.p> content is displayed in blue.
I've seen some references indicating that IE doesn't implement the
:before and :after pseudo-elements (introduced in CSS 2, I think). Is
that true, and if so is there a workaround available?
I also wanted to display a glyph to indicate that a hard linebreak had
crept into the markup, like this:
br:before {content: "\21B5"} /* CARRIAGE RETURN */
br:first-letter {color: red}
(U+21B5 is the definition of the crarr character entity defined in
http://www.w3.org/TR/xhtml1/DTD/xhtml-symbol.ent)
But that doesn't even work in FF, so I started Googling and found your
site, in particular the Empty Elements chapter:
/---
| There are in fact two main issues here. Both HTML and CSS standards
| specify that if a block element (and some flow level elements) is
| empty, it should not be rendered at all, unless it has a specified or
| implied height. So in other words if there is a paragraph that is
| empty, it should be rendered as if it were never there. However, if it
| had any margins applied, these should be respected, and added into the
| vertical margin collapsing.
\---
Is there any way to visually denote an EMPTY element like <br />?
Thanks!
| From | Me |
|---|
| To | Kevin Rodgers |
|---|
| Subject | Re: how to visually denote <br /> |
|---|
| Date | 22 December 2005 21:13 |
|---|
Kevin,
> That works fine in Mozilla Firefox 1.0.6 on my desktop
and Opera, Safari, Konqueror, iCab, and basically any current browser except
IE. Opera's generated content (:before and :after) support is a _lot_ better
than Firefox's, so I suggest you also try testing in that.
http://www.opera.com/download/
> I've seen some references indicating that IE doesn't implement the
> :before and :after pseudo-elements (introduced in CSS 2, I think). Is
> that true, and if so is there a workaround available?
Yep, IE is a long way behind, and I do not think they will manage it in IE 7
either. Possibly IE 8.
As for workarounds ... IE sucks, so you might have to resort to ugly hacks.
Really ugly hacks.
Dean Edward's IE 7 project may be able to help - basically you include his
script on your page, and it takes care of the rest - not sure if it works
with the BR element though (and not sure if it works with HTML editors):
http://dean.edwards.name/IE7/
Other than that, well, maybe you can use a script to insert a span after it.
That will modify your DOM though, so it may not be practical.
Sorry, there is no simple answer.
> br:before {content: "\21B5"} /* CARRIAGE RETURN */
> But that doesn't even work in FF
It works for me in Opera, Safari, Konqueror, iCab, and Firefox, but only if
the parent element contains more content. In Opera it works as you expect.
Firefox does not consider a linebreak or the generated content to be
content, so it does not render the parent element. The only way to make it
display is to add text content into the line-break's parent element.
Mark 'Tarquin' Wilton-Jones - author of http://www.howtocreate.co.uk/
| From | Kevin Rodgers |
|---|
| To | Me |
|---|
| Subject | Re: how to visually denote <br /> |
|---|
| Date | 22 December 2005 23:06 |
|---|
Hi Mark, thanks for the lightning response!
Apparently I'll have to abandon the idea of providing these features, at
least while IE remains the corporate standard [sic] here.
>> > > br:before {content: "\21B5"} /* CARRIAGE RETURN */
>> > > But that doesn't even work in FF
> >
> > It works for me in Opera, Safari, Konqueror, iCab, and Firefox, but only
> > if the parent element contains more content. In Opera it works as you
> > expect. Firefox does not consider a linebreak or the generated content
> > to be content, so it does not render the parent element. The only way to
> > make it display is to add text content into the line-break's parent element.
Hmmm, this was the context I used in my test:
<p>This paragraph is broken<br />across 2 lines.</p>
I wonder why it's not working for me in Firefox... could some higher
level style sheet in the cascade be affecting this?
Thanks again