Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

content: "" is working if is added in html style tag, but not in css file

content: "" is working if is added in html style tag, but not in css file

Problem

Source : http://twitter.github.com/bootstrap/components.html#navbar

To make the little black triangle for the drop down menus, Twitter is using the following CSS:

.caret 
{
    display: inline-block;
    width: 0;
    height: 0;
    vertical-align: top;
    border-top: 4px solid black;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    content: "";
    opacity: 0.3;
    filter: alpha(opacity=30);
}

I tried using but the color is gray. If you are on a Twitter Bootstrap page and remove the content: "" the triangle will be gray as well. If I add the code in HTML style tag

is black as it should be. Why is this happening ?

Update:

The code is the same but when it is in a CSS file the opacity: 0.3 is the one that makes the triangle gray, but still why this is not happening in the HTML style tag?

Problem courtesy of: Marian Petrov

Solution

It doesn't turn grey because you're including

content: "";

into


and the double quotes are interfering. To fix it do


That will work - DEMO

Solution courtesy of: Zoltan Toth

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

content: "" is working if is added in html style tag, but not in css file

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×