html - IE behaving completely different for Iframes -
i have iframe
target area display different website inside website. in mozilla , chrome can see desired output in internet explorer sidebar div
located in different manner. here goes html code
<div class="menu_sample top_mar"> <div class="col-sm-3 col-md-2 sidebar"> <ul class="nav nav-sidebar"> <li><span style="color:blue; font-weight:bold;">dashboards</span></li> {% dashboard in dashboards %} <li><a href="{{ dashboard.d_url }}">{{ dashboard.d_name }}</a></li> {% endfor %} </ul> </div> </div> <button class="pushed content" onclick="togglemenu()" style="margin-top:28%;height:4%;"><span id="menu-button"><span class="glyphicon glyphicon-chevron-left" id="glymphi" style="margin-left:24%;"></span></span></button> <div style="margin-left:-1%; margin-top:2.5%; height: 625px;" > <iframe width="100%" height="100%" name="iframe_a" frameborder="0"></iframe> </div>
/* styles go here */ .menu_sample { position: absolute; top: 0; bottom: 0; left: 0; width: 100px; border: solid 1px; transition: transform 0.1s ease-out; } .content { position: absolute; top: 0; bottom: 0; right: 0; left: 0; transition: left 1s ease-out; margin-left: -1.5%; margin-top: 150%; } /*transition*/ .top_mar { margin-top: 25%; } /* on toggle*/ .content.pushed { left: 225px; } .hide { transform:translatex( -100px); }
can me solve compatibility problem. in ie---
in chrome---
i may mistaken, looks me culprit chevron button glyphicon-chevron-left
, , not iframe;
try giving button width, e.g.:
style="margin-top:28%;height:4%;width:20px"
otherwise ie give maximum width, not want.
now prevent ie scrollbar overlapping content:
html { -ms-overflow-style: scrollbar; }
Comments
Post a Comment