PDA

View Full Version : [SOLVED] My CSS-based box doesn't display the same in IE6-IE9

Code Red
21st April 11, 04:27 PM
Hi,

I've recently started trying to get away from using tables and use divs and CSS instead, but I'm now running into problems. I've been trying to create a content box with an inset title, rounded bottom corners and a drop shadow, this is what I've done so far -

CSS Content Box (http://tinyurl.com/3bspjqq)

It looks fine on Mac Safari, FFox, Camino, PC FFox, Chrome but not in earlier versions of IE - in IE6-7 the drop shadow elements are all over the place, and in IE8 the white background doesn't fill the available space. I know PNGs won't work in IE6, but I have clients who insist their sites be 6 compatible :@ and I at least want the formatting to be right.

Could someone take a look at my code and tell me what I'm doing wrong? Like I say, I'm relatively new to this, so I know there's probably far more efficient ways of doing what I've done. I want to be able to set the box to span 1, 2 or 3 columns in a layout, so the box title and content need to always fill the available width, and the height to expand with the content.


<style>

body {

background-color:#CCCCCC;

}

.iBoxContainer {

float: left;

}

.iBoxTop {

height: 300px;

}

.iBoxFrame {

background-color: #FFFFFF;
float: left;
height: 100%

}

.iBoxCanvas {

margin-left: 5px;
margin-right: 5px;
width: 300px;
float: left;

}

.iBoxHeading {

width: 100%;
height: 32px;
background-image: url(structure/infobox_mid.png);
background-repeat:repeat-x;
margin-top: 5px;

}

.iBoxHeadingLeft {

float: left;

}

.iBoxHeadingLeftCorner {

width: 10px;
height: 32px;
float: left;
background-color: #FFFFFF;
background-image: url(structure/infobox_left.png);
background-repeat:no-repeat;


}

.iBoxHeadingMiddle {

font-family: Arial, Helvetica, sans-serif;
font-size: 22px;
text-align: left;
float: left;
color: #FFFFFF;
padding-top: 4px;

}

.iBoxHeadingRight {

float: right;
height: 32px;
width: 10px;
background-color: #FFFFFF;
background-image: url(structure/infobox_right.png);
background-repeat:no-repeat;

}

.iBoxContent {

text-align: left;
margin-top: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
height: 100%;

}

.iBoxShadowRight {

width: 11px;
float: right;
height: 278px;

}

.iBoxShadowRightTop {

width: 11px;
height: 22px;
background-image: url(structure/drop_shadow_top_right.png);
background-position: bottom;
background-repeat: no-repeat;

}

.iBoxShadowRightBottom {

width: 11px;
background-image: url(structure/drop_shadow_right.png);
background-repeat: repeat-y;
height: 100%;

}



.iBoxBottomLeftWrapper {

width: 34px;
height: 23px;
float: left;

}

.iBoxBottomLeft1 {

width: 12px;
height: 23px;
background-image: url(structure/infobox_content_bottom_left.png);
background-repeat: no-repeat;
float: left;

}

.iBoxBottomLeft2 {

width: 22px;
height: 23px;
background-image: url(structure/drop_shadow_bottom_left.png);
background-position: right;
background-repeat: no-repeat;

}

.iBoxBottomRightWrapper {

height: 23px;
float: left;

}

.iBoxBottomMiddle {

height: 23px;
background-image: url(structure/drop_shadow_bottom.png);
background-repeat: repeat-x;
margin-left: 22px;
margin-right: 22px;



}

.iBoxBottomRight {

float: right;
width: 22px;
height: 23px;
background-image: url(structure/infobox_content_bottom_right.png);
background-position: right;
background-repeat: no-repeat;

}


</style>
<body>


<div class="iBoxContainer"> <!-- contains whole infobox assembly //-->

<div class="iBoxTop"> <!-- top half inc definable content //-->


<div class="iBoxFrame">
<div class="iBoxCanvas"> <!-- definable content area //-->

<div class="iBoxHeading"> <!-- Heading wrapper //-->
<div class="iBoxHeadingLeft">
<div class="iBoxHeadingLeftCorner"></div>
<div class="iBoxHeadingMiddle">Title</div>
</div> <!-- EOF iBoxHeadingLeft //-->

<div class="iBoxHeadingRight"></div>
</div> <!-- EOF iBoxHeading //-->

<div class="iBoxContent">Content goes here</div>

</div> <!-- EOF iBoxCanvas //-->
</div>

<div class="iBoxShadowRight"> <!-- Right drop shadow wrapper //-->

<div class="iBoxShadowRightTop"></div>

<div class="iBoxShadowRightBottom"></div>

</div> <!-- EOF iBoxShadowRight //-->

</div> <!-- EOF iBoxTop //-->

<div class="iBoxBottomLeftWrapper">
<div class="iBoxBottomLeft1"></div>
<div class="iBoxBottomLeft2"></div>
</div>
<div class="iBoxBottomRight"></div>
<div class="iBoxBottomMiddle"></div>


</div> <!-- EOF iBoxContainer //-->

</body>



Thanks for your help, I appreciate any advice.
chrishirst
21st April 11, 05:03 PM
Your style element is AFTER the closing head tag for a start.
Code Red
21st April 11, 05:22 PM
Your style element is AFTER the closing head tag for a start.

Well... that's a good point! :$

But it's not the cause of the problem...
Code Red
24th April 11, 12:22 PM
Any ideas?

If someone could just give me an idea of which tags cause a problem with earlier versions of IE it would be a great help...
chrishirst
24th April 11, 05:48 PM
There are no "tags" that cause problems, unless you are expecting HTML5 specific tags to work in pre IE8/9 browsers.

CSS properties are what cause problems in some earlier browsers and the IE box model as opposed to the W3c box model

To read up on the problems go to

Quirksmode (http://www.quirksmode.org/css/contents.html) and Position is everything (http://www.positioniseverything.net/)
Code Red
26th April 11, 10:25 AM
Thanks for the help, I managed to fix it - the problem was a combination of lack of specified widths and use of left and right margins on certain divs, both of which caused problems with IE6.