Display Issue in IE 6

Discussion in 'HTML & Website Design' started by aj2taylo, Jun 26, 2008.

  1. #1
    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>
    
    Code (markup):

    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;
    	}
    
    
    Code (markup):

    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?
     
    aj2taylo, Jun 26, 2008 IP