CSS oddities: some properties not interpreted

The problem is that on my website http://dev.gratefulhearttherapy.org/, at least 2 css properties are not showing up as expected:

html {
  background: #fff url('images/bg-top-honey-v3.0.jpg') top center repeat-x !important;
}

#bd img {
  margin:开发者_如何学Python 0; 
  padding: 4px; 
  border: solid 1px #D9D9D9;
}

One background image is missing, and pictures don't have the grey border they're supposed to have.

Yesterday night I was messing with 3 things in my code:

1. the css file typography-new2.css,
2. the PHP files elements meta.php, header.php, footer.php, and
3. the Google Analytics code.

I must have broken something but I can't find what. I tried to pass the website and the css through the W3C validators, I scrutinized the code with Chrome inspector, looking for unclosed tags and such, but didn't find anything.

When using the Chrome inspector, to look at the html element and the img's, the missing css seems absent - not only overridden, but absent.

Any help would be appreciated! With much gratitude.

---

The issues are in your stylesheet: typography-new2.css

Background not showing:

At the very top you have referenced img before html only separated by comments. So the html rule is actually being interpreted as img html {:

img /* REMOVE THIS LINE*/

/* @import url('http://dev.gratefulhearttherapy.org/themes/gratefulheart/tabs.css'); */
/* All CSS files above will be loaded from this single document. */

html {
    margin: 0; 
    padding: 0; 
    /* background: #fff; #f9dc91 url(http://dev.gratefulhearttherapy.org/themes/gratefulheart/images/background-sandish-tile.jpg) !important; */ /* #F9D984; */ /* customize_background_color */
    background: #fff url('http://dev.gratefulhearttherapy.org/themes/gratefulheart/images/bg-top-honey-v3.0.jpg') top center repeat-x !important;
}

Pictures missing grey border:

You have a line full of *s outside of the closing comment / right before the rule #bd img which is probably why the rule is not being applied.

/********************************
*********************************
*       $$ GENERAL TYPES 
********************************/
******************************** /* REMOVE THIS LINE */

#bd img {
    margin: 0;
    padding: 4px;
    border: solid 1px #D9D9D9;
}

If you remove the two lines, I think all of your issues should be solved.

---

Your images are not a direct descendent of #bd, I think that is your problem the CSS code is fine. See @150poundsofdonamites response for the other issue.

If this still doesn't produce the desired result try changing html to body.