开发者

100% parent div width in IE compatibility view

开发者 https://www.devze.com 2023-03-19 15:55 出处:网络
I am having an issue with IE compatibility view. I have to account for this because it is required by some of the websites that my company uses unfortunately. I have a bar that is collapsible at the b

I am having an issue with IE compatibility view. I have to account for this because it is required by some of the websites that my company uses unfortunately. I have a bar that is collapsible at the bottom of my screen. It works great in everything but IE's compatibility view and I can't find the culprit. Basically, I am trying to have a parent div automatically resize with the width of it's contents. For some reason, in compatibility view, the parent div show's up at 100% screen width. I don't have any styling that would imply that it should be 100%, but it does it anyway. I'll post my code below. Please let me know if you can offer any suggestions! Thanks,

Phil

<style>
#bar_wrapper{
    position: fixed; 
    bottom: 0px; 
    left: 0px;   
}
#bottom_bar{
    padding: 5px; 
    height: 90px;   
    background: url(scoreboards/stats_bar/images/bcktool.gif);
    z-index: 9999; 
     -moz-border-radius-topleft: 8px;
    -khtml-border-radius-topleft: 8px;
    -webkit-border-top-left-radius: 8px;
    -moz-border-radius-topright: 8px;
    -khtml-border-radius-topright: 8px;
    -webkit-border-top-right-radius: 8px;
    -moz-box-shadow: 0px 1px 10px #666, inset 1px 1px 0px #a4a4a4;
  -khtml-box-shadow: 0px 1px 10px #666;
开发者_运维问答  -webkit-box-shadow: 0px 1px 10px #666;
  /* CSS3 end */
    border-top: 1px solid #eee;
  border-left: 1px solid #eee; 
  border-right: 1px solid #eee;
}
#left_side{
    float: left;    
}
#right_side{
    float: right;   
}
#minimize{
    right: 0px; 
    top: 0px;   
}
#minimize a{
    text-decoration: none;  
}
.section{
    background-color: #e4e4e4;  
    padding: 5px;
    height: 82px;
    border-right: 1px solid #a4a4a4;
    float: left;
    text-align: center;
}
.heading{
    font-weight: bold;  
}
table{
    text-align: left;   
}
</style>


<div id="bar_wrapper" class="clear">
    <div id="bottom_bar" style="display: none;">
<div id="left_side">
        <div class="section" style="text-align: center;">
            <span class='heading'>PR. to UW. Submit AVG: </span> <br />
            <span id="pr_to_uw"></span>&nbsp;day(s)
        </div>
    </div>
    <div id="right_side" style="height: 90px;">
        <br />
        <div id="up_arrow" style="display: none;"></div>
        <div id="minimize"> 
<a href="javascript:minimize();">img</a>
        </div>
</div>
</div>
</div>
0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号