homepage Welcome to WebmasterWorld Guest from 54.167.138.53
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
css first-letter in firefox 3.6.10
css first-letter
adamnichols45




msg:4208461
 11:43 pm on Sep 28, 2010 (gmt 0)

I am using firewfox 3.6.10

code as follows

p:first-letter
{
font-size: 3em;
display: block;
float: left;
margin-right: 5px;
color: #000000;
}

When I refresh in browser it looks great do a refresh again and it reverts back to normal text and stays the same.

Any thoughts on this cant get it to work at all!

HELP

 

Major_Payne




msg:4208473
 11:58 pm on Sep 28, 2010 (gmt 0)

The paragraph tags are already block level tags. an you also post the HTML and the browser being used?

adamnichols45




msg:4208613
 9:14 am on Sep 29, 2010 (gmt 0)

html is simply

<table width="600" class="fullh" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<p>Welcome</p>
</td>
</tr>
</table>

adamnichols45




msg:4208647
 11:06 am on Sep 29, 2010 (gmt 0)

I discovered the problem.

having the stlye in css inlclude file does not work but having it in the head section works fine

BUT WHY?

Major_Payne




msg:4208880
 5:23 pm on Sep 29, 2010 (gmt 0)

By "css inlclude file", do you mean the external CSS file?

It WILL work in an external CSS file, but you have to be aware of the order of CSS precedence. You may have missed the fact that something was ignoring or restyling your style for the class/id.

Better to use this to select the paragraphs in the table cell as oppose to ALL paragraphs.


* { margin: 0; padding: 0; border: 0; }

table {
width: 600px;
margin: 0 auto; /* CENTERS TABLE */
}

table td p:first-letter {
font-size: 3em;
float: left;
margin-right: 5px;
color: #000;
}


"display: block;" is not needed as "p" tags are block level tags. The "float: left;" removed the content from the document flow. You might want to remove it as the text will be left by default unless re-styled to do otherwise.

swa66




msg:4209575
 8:57 pm on Sep 30, 2010 (gmt 0)


p:first-letter {
...
display: block;
...



The paragraph tags are already block level tags.


Actually while a <p> by default indeed is a block element, that's not true for p:first-letter : it's just the first letter, and hence inline by default.
Now floating it would be enough on it's own.

See also the example in [w3.org...] (using ::first-letter CSS3 syntax, but has plenty of examples).

Major_Payne




msg:4209623
 10:19 pm on Sep 30, 2010 (gmt 0)

p:first letter; ONLY affect the first letter. There's no need to set it as a block level since the "p" IS already block level. Really is redundant.

swa66




msg:4209950
 2:08 pm on Oct 1, 2010 (gmt 0)

The <p> having block is mandatory: you can only use the first-letter pseudo class on block level elements.

But it's not because the <p> is a block level element that a part of it is that too! On the contrary most if not all children of a <p> will be -by default at least- inline elements.

Take a look at the CSS standard: [w3.org...] is shows a fictional syntax that explains how a browsr is to interpret first-letter and why you almost have to consider the first letter of a block element (as well as the first line) as separate children of the <p> that are generated on the fly by the browser.

The reason setting display block on the first letter isn't working (yet) is also simple: that a look at the second paragraph: browsers aren't supposed to let us do that.

Major_Payne




msg:4209982
 3:07 pm on Oct 1, 2010 (gmt 0)

It works fine for me without declaring the block level for the :first-letter. Even the w3c doesn't declare it a block level since the "p" tag already is one. Still redundant, but you all code your way. My example works perfectly for the first letter without declaring a block level for it.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved