Hello,

 

I'm having issues with a new layout in IE 6.

 

The HTML is as follows:

 

	<div id="gsContainer">
	<div id="gsLeftBorder"></div>
	<div id="gsRightBorder"></div>
	<div id="gsContent">
		<div id="gsHeader">Heading</div>
		<div id="gsBox">
			Some content
		</div>
	</div>
</div>

 

 

The CSS is as follows:

 

 

#gsContainer {
position: relative;
width: 795px;
height: 185px;
margin: 0 0 15px 0;
padding: 0px;
}

#gsLeftBorder {
	float: left;
	position: relative;
	margin: 0px;
	padding: 0px;
	width: 4px;
	background-image: url(/images/Left.gif);
	background-repeat: no-repeat;
	height:185px;
}

#gsRightBorder {
	position: relative;
	float: right;
	margin: 0px;
	padding: 0px;
	width: 4px;
	background-image: url(/images/GreenRight.gif);
	background-repeat: no-repeat;
	height:185px;
}

#gsContent {
	position: relative;
	height: 185px;
	margin-left: 4px;
	margin-right: 4px;
	width:779px;
	padding: 0px;
}

#gsHeader {
	position: relative;
	height: 25px;
	margin: 0px;
	padding: 6px 0 0 10px;
	width:769x;
	color: #fff;
	font-size: 14px;
	font-family: arial;
	font-weight: bold;
	background-image: url(/images/Header.gif);
	background-repeat: repeat-x;
}

#gsBox {
	position: relative;
	height: 129px;
	margin: 0px;
	padding: 25px 5px 0px 31px;
	width:743px;
	color: #000;
	font-size: 11px;
	font-family: verdana;
	background-image: url(/images/Back.gif);
	background-repeat: repeat-x;
}

 

 

The display looks fine when I test in IE 7, FF2, and Safari, with the content appearing with a clean "header" on top, and some inner content with borders on the left & right side.

 

However, when viewing in IE6, the inner content (div "gsContent") is somehow too wide, and is pushed to the live after the "gsContainer" div.

 

When I play with the widths, if I shave 8Px of width off gsContent and its inner divs, then the alignment is fixed, but there is spacing between gsLeftBorder & gsContent as well as gsContent & gsRightBorder

 

Any ideas how I can resolve this?

Welcome to WDF!

 

IE6 has a tendancy to add extra margins and/or not play properly, like you've found the margins in gsContent affect it.

 

I'd suggest removing the margins on gsContent and use padding instead. Also remove position: relative; as you've already floated.