- Problem: IE doesn't center block-level elements which have left/right margins both set to 'auto', which is the standards-compliant way to do it
- Solution: Use the fact that IE incorrectly applies 'text-align' to block-level elements
*/
body{
/*N.B. Keep this here, regardless of whether it's the same in the main stylesheet*/
/*Remove it if the left or right margin for div.pagewrapper in the main stylesheet is set to anything except 'auto' */
text-align:center;
}
/*
2) IE quirks mode box-model
- Problem: 'width' includes 'border' and 'padding'
- Solution: increase 'width' to include 'border' and 'padding'
3) Transparent background png
- Problem: IE doesn't handle PNG background transparency
- Solution: From http://www.daltonlp.com/daltonlp.cgi?item_type=1&item_id=217 (n.b. Image must be 10x2 or links don't work! See pngfix.js for
![]()
fix)
4) Outset/inset borders appear ridged
- Problem: IE's display of inset/outset border styles looks very similar to ridge/groove
- Solution: fake the outset effect with solid borders
*/
div#pagewrapper{
border-top:10px solid rgb(159,191,255);
border-left:10px solid rgb(159,191,255);
border-bottom:10px solid rgb(45,90,179);
border-right:10px solid rgb(45,90,179);
/* This must be the width from the main stylesheet PLUS the left and right border and padding */
width:820px;
/** N.B. THE PATH TO THE SRC IMAGE MUST BE RELATIVE TO THE HTML DOCUMENT, NOT THIS STYLESHEET! **/
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='http://www.geocities.com/petew_rtw/styles/graphics/blue75-1x1.png');
}
div#head{
/* This must be the width from the main stylesheet PLUS the left and right border and padding */
width:800px;
}
div#navigation{
/* This must be the width from the main stylesheet PLUS the left and right border and padding */
width:250px;
}
div#content{
/* This must be the width from the main stylesheet PLUS the left and right border and padding */
width:400px;
}
div#ads{
/* This must be the width from the main stylesheet PLUS the left and right border and padding */
width:150px;
}
div#foot{
/* This must be the width from the main stylesheet PLUS the left and right border and padding */
width:800px;
}
/** CLASSES FOR TEST PURPOSES **/
div.ieoverride{
margin:5px 0;
border:5px solid #000;
background-color:#fff;
color:#00f;
}