Solved

CSS - override inline style

Posted on 2013-01-19
11
1,021 Views
Last Modified: 2013-01-25
Hey Experts, I am looking at my webpage:

www.mamalennyandtheremedy.com

Check out the facebook box. Facebook changed their crap - so now there is a big ugly border within the border that I defined on the Facebook sidebar.

I'm trying to make it white, but none of these tricks do it:

$(document).ready(function () {
    $(".pluginBoxContainer").css("border-color", "white !important");
}
or 

.pluginBoxContainer 
{
    border-color: white !important;
}

.pluginBoxContainer[style] 
{
    border-color: white !important;
}

Open in new window

Please help!

Maybe the sidebar loads later? Why can't I override this inline style?
0
Comment
Question by:jeffiepoo
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 5
11 Comments
 
LVL 25

Assisted Solution

by:Kyle Hamilton
Kyle Hamilton earned 500 total points
ID: 38796960
It's in an iframe, that is not on your domain, so there is nothing you can do with either css or js.

But you could try this:

.facebookOuter iframe{
border: none;
overflow: hidden;
height: 360px;
width: 357px;
margin: -1px;
}
0
 
LVL 6

Author Comment

by:jeffiepoo
ID: 38796975
Good suggestion. I still get a border on the right of the iFrame though.
0
 
LVL 25

Assisted Solution

by:Kyle Hamilton
Kyle Hamilton earned 500 total points
ID: 38796978
yes. you need to make sure the width is wide enough for that to go away. you could also set overflow:hidden on the containing element.
0
Salesforce Made Easy to Use

On-screen guidance at the moment of need enables you & your employees to focus on the core, you can now boost your adoption rates swiftly and simply with one easy tool.

 
LVL 6

Accepted Solution

by:
jeffiepoo earned 0 total points
ID: 38796985
Ahhh ok. To be clear, I had to reset the iframe's width for the facebook box like so:

<div class="fb-like-box"
        data-width="357"

The css didn't do the trick for the width.
0
 
LVL 6

Author Comment

by:jeffiepoo
ID: 38797107
I've requested that this question be closed as follows:

Accepted answer: 250 points for kozaiwaniec's comment #a38796960
Assisted answer: 250 points for kozaiwaniec's comment #a38796978
Assisted answer: 0 points for jeffiepoo's comment #a38796985

for the following reason:

Thanks.
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38797108
hmm. i provided an answer based on which you made the adjustment.
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38797112
why a close request?
0
 
LVL 6

Author Comment

by:jeffiepoo
ID: 38797124
Only because I accepted my solution as part of the accepted solutions. I gave each of yours 250 points, so you have the full 500 once it's closed. :)
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38797243
sorry, i didn't see that.

cheers.
0
 
LVL 9

Expert Comment

by:user_n
ID: 38798677
Can you make a picture of your site with print screen and point on it which component on the site you are talking for@
0
 
LVL 6

Author Closing Comment

by:jeffiepoo
ID: 38818008
Thanks
0

Featured Post

Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

717 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question