|
Posted by Jonathan N. Little on January 6, 2008, 4:33 pm
Please log in for more thread options
Martin Leese wrote:
> Hi,
>
> I am having trouble with CSS in that I can't
> get the pseudo-element 'first-line' to work.
>
> I have some pages that contain dialog. I use
> a <dl> for this, with the character's name in
> a <dt> followed by the words in a <dd>. This
> is rendered as I wish with the first line not
> indented, the following lines indented, and no
> leading (whitespace) between the two.
>
> However, it is bad practice to use HTML tags
> for layout; layout should be in the style
> sheet. So I thought I would use the CSS
> pseudo-element 'first-line' to mimic the <dl>
> layout. Here is a test page:
>
> http://members.tripod.com/martin_leese/Marvin/test.html
>
> I have viewed this using Firefox 1.5,
> Netscape 7.02, and IE 5.50. Only Netscape
> appears to work, and only for
> class="dialogmargin".
>
> Can somebody please explain what I am doing
> wrong here.
Well firstly, no way, no how IE 5.50 will work because it does not
support :first-line pseudo element, (as well as many other CSS
properties). AS I recall FF1.5 supported it but all these browsers are
*old*, Firefox is at 2.0.0.11 with 3 soon to be release and Netscape is
officially dead and buried! Anyway there is an easier way, 2 classes.
This way it will work in these ancient browsers
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="en-us">
<title>Better</title>
<style type="text/css">
div.orator { margin: 0 1em; }
div.dialog { margin: 0 1em 1em 3em; }
</style>
</head>
<body>
<div class="orator">
Radio:
</div>
<div class="dialog">
Roger, your ship is out of control<br>
Robot override imperative, repeat imperative<br>
Suggest you assign control to Marvin
</div>
</body>
</html>
Follow up to: comp.infosystems.www.authoring.html
I don't have any NG listing: alt.html.css
--
Take care,
Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
| 
XML Sitemap