ie5.x box model hack works but give no margins?

newcow · Mar 11, 2004

Hi,
I am having problems with my

http://www.carsinlondon.com/inventory.cfm

page on ie5.02/5.5.
The site width is setup as follows:

<div id="content"> width:650px
<div id="graphicheader"> border:1px
</div>
<div id="container1"> bg

ink; padding:8px; border:1px
<div id="container2"> width:640px bg:white; border:1px
<div id="inventoryinfo">padding:8px
</div>
</div>
</div>
<div id="footer">
</div>
</div>

I am putting the container2 inside container1 and using a white bg for container2 and a pink bg for container1 to give me a a 8px color border.

I am having problems with this page on both ie5.5 and 5.02; when I add padding: 0px 8px 0px 8px to my inventoryinfo div it adds 14px on the right side on ie5.02 and 30px on to the side in ie5.5; so what I did was add a hack to inventoryinfo

Code:

padding:0; 
voice-family:"\"}\""; 
voice-family:inherit; 
padding:8px 8px 8px 8px;

and that fixed the size problem but leaves me with no padding in the inventoryinfo div and hence the text goes right up to the border;
How do I allow ie5.x to have padding on this page

http://www.carsinlondon.com/inventory.cfm

and not making the width to big?

Here is the page with the padding added in:

http://www.carsinlondon.com/inventorytest.cfm

Code:

#content {
width:650px; 
padding:0; 
margin:auto; 
text-align:left;
}
#graphicheader {
border-color:#990000; 
border-style:solid; 
border-width:1px 1px 0px 1px; 
padding:0;
}
#menu {border-color:#990000; 
border-style:solid; 
font-size:0.8em; 
border-width:1px 1px 0px 1px;
}
#container1 {
background-color:#ffcccc; 
border-color:#990000; 
border-style:solid; 
border-width:1px 1px 1px 1px;	
padding:8px 8px 8px 8px;
}
#container2 {
background-color:white; 
border-color:#990000; 
border-style:solid; 
border-width:1px 1px 1px 1px;
width:632px;
/* box model hack for win5.02 [URL unfurl="true"]http://glish.com/css/hacks.asp[/URL] */
voice-family:"\"}\""; 
voice-family:inherit; 
width:630px;
}
#inventoryinfo {
font-size:0.9em; 
line-height:100%;
padding:0;
/* box model hack for win5.x [URL unfurl="true"]http://glish.com/css/hacks.asp[/URL] */
voice-family:"\"}\""; 
voice-family:inherit; 
padding:8px 8px 8px 8px;
}
/*footer*/
#footer {
background-color:#ffcccc; 
border-color:#990000; 
border-style:solid; 
padding:1px 10px 0px 10px; 
font-size:0.6em; 
color:#666; 
margin-top:0em; 
background-color:#ffffff; 
border-width:0px 1px 0px 1px;
line-height:115%;
}

BillyRayPreachersSon · Mar 11, 2004

You could add conditional comments to your page... A trick I've used before for these IE specific bugs.

Have your master style sheet how you want it for most browsers, then after that, have additional STYLE sections, within conditional comments, that you can use to override styles for certain versions of IE:

Code:

<head>
	<link rel="stylesheet" href="default.css" type="text/css" media="screen, print, projection, tv" />
<!--[if lte IE 5.4999]>
	<style type="text/css">
	/* IE 5.0x CSS goes here */
	</style>
<![endif]-->
<!--[if gt IE 5.4999]>
	<style type="text/css">
	/* IE 5.5x CSS goes here */
	</style>
<![endif]-->
<!--[if gte IE 6]>
	/* IE 6.0x CSS goes here */
	<style type="text/css">
	</style>
<![endif]-->
</head>

Hope this helps,

Dan

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

ie5.x box model hack works but give no margins?

newcow

Technical User

BillyRayPreachersSon

Programmer

Similar threads

Part and Inventory Search

Sponsor