Solved

CSS - override inline style

Posted on 2013-01-19
11
1,012 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
  • 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
Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

 
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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

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.
This article discusses how to create an extensible mechanism for linked drop downs.
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

806 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