6 replies to this topic

[anarchist quaker]

I'm having an issue where I'm trying to create a drop-cap effect on certain pages (using Drupal 6.x). My CSS is as follows:

.node-type-blog_entry .content-inner p:first-child:first-letter {

	font-size: 3.2em;

    float: left;   

    line-height: 0.8em;

    padding: 0 2px 0 0;       

    color: #624D43;         

    font-weight: bold;

    position: relative;

    left: -3px;

}

and the HTML (as rendered by Drupal):

<div class="node-type-blog_entry" >

  ...

  <div class="content-inner">

    <p>

      <img ... />My text here.

    </p>

    <p>etc, etc.</p>.

The drop cap is rendering in Chrome 13 and IE 9, but not at all in Firefox. Is there something about the way I have set up the specific element that Firefox doesn't like?

Thanks in advance...

[WingedPanther]

Is there any other CSS involved? Your settings could be getting overwritten.

[anarchist quaker]

OK, forgive my ignorance, but if the issue were that the CSS was being overwritten, wouldn't that prevent it from showing in Chrome and IE?

[Vaielab]

firefox, ie & chrome display element in a different way...
a css beeing overwritten only in firefox could be weird, but it could happen... try using firebug to see the actif css of the element and the overwritten css of the same element.

[anarchist quaker]

Vaielab said:

try using firebug to see the actif css of the element and the overwritten css of the same element.

Firebug is not showing that CSS element at all (Chrome Developer tools shows the new CSS as expected, as well as less-specific rules that were overwritten).

[Vaielab]

Can you upload your code somewhere, and post the link?

[anarchist quaker]

Vaielab said:

Can you upload your code somewhere, and post the link?

Sadly, no. I was hoping someone would tell me that Firefox doesn't support multiple pseudo elements (as in :first-child:first-letter) or that it doesn't like the <img> being the first item within the <p> tag. Thanks anyhow!