9

A js plugin is adding a style that is giving me some headache:

element.style {
     z-index: 100 !important;
}

So i have tried this:

html body div#shell div#shellContent div#bottomPart div#rightCol div.containerBox    
div#embedContainer div#janrainEngageEmbed div.janrainContent div#janrainView   
div.janrainHeader[style] {
    z-index: 1 !important;
}

and still nothing.

Jamie Hutber
  • 26,790
  • 46
  • 179
  • 291
  • may be you should override with javascript – SRN Jul 01 '12 at 11:43
  • ye, i didn't really want to go down the route of JS override. Plus i'd have to listen for when the js becomes activated as the plugin takes a while to load already. humm i was hoping this wasn't the only option even though i thought it was. – Jamie Hutber Jul 01 '12 at 12:39

3 Answers3

12

Contrary to the other answers, it is possible to override inline styles with CSS:

http://css-tricks.com/override-inline-styles-with-css/

I would guess that the extremely long selector might not be hitting the element.

I had a similar z-index issue with the Janrain plugin that was solved by this:

#janrainEngageEmbed > div[style] {
    z-index: 0;
}

In your case, you probably need:

    z-index: 0 !important;
Jeff Clemens
  • 912
  • 9
  • 17
4

The inline style will trump any selectors. Either reset the style yourself in javascript or patch the plugin... it doesn't sound like a particularly well written anyway, to be honest. : )

John Green
  • 13,241
  • 3
  • 29
  • 51
  • 1
    @JosephtheDreamer the inline style has `!important` - check the question – Luca Jul 01 '12 at 11:49
  • js seems the only option, but i'll have to come up with a good solution and somehow listen for when the js becomes active – Jamie Hutber Jul 01 '12 at 12:40
  • @JohnGreen-PageSpike my comment was a reply to Joseph's comment - that he then deleted - about using !important to override the inline style, my point was - can't be done because the plugin is setting the inline style with !important as well. him deleting his own comment, rendered mine meaningless. – Luca Jul 01 '12 at 12:54
3

inline style always override external and internal css, plus the fact that the plugin is using the !important clause (very bad practice!), all together makes it impossible to get it fixed with css only. I reckon you will have to use some custom js to override the plugin settings.

maybe the best way would be to check if you can specify a callback function with the plugin and set the style as you wanted. another answer here suggested to edit the plugin itself, that is cool if you don't plan to ever update it - otherwise you're better off leaving the plugin code as it is, and just adding some bespoke js of your own

Luca
  • 9,259
  • 5
  • 46
  • 59