[CSS] pseudo elements and firefox

[Hignar]

I'm just starting to learn both HTML and CSS and am having problems with pseudo elements in firefox.

In the CSS file I've got

div.content:first-line{text-transform: uppercase;}

Now, using IE7 this displays as expected, but in Firefox 3.0 the first line of the div is displayed the same as the rest of the block i.e not uppercase.

I know there are differences between browsers, but the book I'm following suggests that this should work in both IE and FF and googling doesn't seem to show that anyone else has the same problem.

Any ideas?

[BlaineSch]

I have never seen the use of a colon in the name.

I would give the first few words a class of their own. It does not seem cross browser compatible.

[xsonline]

I usually do this by CSS.

[Hignar]

I usually do this by CSS.

This is CSS.

I have never seen the use of a colon in the name.

I would give the first few words a class of their own. It does not seem cross browser compatible.

Thanks for the advice. This isn't actually something I want to use. It's just an example from a book. As I said, the book suggests that it's cross browser compatible, but I'm willing to accept that the book could be wrong.

[Hignar]

According to w3schools this should work in all major browsers.

CSS :first-line pseudo-element

I'm getting quite frustrated with this now.

[Hignar]

Think I've got it sorted now. In my html file I had something along the lines of

<div class="content"><p>Random paragraph of text</p></div>

It would appear that IE still picks up the content of the paragraph as the first line of the div but firefox (and opera) does not. If I remove the <p> then it displays correctly in FF.

I guess the solution is to ensure that the first paragraph of the div either doesn't use <p> tags or to apply the pseudo element to the first paragraph rather than the div.

Right that's the chapter on basic CSS finished. Onto Javascript next.

[xsonline]

This is CSS.

Woops, sorry It was late yesterdag . Excuse me.