Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Diego Lucero
Diego Lucero
10,588 Points

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
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

Diego Lucero
Diego Lucero
10,588 Points

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
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));
  }); 
});
Diego Lucero
Diego Lucero
10,588 Points

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
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.

Diego Lucero
Diego Lucero
10,588 Points

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