Why is my first letter black and not bold and the bottom margin is bigger than the right margin?

Hi Samuel,

This appears to be a bug in firefox. ::first-letter does not correctly inherit styles from ::first-line when ::first-letter is floated.

I was able to find this bug report: https://bugzilla.mozilla.org/show_bug.cgi?id=13610

I thought it was odd but that was the only link I could find about this. I imagine that this is not affecting a lot of people.

If you apply the color and bold styles again to first-letter then you should get the expected results.

Here's a codepen demo where I did that: http://codepen.io/anon/pen/YPPrVz

However, this is not desirable to repeat styles in case you need to change them later. If the color royalblue needed to be changed then you have 2 spots to change it in.

A possible workaround you can use until this bug is fixed is to group the 2 selectors like this:

.intro::first-line {
    font-size: 32px;
}

/* Workaround for firefox since ::first-letter doesn't inherit styles from ::first-line when floated */
.intro::first-line,
.intro::first-letter {
    color: royalblue;
    font-weight: bold;
}

.intro::first-letter {
    float: left;
    margin: 10px 10px 0 0;
    padding: 5px 10px;
    background: #e0e0e0;
    font-size: 100px;
    line-height: 1;
}

This way you don't have repeated style declarations as shown in the codepen demo and you've worked around the firefox bug.

Try explicitly setting the font-weight and colour in your element selectors. These are special kinds of selector elements and it could be they're just not inheriting styles from parent elements as others do. :-)

Hi thanks for your reply. Unfortunately that didn't work. It actually got smaller and lost the float: left property all together and it got smaller.

.intro::first-line {
    color: royalblue;
    font-weight: bold;
    font-size: 32px;
}

.intro::first-letter {
    float: left;
    margin: 10px 10px 0 0;
    padding: 5px 10px;
    background: #e0e0e0;
    font-size: 100px;
    line-height: 1;
  font-weight: bold;
    font-size: 32px;
}

Hi Samuel,

This is what i get from your code in code pen.

I just need to get my head around what is wrong here, do you want the L to be higher up?

Or is it that you want the text under the first line to be blue too?

Sorry that I'm not completely getting your explanation.

Hi Jonathan, I tried what you suggested I'm getting the same results. Wayne just replied and he is getting the effect you're supposed to get but he doesn't understand my explanation so I'm going to try and explain better. this is the new code u suggested.

p.intro:first-letter {
    float: left;
    margin: 10px 10px 0 0;
    padding: 5px 10px;
    background: #e0e0e0;
    font-size: 100px;
    line-height: 1;
    font-weight: bold;
    font-size: 32px;
}

Hi Wayne, thanks for the reply. The effect you have in the paragraph you posted is exactly the result I'm trying to achieve. I followed the code Guil used exactly. But I'm not getting that effect. I still don't understand how to post images otherwise I would send you an image of the results I'm getting. But the results you have up top, that's exactly how it's supposed to look like in the video, but for some odd reason I'm getting a black L which isn't bold or blue and irregular margin. As you can see from the code I pasted above. I'm not sure what's wrong and as Guil said pseudo-elements and pseudo-classes have excellent browser support.

I also entered this in code pen and I'm getting the same thing as on my laptop browser. I'm using firefox.

No that's exactly what I want. But honestly it isn't happening. Can you please explain to me how to post images. I read the markdown cheatsheet but I still don't get it.

oh, I C. You can't upload the image directly from your computer?

Well thats your code I'm using so you got it right.

I posted the image using dropbox, it takes a bit of editing but ill try to explain it here.

Here is the link generated by dropbox for the image.

https://www.dropbox.com/s/i8eylka2yj5odp2/Lorem-img.png?dl=0

and here is the code edited so i can insert it (removed text from beginning and end)

dropbox.com/s/i8eylka2yj5odp2/Lorem-img.png

here is the code i wrapped it in.

![alt text](https://dl.YOUR IMAGE CODE GOES HERE "Title")

so the end result is

![alt text](https://dl.dropbox.com/s/i8eylka2yj5odp2/Lorem-img.png "Title")

Hope this helps.

Hope this works

And this is when I use the same code as Guil

Yes you're right it works in safari. It seems it's only in firefox it's not working. Any idea why? I thought firefox should have top notch capabilities? for example most of the things that don't render properly in safari and chrome works perfectly in firefox. This is new. Anyway I guess it's not a problem with the code, just the browser. Well thanks guys for your patience and help. You guys rock.

No, unfortunately it's not the font. I tried 'Open Sans' and 'Gill Sans'. same thing in firefox. but works fine in safari and chrome.. Thanks again buddy. By the way one more thing, could you ask around and see if anyone else is having the same issue with the exact code on their firefox? Thanks.

Hi Jason, thanks for your help man. This was really helpful. You rock dude. Thanks also for showing me the work around. Sometimes because we're new to this I guess we don't use our heads enough. Because this grouping technique was thought to us a few lessons back. Thanks again dude.

sam

I should read these questions more often. I struggled with this exact same issue for about 15 minutes trying to figure out what I was doing wrong. Then I come here and see all you nice folks have got it figured out.

Yes dude. The treehouse forum is freaking awesome, not only do you get a bunch of masters to help you with a problem, but also others who have similar problems who have figured it out to help you, and what's even more awesome, you don't have to wait a day or two, you get a response almost immediately dude. freaking awesome. treehouse. seriously. Most helpful forum I've ever been in. I didn't particularly like forums before, now I'm beginning to.

It really is a pretty cool learning experience. I just wish that the instructors would pause a bit in the videos before switching over to the browser window. It would make it easier to follow along.

Just curious but what is China like?

Well that's not really necessary since you can download the project files. I always do, I don't copy what's in it but if there is something I don't get the first time I can go over it slowly in the files, plus you can download the videos and watch them as many times as you like you can also pause. I think it's cool. What I would like is if they did a better job at verbally explaining how some of the concepts work, instead of simply showing. It's always good to see but sometimes you don't always understand what you see and because of that can't use it properly, because you don't get how to use it, or when is it best to use it. You get what I mean? The tutor Nick Petite does a very good job of explaining the concept verbally first then showing you how it works. Some of the others just show you then do a very poor job of explaining how it actually works. That sucks.

I had to fix it with the following code to help it to work in Firefox. I always use Chrome, but I watch Treehouse in Chrome along with all my other open tabs, and preview the code from Dreamweaver, and in Firefox Browser, and have noticed a few bugs that pop up now and then in these tutorials.

/* Pseudo-elements */
.intro::first-line {
    color: royalblue;
    font-weight: bold;
    font-size: 32px;
}

.intro::first-letter {
    float: left;
    margin: 10px 10px 0 0;
    padding: 5px 10px;
    background: #e0e0e0;
    color: royalblue;
    font-weight: bold;
    font-size: 100px;
    line-height: 1;
}