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

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.

Code:

<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

Quote:

Originally Posted by chrishirst

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 and Position is everything

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.

21st April 11, 05:03 PM	#2
chrishirst Banned Join Date: Jun 2006 Location: Blackp ool U.K. Posts: 3,197	Re: My CSS-based box doesn't display the same in IE6-IE9 Your style element is AFTER the closing head tag for a start.

24th April 11, 12:22 PM	#4
Code Red WLC Member Join Date: Apr 2011 Posts: 5	Re: My CSS-based box doesn't display the same in IE6-IE9 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...

24th April 11, 05:48 PM	#5
chrishirst Banned Join Date: Jun 2006 Location: Blackp ool U.K. Posts: 3,197	Re: My CSS-based box doesn't display the same in IE6-IE9 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 and Position is everything

26th April 11, 10:25 AM	#6
Code Red WLC Member Join Date: Apr 2011 Posts: 5	Re: My CSS-based box doesn't display the same in IE6-IE9 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.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode