Why is the page background-color not displaying in between my divs in IE and Opera?

Question!

It's even IE 9, so that surprised me. Anyway, if you view http://www.ethoma.com/testhome.php on Firefox/Chrome you can see the general look I am going for.

For some reason a few features are missing on IE and Opera:

  1. The gray space in between the post "islands" is white, for reasons beyond me.
  2. The shadows on the islands are missing (and if you view my CSS in Firebug, you can see that I was very mindful of cross-browser issues!).
  3. the rounded corners are missing. I know this is CSS3, but shouldn't there be support, since I have modern browsers.

Also, if it turns out these issues (specifically the rounded corners) are impossible without more effort than just CSS, can you link me an article on doing it the hard way please?

The biggest thing though is that I first take care of that stupid white space in between islands.

Thanks for any answers/views!
(I am sorry if anyone feels this post isn't up to stackoverflow quality, but I did my best -- I am rather alarmed that the gray space issue popped up)



Answers

Well, on your test page, you've got a JavaScript error "generatePharse() Undefined". The

By : Dawson


The reason for the white background is because in your CSS you set:

.hhshomebody {
    background-color: #FFFFFF; /* DELETE THIS */
    min-height: 75%;
    width: 100%;
}

If you delete the background-color from that rule, your background will be fixed in both IE and Opera.

The issue in IE9 is due to compatibility mode, which switches the browser into IE7 standards mode. Before IE9 box-shadow and border-radius are not supported, which is why you would not have seen them. To turn it off click the little torn paper icon beside the refresh icon to make it go gray. Once in IE9 standards mode the problems you described will be fixed.

By : tw16


This video can help you solving your question :)
By: admin