Why is the footer not showing in IE10 and IE9?
My page works fine on IE11 and in Google Chrome, but when I try to open it with IE10 and IE9, it doesn't show, it looks like it was cut and the scrolling bar doesn't show either, If someone can tell me that i am doing wrong, i would be glad.
Thanks in advance.
PS: Sorry for my ugly code
$(function(){
//Internet Explorer | if | 9-11
function isIE () {
var myNav = navigator.userAgent.toLowerCase();
return (myNav.indexOf('msie') != -1) ? parseInt(myNav.split('msie')[1]) : false;
}
var ua = window.navigator.userAgent;
if (isIE () == 9) {
document.getElementById("rightcorner").style.marginTop = "3px";
document.getElementById("leftcorner").style.marginTop = "3px";
document.getElementById("leftcorner").style.height = "21px";
document.getElementById("rightcorner").style.height = "21px";
document.getElementsByClassName("th_line")[0].style.height = "21px";
document.getElementById("thead").style.marginTop = "-29px";
document.getElementById("thead").style.marginLeft = "16px";
document.getElementById("thead").style.marginRight = "8px";
document.getElementById("cabecaixa").style.height = "20px";
} else if (isIE () == 10){
document.getElementById("rightcorner").style.marginTop = "3px";
document.getElementById("leftcorner").style.marginTop = "3px";
document.getElementById("leftcorner").style.height = "21px";
document.getElementById("rightcorner").style.height = "21px";
document.getElementsByClassName("th_line")[0].style.height = "19px";
document.getElementById("thead").style.marginTop = "-29px";
document.getElementById("thead").style.marginLeft = "14px";
document.getElementById("thead").style.marginRight = "22px";
document.getElementById("cabecaixa").style.height = "20px";
} else if (ua.indexOf("Trident/7.0") > 0) {
document.getElementById("rightcorner").style.marginTop = "3px";
document.getElementById("leftcorner").style.marginTop = "3px";
document.getElementById("leftcorner").style.height = "21px";
document.getElementById("rightcorner").style.height = "21px";
document.getElementsByClassName("th_line")[0].style.height = "19px";
document.getElementById("thead").style.marginTop = "-29px";
document.getElementById("thead").style.marginLeft = "14px";
document.getElementById("thead").style.marginRight = "21px";
document.getElementById("cabecaixa").style.height = "16px";
$("body").css("overflow", "hidden");
}else{
document.getElementById("rightcorner").style.marginTop = "3px";
document.getElementById("leftcorner").style.marginTop = "3px";
document.getElementById("leftcorner").style.height = "21px";
document.getElementById("rightcorner").style.height = "21px";
document.getElementsByClassName("th_line")[0].style.height = "19.5px";
document.getElementById("thead").style.marginTop = "-29px";
document.getElementById("thead").style.marginLeft = "14px";
document.getElementById("thead").style.marginRight = "22px";
document.getElementById("cabecaixa").style.height = "20px";
$("body").css("overflow", "hidden");
}
//Internet Explorer | if | 9-11
$( "#btfirst" ).button({
icons: {
primary: "ui-icon-seek-first"
},
text: false
});
$("#btfirst").css({'height': '1.2em','margin':'1px'});
$( "#btprev" ).button({
icons: {
primary: "ui-icon-seek-prev"
},
text: false
});
$("#btprev").css({'height': '1.2em','margin':'1px'});
$( "#btnext" ).button({
icons: {
primary: "ui-icon-seek-next"
},
text: false
});
$("#btnext").css({'height': '1.2em','margin':'1px'});
$( "#btlast" ).button({
icons: {
primary: "ui-icon-seek-end"
},
text: false
});
$("#btlast").css({'height': '1.2em','margin':'1px'});
});
@font-face
{
font-family: 'agroverdanab';
src: url('./fonts/agroverdanab.eot');
src: local('agroverdanab'), url('./fonts/agroverdanab.ttf') format('truetype');
font-family: 'agroverdana';
src: url('./fonts/agroverdana.eot');
src: local('agroverdana'), url('./fonts/agroverdana.ttf') format('truetype');
}
html,body{height:99.3%;margin:0;padding:2px}
#header{border-bottom:1px solid #79B7E7; height:3%;font-family:"agroverdanab";font-size:13px;font-weight:600; margin-bottom:4px; margin-top:2px}
#navdata{}
#navbar{border-bottom:solid 1px #79B7E7;padding:2px}
#navbutton{float:right;}
#msgbar{border:solid 1px #79B7E7;border-top:solid 1px #79B7E7; height:3%; }
#footer{border-top:0;height:5%;position:relative;} //<--THE FOOTER :)
table{table-layout:fixed;width:100%;height:60%}
table thead tr{top:expression(offsetParent.scrollTop -2);background-color:#9BC2E6;font-family:"agroverdana";font-size:12px;overflow-y:hidden}
table tbody tr.color{background-color:#DDEBF7;font-family:"agroverdana";font-size:12px}
table tbody tr{background-color:#FFFFFF;font-family:"agroverdana";font-size:12px;border:0}
body {overflow-y: hidden}
.colgroup1{height: 1px; background-color:#9BC2E6;font-family:"agroverdana";font-size:12px;text-align: center;}
.th_line{margin-left:-10px; width: 300em;}
#thead{position:fixed}
#table_model{ height: 10px}
#rightcorner{width: 30px; right: 7px; margin-left: -2px; background-color: #9BC2E6; position:fixed}
#leftcorner{width: 30px; left: 7px; margin-right: -2px; background-color: #9BC2E6; position:fixed}
#div_main{overflow: hidden; height:100%;display:flex;flex-direction:column; border:1px solid #79B7E7}
#content{height:100%;overflow-y: auto;overflow-x: hidden;border-bottom: 30px;position: relative;flex:1}
#cabecaixa{margin-top: 5px; margin-bottom: 5px; margin-right: -2px; margin-left: -3px; border-top: 1px solid #79B7E7}
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>Central de Controle da Engenharia</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/redmond/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>
<div id="div_main">
<header id="header" style="text-align:center;">Central de Controle da Engenharia</header>
<header id="navbar">
<input type="text" id="vpad-pesq">
<select>
<option>Código</option>
<option>Nome</option>
</select>
<div id="navbutton">
<button id="btfirst"></button>
<button id="btprev"></button>
<button id="btnext"></button>
<button id="btlast"></button>
</div>
<div id="cabecaixa">
<div id="rightcorner"></div>
<div id="leftcorner"></div>
</div>
</header>
<section id="content">
<div id="navdata">
<table style="overflow-y:visible">
<thead id="thead">
<tr>
<th class="th_line">Código</th>
<th class="th_line">Descrição</th>
<th class="th_line">Descrição</th>
<th class="th_line">Descrição</th>
</tr>
</thead>
<tbody>
<tr class="color"><td>Coxa c/ sobrecoxa s/ osso s/ pele</td><td>9.99</td><td>9.99</td><td>9.99</td></tr>
<tr class="color"><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
<tr><td>002</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
<tr class="color"><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
<tr><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
<tr class="color"><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
<tr><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
<tr class="color"><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
<tr><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
<tr class="color"><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
<tr><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
<tr class="color"><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
<tr><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
<tr class="color"><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
<tr><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
<tr class="color"><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
<tr><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
<tr class="color"><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
<tr><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
<tr class="color"><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
<tr><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
<tr class="color"><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
<tr><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
<tr class="color"><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
<tr><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
<tr class="color"><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
<tr><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
<tr class="color"><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
<tr><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
<tr class="color"><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
<tr><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
<tr class="color"><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
<tr><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
<tr class="color"><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
<tr><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
<tr class="color"><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
<tr><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
<tr class="color"><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
<tr><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
<tr class="color"><td>001</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
<tr><td>003</td><td>Coxa c/ sobrecoxa s/ osso s/ pele</td></tr>
</tbody>
</table>
</div>
</section>
<section id="msgbar"></section>
<footer id="footer">Rodapé</footer>
</div>
</body>
</html>
+3
source to share
1 answer
Try to include this in your CSS
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Have a look at HTML5 Shim.
+1
source to share