html - Sprites inside the child of an absolute positioned element disappear in IE7 -
i'm new @ bear me. have absolute positioned box inside relative container , inside box i've 2 other divs, 1 posts , 1 sprites. sprites disappear in ie7 along top (and top) border on "posts." looks like.
<div id="wrapper"> <div id="content"> <div id="left"></div> <div id="right"> <div id="icon"> <a href="#" class="icon" id="email"></a> <a href="#" class="icon" id="twitter"></a> <a href="#" class="icon" id="rss"></a> </div><!--icon--> <div id="posts"> <div class="posts_border"></div> <!--a bunch of other stuff--> <div class="posts_border"></div> </div> </div><!--right--> </div><!--content--> </div> #wrapper{width:900px;margin-top:111px;margin-left:-450px;position:relative;left:50%;} #content{background-color:#f6efc9; position:relative; width:900px;height:965px;} #left{padding-right:10px;width:550px;} #right{position:absolute;top:0;right:20px;width:300px;} #icon{margin:10px 0 0 -8px;top:0;right:20px;} #icon .icon{margin-left:40px;width:50px;height:50px;float:left;} #email{background:url("../images/icon-sprite.png")left 0 top -110px;} #twitter{background:url("../images/icon-sprite.png") left 0 top -55px;} #rss{background:url("../images/icon-sprite.png") left 0 top 3px;} #posts{background:#e3c66e; margin-top:10px;position:absolute;top:66px;} #right .posts_border{height:20px;background-color:#442503;}
http://jsfiddle.net/isherwood/ajwkj/
this seems work in every browser aside ie7.
i had in ie10 changing browser/document mode ie7/ie7 on local document. had problems jsfiddle loading in browser/doc mode. changed following sections
#email { background-image: url("http://placehold.it/32x32"); background-position: 0 -110px; } #twitter { background:url("http://placehold.it/32x32"); background-position:0,-55px; } #rss { background:url("http://placehold.it/32x32"); background-position:0,3px; }
Comments
Post a Comment