Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Cross-Browser Problem: Simple CSS Dropcap

Hey guys, I'm working on styling the first letter of the first paragraph of my company's blog, and I am having issues. I have styled it the way I desire it to be in the Chrome browser, but the Firefox and IE browsers do not seem to render it the same.

I guess I do not know the stylesheets of the two browsers very well yet, so I may need to style specifically to those browsers also. Here is a link to the codepen where I dropped the basic code I am using.

Please also take a look at it and also look at this screencap of the problem that I am referring to in this post.

ASIDE: I have had to become pretty creative to target just the first real p element in the body container, as the ::first-of-type pseudo element essentially targets the first p element in other parts of the page as well. (I can't for the life of me figure out why, but that's another story)

1 Answer

James Barnett
James Barnett
39,199 Points

Edit:

Use JQuery to parse the first letter wrap it in a span tag, here's the codepen.

$(document).ready(function() {
  $('body > p:first-of-type').each(function() {
    var text = $.trim($(this).text());
    var first_letter = text.substr(0,1);
    $(this).html('<span class="dropcap">' + first_letter + '</span>' + text.slice(1));
  }); 
});

If you just stick to adding a span with a class it works fine in Chrome 20, IE9 & Firefox 24.

http://codepen.io/jamesbarnett/pen/oakAt

Thank you James, I appreciate your input. I realize I can just use the span element, but I would like to set this css rule and forget it. I have many blog posts that I would need to add this class to that letter to make it a dropcap.

I wonder if there is something else that I can do to force the browsers to accept the styles as I list them in the CSS file? I may just be shooting in the dark here, but I really think that it could really save a me time in the long run.

Thanks again James. You rock!

James Barnett
James Barnett
39,199 Points

If you want a set it and forget solution, use JQuery to parse the first letter wrap it in a span tag.

Here's a codepen that does that I tested it and it works in Chrome 20, IE9 & Firefox 24 without having to edit your blog post by hand.

I found the code on http://elivz.com/blog/single/initial_caps/

$(document).ready(function() {
  $('p:first').each(function() {
    var text = $.trim($(this).text());
    var first_letter = text.substr(0,1);
    $(this).html('<span class="dropcap">' + first_letter + '</span>' + text.slice(1));
  }); 
});

Thanks James. I appreciate you taking the time to help me here.

This is very close to what I am looking for. However, this has the same effect as the p:first-of-type:first-letter CSS selector or also (curiously) the body p:first-of-type:first-letter selector.

I am actually looking to make it render all of the elements with the body > p:first-of-type:first-letter selector instead (with the "children of" (>) CSS character).

I don't know javascript yet. Is there a way to target only the first child of the body element?

James Barnett
James Barnett
39,199 Points

If you want to get the first <p> on the page. You've already written the selector for that body > p:first-of-type, in JQuery selectors are the same as the ones used in CSS.

Find this line in the JQuery $('p:first').each(function() { and change it to $('body > p:first-of-type').each(function() {

I updated the pen, if it's still not working exactly how you want it to, create a new pen an example blog post you are trying to style and I'll see if I can figure out what I'm missing.

It doesn't work just right. Try this URL in your browser: http://www.siamllc.com/news/siam-llc-is-now-siam-tek/