I am trying to create a border around an image on the page, and the border works fine in IE8 Normal
mode, but fills to 100% of the outer div in IE8 compatibility
mode, my css is the following:
.page-layout .page-header .page-image
{
float:left;
vertical-align:top;
width:170px;
}
.page-layout .page-header .page-image div,
.page-layout .page-header .page-image img
{
float:left;
}
.page-image-imgtop
{
background-image:url('/Style Library/images/pagecontent-image-top-bg.png');
background-repeat:repeat-x;
height:6px;
float:left;
clear:both;
width:100%;
}
.page-image-imgleft
{
background-image:url('/Style Library/images/pagecontent-image-bg-left.png');
background-repeat:repeat-y;
float:left;
text-align:right;
clear:both;
}
.page-image-imgright
{
margin-left:7px;
padding-right:8px;
background-image:url('/Style Library/images/pagecontent-image-bg-right.png');
background-repeat:repeat-y;
background-position:top right;
float:left;
clear:both;
}
.page-image-imgbottom
{
background-image:url('/Style Library/images/pagecontent-image-bottom-bg.png');
background-repeat:repeat-x;
height:6px;
float:left;
clear:both;
width:100%;
}
And the following HTML:
<div class="page-image">
<div class="page-image-imgleft">
<div class="page-image-imgtop">
<img src="/Style Library/images/pagecontent-image-top-left.png" style="float:left;" />
<img src="/Style Library/images/pagecontent-image-top-right.png" style="float:right" />
</div>
<div class="page-image-imgright">
<img src="MAINIMAGE.jpg" style="border-width:0px;text-align:top;" />
</div>
<div class="page-image-imgbottom">
<img src="/Style Library/images/pagecontent-image-bottom-left.png" style="float:left;" />
<img src="/Style Library/images/pagecontent-image-bottom-right.png" style="float:right" />
</div>
</div>
</div>
