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
Scott Dietze
Courses Plus Student 2,252 Pointspseudo-element text color with white background.
I am having some problems with the pseudo-elements. the video asks for white background-color of a drop box and a blue text. well I have the correct format just like it wants but I cannot see my blue text inside that white padding. I've set my computer back to faculty settings and its only when I have the first letter pseudo-element written in. Please advise me on what is going on with the program.
9 Answers
lloan alas
17,774 PointsI'm so glad you figured it out! :D! Great work!
Scott Dietze
Courses Plus Student 2,252 PointsI still want to know why when its floating to the left it screws up. any reason you'd know why its like that? it will drive me nuts until i know why its doing something wrong
lloan alas
17,774 PointsWeird - works on mine after I added float: left --> http://jsfiddle.net/lloanalas/By3RA/4/
lloan alas
17,774 PointsDisregard that last post - I figured what you mean now - It's a problem with firefox - I was reading this - Not the exact same thing - but it's close - I'll try to read up on it and see what I can figure out if no one else can come up with a solution :D -> http://stackoverflow.com/questions/7548255/is-there-a-css-workaround-for-firefox-bug-inline-block-first-letter-with-cha
Scott Dietze
Courses Plus Student 2,252 Pointsso, its not me its firefox that has a problem and I just don't need to float things in first-letter then.
Alex Murphy
8,622 PointsHey Scott,
Could you tell us what code challenge your working on and could you past the code from the challenge so we can take a look?
Have you compared your css with the final css? Doing that you may be able to find what is going on.
Scott Dietze
Courses Plus Student 2,252 PointsIts in the advanced selectors under pseudo-elements video. I download the project files and followed the step by step and when I get to the first-letter that is when the blue text on white background doesn't show up. Just a white box is all I get.
Alex Murphy
8,622 PointsYou can compare your written css with the final completed css to see whats going on.
Guil Hernandez
Treehouse TeacherCan you please post the code you used in the code challenge? Thanks!
lloan alas
17,774 PointsAre you talking about the More Pseudo-classes set of challenges where you have to set the background-color for :root to #bdd4de?
Scott Dietze
Courses Plus Student 2,252 Points.intro:first-line { font-weight: bold; color: #77c4d3; }
.intro:first-letter { font-size: 3em; padding: 0 10px; margin: 10px 15px 0 0; background-color: #FFF; float: left; }
lloan alas
17,774 PointsNothing in that code represents a blue background. #FFF stands for white - or is this the original without your edits?
Scott Dietze
Courses Plus Student 2,252 PointsI have even copied from the finished part of the project file and still get no blue text in the white padding box. I am using Mozilla Firefox as my source.
Scott Dietze
Courses Plus Student 2,252 PointsIt's a white background with a blue text form. not the other way around. In the first line there is a color of blue and then continues onto first letter with a padding of a white box and should be a visible blue letter 'L'.
lloan alas
17,774 PointsHonestly not sure why it would give you that problem. Have you tried it out on chrome? Is this for a personal project or testing for knowledge - Or is it an actual exercise? I remember seeing this - but it was a video. Do me a favor and post the url to the exercise yea? Maybe I can be of more help that way. Also, if you ever need any more help add me on Skype ^-^ -> lloanalas@live.com
Scott Dietze
Courses Plus Student 2,252 PointsI tried chrome today and it works there just not inside firefox or i.e. Not really sure why it did there and not the other two. I am just trying to learn this stuff for my own use. I hope later on to do this stuff on my own time.
lloan alas
17,774 PointsSo I did this on JSFiddle - is this what you are trying to do with first-line?
Scott Dietze
Courses Plus Student 2,252 PointsYes that is what I am trying to do. But instead of pink it needs to be white then make the the 'T' blue
this is what is really should look like. I've not seen the code (form label:first-letter) written out. only .intro: first-letter { font-size: 3em; padding: 0 10px; margin: 10px 15px 0 0; background-color: #FFF; float: left;} in the video.
lloan alas
17,774 PointsI don't really like pink :D - Just couldn't think of another color ^-^. But that looks much nicer :D! Hopefully that helps though - were you able to manage to pass the challenge?
Scott Dietze
Courses Plus Student 2,252 Pointsthough inside the video that teamtreehouse uses it doesn't have the form label: first-letter and theirs worked without a hitch. Why is that?
lloan alas
17,774 PointsIt should work with your code too - Look at it here in action.
Scott Dietze
Courses Plus Student 2,252 Pointshttp://jsfiddle.net/By3RA/ instead of the blue background please make it white with a blue letter. only change the colors nothing else.
Scott Dietze
Courses Plus Student 2,252 PointsI went line by line and ran the program and it works right up to float: left; then i get a white box and no blue letter.
lloan alas
17,774 PointsThe fiddle you posted is the same - Did you mean to post your own code?
Scott Dietze
Courses Plus Student 2,252 Pointsthe problem i found out is the float left part.
James Barnett
39,199 PointsJames Barnett
39,199 PointsPlease edit your original post with the code of what you have tried so far.