CSS and IE 8 and 7

Question

I have this site here

and it looks fine on Chrome, Firefox, IE 9, iPhone and iPad.

How ever in IE 8 and 7 everything appears to be crunched in the middle....does anyone know why this is happening?

Here is the code of the bit that is getting crunched in

.site {
    box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
    margin: 48px auto;
    max-width: 960px;
    overflow: hidden;
    padding: 0 40px;
}

<div class="hfeed site" id="page">

Have you looked through [caniuse](http://caniuse.com/#search=max-width)? — brbcoding, Mar 20 '13 at 14:38
ie7/ie8 do not support `box-shadow`, treat it as an unknown/error, and kill the rest of the css block. put it at the END of the block so at least the other 4 directives can be applied. — Marc B, Mar 20 '13 at 14:38

Axel · Accepted Answer · 2013-03-20T14:48:26.417

1

This really is more of a visual issue, since you are applying a different colored background in ie.css

Try doing this in ie.css:

body {
   background: #000;
}

This should make it appear correct.

edited Mar 20 '13 at 14:48

answered Mar 20 '13 at 14:40

Axel

10,732
2
30
43

score 0 · Answer 2 · edited May 23 '17 at 12:28

0

I think you may need to target different versions of IE with different approaches of CSS. You are using code which is not available in older versions of the browsers.

More details here How does one target IE7 and IE8 with valid CSS?

edited May 23 '17 at 12:28

Community

1
1

answered Mar 20 '13 at 14:39

Dave

8,163
11
67
103

score 0 · Answer 3 · answered Mar 20 '13 at 14:42

0

go to the body tag and a black background will be fine in ie 7 I tested here face value.

answered Mar 20 '13 at 14:42

CSS and IE 8 and 7

3 Answers3