CODEWITHSUNDEEP
htmlcssinternet-explorer
321
321

Reputation: 667

IE cancelling out CSS classes

My Site Here has a Twitter column in the right-nav, but I've changed the classes using the '.twtr-tweet' for the white bg of the speech bubbles which works fine in other browsers i.e. Chrome, but not IE (Testing in IE9).

If someone could take a look using an inspector and check with the CSS to help diagnose it'd be really great as it's live and looking real bad:

/* Twitter */
#twtr-widget-1 .twtr-new-results, #twtr-widget-1 .twtr-results-inner, #twtr-widget-1 .twtr-timeline {background:transparent !important;}

.twtr-tweet {
    background-color: #Ffffff !important;
    border-radius: 5px;
    box-shadow: 0 0 6px #777777;
    display: inline-block;
    padding: 10px 18px;
    position: relative;
    vertical-align: top;float: left; !important;
    width:60%;}

.twtr-tweet::before {
    background-color: #Ffffff;
    content: "\00a0";
    display: block;
    height: 16px;
    position: absolute;
    top: 11px;
    transform:             rotate( 29deg ) skew( -35deg );
        -moz-transform:    rotate( 29deg ) skew( -35deg );
        -ms-transform:     rotate( 29deg ) skew( -35deg );
        -o-transform:      rotate( 29deg ) skew( -35deg );
        -webkit-transform: rotate( 29deg ) skew( -35deg );
    width:  20px;
}

The .twtr-tweet isn't registering properly in IE..

Many thanks, hoping someone can help!

Upvotes: 1

Views: 111

Answers (3)

PeteGO
PeteGO

Reputation: 5791

Have you tried doing:

#twtr-widget-1 .twtr-tweet {
    background-color: #FFFFFF !important;
}

Upvotes: 1

HandiworkNYC.com
HandiworkNYC.com

Reputation: 11104

I only scanned your code (it's too much to go through)... but this might help you:

<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie"><![endif]-->
<!--[if IE 7 ]><html class="ie7 ie"><![endif]--> 
<!--[if IE 8 ]><html class="ie8 ie"><![endif]--> 
<!--[if (IE 9)|(gt IE 9)|!(IE)]><!--><html><!--<![endif]-->

Putting that in your head, you will have parent classes to easily target IE. If you see that one of your styles is being overwritten in IE, simply do:

.ie7 .your-overwritten-selector {property: 1 !important}

It will probably not get to the root of your problem (most cross browser issues can be handled without any conditional code...) but in some cases it's necessary.

Upvotes: 1

Oriol
Oriol

Reputation: 288130

That's because you have

#twtr-widget-1 .twtr-tweet{
    background:none transparent scroll repeat 0% 0%;
}

in index.html.

And it seems that on IE it overrides

.twtr-tweet {
    background-color: #FFFFFF !important;
}

in Structure.css (line 129)

Upvotes: 1

Related Questions