html code works in Chrome and IE9 but not IE8

Question

The code at the link below displays fine in Google Chrome and IE9. It displays terrible in IE8. Any ideas for how to make it display correctly in IE8? I would like to keep it as a 3-column layout with a fixed middle column and the sides fluid/liquid/flexible and also fill the vertical space to 100% full height of the web browser.

http://jsfiddle.net/STVinMP/eZ7Nb/

<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>title here</title>
<style type="text/css">

.header {
display: table;
width: 100%;
height:100%;
text-align:center;
}

.header > div {
display: table-cell;
vertical-align:top;
}
.col {
width:20%;
}

#rightcol {
width:10%;
background-image:url('http://quetico.info/images/topo.png');
}
#leftcol {
width:10%;
background-image:url('http://quetico.info/left.jpg');
-moz-background-size:100% 100%;
-webkit-background-size:100% 100%;
background-size:100% 100%;
}
#midcol {
background:#d0eadd;
/*  ffff8b;  */
padding-top:55px;
}
</style>
</head>
<body>
<div class="header container">

<div id="leftcol" title="portage photo by Hans Solo"></div>

<div id="midcol" class="col col-2">

<div id="divLeftInd">some text here</div><!-- ######## end of divLeftInd ##### -->

</div><!-- ####### END OF DIV FOR midcol -->
<div id="rightcol"></div>

</div><!-- ####### END OF DIV FOR header container -->
</body>
</html>

Man did you just ask a loaded question :). I suggest you look up the "CSS tricks" for IE 8. You can also use http://caniuse.com to check browser compatibility with specific CSS/JS/HTML. — Jasper, Dec 17 '13 at 22:46
None of these work in IE8 -moz-background-size:100% 100%; -webkit-background-size:100% 100%; background-size:100% 100%; - so do something else using either conditional ie css or another solution such as modernizer etc. — Christina, Dec 17 '13 at 22:46
I can't really see the difference between browsers in the fiddle. Can you check to see if the code was copied over correctly? — Lloyd Banks, Dec 17 '13 at 22:48
Sorry to throw everyone off with the image re-sizing code, I should have removed that code when I posted the bare minimum code. The problem is that in IE8 the middle column displays next to but below the first column and the same with the third column, like this: first column here first column here first column he second column here second column here second column here third column here third column here third column here`code` — user1218122, Dec 18 '13 at 13:39
I can't seem to make the code display correctly, but the first column fills, then the middle column fills in the middle but below the first column, same with the third column — user1218122, Dec 18 '13 at 13:46

score 0 · Answer 1 · answered Dec 17 '13 at 22:47

0

i think that background-size not supported in ie 8

answered Dec 17 '13 at 22:47

oded

121
2

Do you have any supporting documentation to back up this claim? – rgettman Dec 17 '13 at 23:27
i found this: http://stackoverflow.com/questions/11200887/background-image-size-is-not-working-in-ie-8. i hope its helpful – oded Dec 17 '13 at 23:33

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

0

You can try with sizingMethod attribute of filter property as proposed in this answer

edited May 23 '17 at 12:11

Community

1
1

answered Dec 17 '13 at 22:57

Migio B

405
1
6
22

score 0 · Answer 3 · answered Dec 17 '13 at 23:02

If I am clear on what your goal is I think this will work.

<html>
    <body style="margin:0px; padding:0px;">
        <div style="height:100%; width:100%; margin:0px; padding:0px; background-color:#333;">
            <div style="width:80%; min-width:960px; margin-left:auto; margin-right:auto; background-color:#fff" height:100%;>
                <p>info here</p>
            </div>
        </div>
    </body>
</html>

html code works in Chrome and IE9 but not IE8

3 Answers3