How to override inline CSS (specifically a div with certain class) with external CSS?

Question

I'm trying to fix an alignment issue that's caused by a row of social media share buttons, specifically the code generated by the Google+ button. I didn't set this site up and I'm not sure how the button was implemented, only know that it was part of an AddThis plugin or something.

The Google+ button seems to automatically generate a div with inline CSS styling:

<div class="google_plusone_iframe_widget" style="width:90px;height:25px;">

I need to get rid of the width and height, but how can I override it externally? I've tried the following but it didn't work:

div.google_plusone_iframe_widget[style] {width:auto!important; height:auto!important;}

Does anyone know how I can do that? Thank you in advance! Here is the page for reference, I am referring to the top left social media buttons:

http://www.canadianoutback.com/events/crime_investigators.php

Ricky Ruiz · Accepted Answer · 2016-06-30 21:26:10Z

2

Your CSS selector should be:

.google_plusone_iframe_widget {width:auto !important; height:auto !important;}

Remove that [style] attribute in your selector, and there's no need to specify the div tag.

edited Jun 30, 2016 at 21:26

answered Jun 30, 2016 at 16:36

Ricky Ruiz

27k7 gold badges49 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Cindy Over a year ago

Thanks .. I've tried this before but it still doesn't work, because then this code just gets overwritten by the inline CSS that gets auto-generated. And I did notice the typo (missing T at the end), still does not work.

Cindy Over a year ago

Yes, I know, that's the point. That's what I am trying to do. I can't just delete the [style] attribute because that code is auto-generated inline by the AddThis Google+ social media button. I am trying to get rid of the width and height it autogenerates through using external CSS to override it.

Ricky Ruiz Over a year ago

I was refering to [style] in your selector.

Ricky Ruiz Over a year ago

If you're not planning on changing that button later on, you can temporarily fix your problem with .addthis_button_google_plusone { width: 24px; height: 16px; overflow: hidden; }

Cindy Over a year ago

That's what I thought you meant .. but yes I tried removing [style] selector and it did not work .. also tried your other temporary fix but that did not work either :(

|

vignesh · Accepted Answer · 2016-06-30 16:32:31Z

1

Try to add this code #leftNav .addthis_toolbox .google_plusone_iframe_widget {width:auto!important; height:auto!important;} to make it.

answered Jun 30, 2016 at 16:32

vignesh

1,0216 silver badges14 bronze badges

1 Comment

Cindy Over a year ago

Thanks .. I just tried it but unfortunately still not working :(

vignesh · Accepted Answer · 2016-06-30 16:40:01Z

1

Could please try this once #leftNav a.addthis_button_google_plusone .google_plusone_iframe_widget[style] {width:auto!important; height:auto!important;}

answered Jun 30, 2016 at 16:40

vignesh

1,0216 silver badges14 bronze badges

1 Comment

Cindy Over a year ago

Thanks again .. still no luck however :(

vignesh · Accepted Answer · 2016-06-30 16:50:59Z

1

Please do try with this

 #leftNav a.addthis_button_google_plusone.at300b .google_plusone_iframe_widget {
    width: auto !important;
    height: auto !important;
}

answered Jun 30, 2016 at 16:50

vignesh

1,0216 silver badges14 bronze badges

Comments

Mani · Accepted Answer · 2016-06-30 17:40:15Z

1

If it is inside iframe we can't apply any style or script for it.

answered Jun 30, 2016 at 17:40

Mani

2,6552 gold badges23 silver badges44 bronze badges

Collectives™ on Stack Overflow

How to override inline CSS (specifically a div with certain class) with external CSS?

5 Answers 5

11 Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

11 Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related