Hi Thanks for your helpful answers to this.
The "Q:" and "A:" prefixes were simply there as trivial examples of extra content, I've been trying out a lot of different ways to present the Q&A material and nothing which used before/after was working at all. I was totally unaware that IE ignores these pseudo-elements so that is useful to know, now! The non-repeating image looks like a useful trick which I may use elsewhere, thank you. Cheers T -----Original Message----- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Jukka K. Korpela Sent: Sunday, 17 June 2007 3:39 a.m. To: css-d@lists.css-discuss.org Subject: Re: [css-d] generated content "before" div On Fri, 15 Jun 2007, Trevor Nicholls wrote: > The HTML I am styling uses classes to distinguish between questions and > answers, like so: > > <div class="question"><p>...</p></div> > <div class="answer"><p>...</p></div> For questions, it would be more suitable (for accessibility reasons and for logic) to make a question a heading (for the answer after it): <h2 class="question">...</h2> (You might not need a class if do things this way - perhaps there are no other <h2> elements on the page.) I mention this (in this list on CSS, despite its being a markup issue), because people often mistakenly assume that using <h2> markup has undesired effects like too large and bold font size. You can, if you like, remove some or all of the default styling of <h2> elements using CSS. You would need to consider font-size, font-weight, and vertical margins. > div.question:before { > display: block; > content: "Q: "; > } The :before pseudo-element and the content property are not supported by IE (even in IE 7), though they are rather well supported on other browsers. You can simulate them, in this case, by setting a non-repeating background image, containing e.g. "Q:" in some appearance, and a suitable left padding for the question elements. But maybe it's simplest to include the strings "Q: " and "A: " as document content. After all, they can be useful in all browsing situations, including non-CSS situations. -- Jukka "Yucca" Korpela, http://www.cs.tut.fi/~jkorpela/ ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
