Browser not picking CSS class

Question

I have following HTML:

            <div id="geo" class="myright">
                <img class="rounded-extra" src="images/mapa-bhcom.jpg" width="100%" height="100%"  >

                <br/>
                <br/>
                <br/>

                <h3>BHcom</h3>
                <p style="color: #858585; margin-top: -10px;">Ne dozvolite da Vam promaknu najbitnije informacije!</p>

                <ul class="connect">
                    <li class="email">
                        <a href="mailto:info@pagescroller.com">Pošaljite e-mail direktno</a>
                    </li>
                    <li class = "twitter">
                        <a href="http://twitter.com/remacez" target="_blank">Pratite nas na Twitteru</a>
                    </li>
                </ul>

            </div>

And I have this CSS in my one and only CSS file imported in html:

#geo .connect .email{
    background: transparent url('../images/icon_mail.png') no-repeat 0 0;
}

#geo .connect .twitter{
    background: transparent url('../images/icon_twitter.png') no-repeat 0 0;
}

#geo .connect a{
    display: block;
    text-decoration: none;
    padding: 0 0 2px 29px;
    margin: 10px 0 0;
    font-weight: normal;
    font-size: 12px;
    color: #666;
}

#geo .connect a:hover{
    color: #333;
    text-decoration: underline;
}

However, neither Firefox or Chrome pick up my styles related to email above. The CSS selector for twitter is just fine. What am I missing?

Answer 1

Remove the background: transparent property from the background property. Chrome picks this up weirdly and makes it 100% transparent so the image will be there but not displayed.

background-image:url(../images/whatever.jpg) no-repeat;

This will work with every browser for background transparency if you need it and do not want the child content effected.

div {
 -khtml-opacity:.50; 
 -moz-opacity:.50; 
 -ms-filter:"alpha(opacity=50)";
  filter:alpha(opacity=50);
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
  opacity:.50; 
}

If you don't want transparency to affect the entire container and its children, check this workaround. You must have an absolutely positioned child with a relatively positioned parent.
You can check a demo at http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/