CODEWITHSUNDEEP
css
Rick Smith
Rick Smith

Reputation: 1241

Can not figure out why this CSS Isn't working. I'm sure it's a simple mistake

I'm trying to take away a white border that is appearing from behind an image on my sidebar. I can't figure out what is causing the white border. I thought it was the padding, and then I thought it was the border. If you visit our home page (http://noahsdad.com/) and look on the side bar under the "new normal" picture you will see a "Reece's Rainbow" image. I'm trying to remove that white around the image. I pasted in the code below, but it's not doing anything. Any thoughts as to what I'm doing wrong?

Thanks.

#text-23 { background: none}

Upvotes: 0

Views: 91

Answers (4)

CBRRacer
CBRRacer

Reputation: 4659

the reason it's not working is the background: none is never getting to the img which has the background set on it (backgrounds don't cascade down they exist in the element and you can have multiple elements layered on top of each other much like a painting. Which has the effect of the background cascading)

#text-23 img { background: none; }

that should resolve your problems. I am assuming that when you call the class textwidget you still want it to append the white background, just not for this instance. So if you set the above it will cascade properly with the correct specificity while leaving the rest of your page alone.

This can also be done by

#text-23 .textwidget img { background: none; }

but that level of specificity is not required. However if you try to just do:

.textwidget img { background: none; }

this will override all of the instances where the background is set on an image in the textwidget container.

Upvotes: 3

Zeeshan S.
Zeeshan S.

Reputation: 2091

Go to your style.css file and search for .textwidget img and change the background-color property to none. It is currently set to #FFFFFF which is the hex color code for white and is resulting in the white border or background (precisely).

.textwidget img {
    background-color: none;
}

Upvotes: 0

Ben
Ben

Reputation: 13635

This seems to be the conflicting CSS class.

.textwidget img {
  background: white;
  padding: 5px;
  max-width: 290px;
}

If you want to debug css you should really look into Firebug(a plugin for Firefox) or Opera and use builtin dragonfly These allow you to rightclick on your HTML page and inspect it.

Upvotes: 0

phihag
phihag

Reputation: 287835

You have added the white border yourself by setting the following in line 884 of style.css:

.textwidget img {
    background: #fff;
    padding: 5px;
    max-width: 290px;   
}

Simply remove the background declaration. If you only want to remove this instance of a white border, add the following rule:

#text-23 .textwidget img {
    background: none;
}

Upvotes: 0

Related Questions