www.webdeveloper.com
Results 1 to 3 of 3

Thread: Dreaded IE6 float/margin bug

  1. #1
    Join Date
    Mar 2010
    Posts
    23

    Dreaded IE6 float/margin bug

    I created a page for an ebay template.

    The upper section has two divs, floated left and right, with margins on either sides.

    The float elements appear perfect in the latest, Firefox, Safari, and IE versions.

    However in IE6 the the right float drops to the bottom of the page. I've read alot about the IE6 margin/float bugs, and assume I may have to use display:inline; but I am not sure how to make use of it, and what else I need to modify.

    I've added a screenshot to show the problem.

    http://img444.imageshack.us/img444/3411/iebugj.jpg

    And here is the code:

    Code:
    <html>
    <head>
    <title>Seagate 1TB Barracuda 7200.11 Internal Hard Disc Drive</title>
    
    	<style type="text/css">
    	* {
    	padding:0;
    	margin:0;
    	}
    	
    	body {
    	font-family:Arial,Helvetica,sans-serif;
    	}
    	
    	h1 {
    	font-size:18px;
    	margin-left:10px;
    	color:#662D91;
    	padding-bottom:5px;
    	border-bottom:1px solid #ccc;
    	}
    	
    	h2 {
    	color:#fff;
    	font-size:14px;
    	margin-left:10px;
    	}
    	
    	p {
    	font-size:12px;
    	margin-top:10px;
    	margin-bottom:10px;
    	margin-left:10px;
    	}
    	
    	table {
    	font-size:12px;
    	margin-top:10px;
    	margin-bottom:10px;
    	margin-left:10px;
    	border-collapse:collapse;
    	border:2px solid #ccc;
    	}
    	
    	th {
    	border-right:2px solid #ccc;
    	border-bottom:1px solid #ccc;
    	}
    	
    	td {
    	border:1px solid #ccc;
    	padding-left:10px;
    	}
    	
    	td {
    	padding-left:10px;
    	padding-right:10px;
    	}
    	
    	th.odd, td.odd {
    	background-color:#f2f2f2;
    	}
    	
    	#container {
    	margin-left:auto;
    	margin-right:auto;
    	padding-top:10px;
    	padding-bottom:25px;
    	width:800px;
    	background-color:#fff;
    	}
    	
    	#banner {
    	height:100px;
    	margin-bottom:10px;
    	margin-left:50px;
    	margin-right:50px;
    	background-image:url(http://img80.imageshack.us/img80/6785/bannerpm.jpg);
    	}
    	
    	#upper-section {
    	margin-left:50px;
    	margin-right:50px;
    	}
    	
    	#product-image {
    	float:left;
    	width:50%;
    	margin-bottom:10px;
    	}
    	
    	#product-image img {
    	margin-left:10px;
    	}
    	
    	#price-details {
    	float:right;
    	width:50%;
    	}
    	
    	#product-details ul {
    	font-size:12px;
    	list-style-type:none;
    	margin-left:10px;
    	}
    	
    	#logos {
    	margin-top:20px;
    	margin-left:10px;
    	}
    	
    	#logos img {
    	margin-right:10px;
    	}
    	
    	#lower-section {
    	clear:both;
    	margin-left:50px;
    	margin-right:50px;
    	}
    	
    	.heading-bar {
    	padding-top:5px;
    	padding-bottom:5px;
    	background-image:url(http://img404.imageshack.us/img404/6006/bard.jpg);
    	background-repeat: repeat-y;
    	}
    	
    	.heading-small {
    	font-size:15px;
    	}
    	
    	.rrp-text {
    	text-decoration:line-through;
    	color:#777;
    	}
    	
    	.price-text {
    	font-size:16px;
    	font-weight:bold;
    	color:#843EC1;
    	}
    	
    	.you-save-text {
    	color:#F98E00;
    	}
    	
    	</style>
    
    </head>
    
    
    <body>
    
    
    <div id="container">
    
    	<div id="banner">
    	
    	</div>
    
    	<div id="upper-section">
    		
    		<div id="product-image">
    		<img src="seagate-hdd.jpg" />
    		</div>
    	
    		<div id="price-details">
    			
    			<h1>Seagate OEM 1TB Barracuda 7200.11<br /> 
    			3.5 Inch Internal Hard Disk Drive <br />
    			<span class="heading-small">(7200RPM, 32MB Cache)</span>
    			</h1>
    		
    			<div id="product-details">
    			
    				<div id="price">
    					<p>
    					<span class="rrp-text">RRP: £89.95</span> <br />
    					<span class="price-text">Our Price: £80.95</span> <br />
    					<span class="you-save-text">You Save: £9.00 (10%)</span> <br />
    					<strong>Brand New</strong> | Dispatched within 1 working day
    					</p>
    				</div>
    
    				<div id="logos">
    					<img src="http://img225.imageshack.us/img225/7135/windows7h.jpg" />
    					<img src="http://img441.imageshack.us/img441/2285/seagate.jpg" />
    					
    				</div>
    				
    			</div>
    			
    		</div>
    		
    	</div>
    
    	<div id="lower-section">
    	
    		<div id="product-description">
    		
    		<div class="heading-bar">
    		<h2>PRODUCT DESCRIPTION</h2>
    		</div>
    		
    		<p>
    		Designed with up to four platters and the only second-generation 
    		perpendicular recording technology in the industry, the Barracuda 
    		7200.11 drive offers the ideal balance of world-class technology 
    		and value, providing customers with an optimal overall solution. 
    		The capacity, reliability and performance of this drive, along 
    		with its 5-year limited  warranty, ensure the longevity of digital 
    		content for years to come.
    		</p>
    		
    		<p>
    		The Seagate Barracuda 7200.11 drive delivers up to 43 per cent 
    		power savings over the previous desktop generation without 
    		sacrificing drive and system performance levels, giving 
    		customers the ability to manufacture eco-friendly PC systems and 
    		external storage systems that meet energy-savings requirements.
    		</p>
    		
    		
    		</div>
    		
    		<div id="Benefits">
    			<div class="heading-bar">
    				<h2>KEY FEATURES &amp; BENEFITS</h2>
    			</div>
    				<p>
    				- Sustainable technology for a green world <br />
    				- 11th generation of the world’s most popular desktop hard drive <br />
    				- Ships with the most reliable and proven perpendicular magnetic recording technology <br />
    				- Delivers high performance <br />
    				<p>
    		</div>
    		
    		
    		
    		<div id="technical-specs">
    		
    			<div class="heading-bar">
    			<h2>TECHNICAL SPECIFICATIONS</h2>
    			</div>
    		
    			<table>
    			
    			<tr>
    			<th class="odd">Model:</th>
    			<td class="odd">ST31000340AS</td>
    			</tr>
    			
    			<tr>
    			<th>Capacity:</th>
    			<td>1 TB</td>
    			</tr>
    		
    			<tr>
    			<th class="odd">Interface Options:</th>
    			<td class="odd">SATA 3-Gb/s NCQ</td>
    			</tr>
    		
    			<tr>
    			<th>Transfer Rate, Max Ext:</th>
    			<td>150/300 MB/s</td>
    			</tr>
    		
    			<tr>
    			<th class="odd">Sustained Data Rate OD:</th>
    			<td class="odd">120 MB/s</td>
    			</tr>
    		
    			<tr>
    			<th>Cache:</th>
    			<td>32 MB</td>
    			</tr>
    		
    			<tr>
    			<th class="odd">Spindle Speed:</th>
    			<td class="odd">7200 RPM</td>
    			</tr>
    			
    			<tr>
    			<th>Dimensions:</th>
    			<td>4" x 1.02" x 5.78" (101.6mm x 26.11mm x 146.99mm)</td>
    			</tr>
    			
    			<tr>
    			<th class="odd">Weight:</th>
    			<td class="odd">1.2 lbs (0.540 kg)</td>
    			</tr>
    			
    			</table>
    		
    		</div>
    	
    		<div id="box-contents">
    			<div class="heading-bar">
    				<h2>BOX CONTENTS</h2>
    			</div>
    			<p>1x Disk Drive</p>
    		</div>
    		
    	</div>
    
    </div>
    
    </body>
    </html>

  2. #2
    Join Date
    Aug 2009
    Posts
    46

    Thumbs up

    Hi.

    First of all - remember to validate the code.

    Below are styles you have to modify to make the layout work in IE 6.

    Code:
    #container {
    	text-align: center;
    	margin-left:auto;
    	margin-right:auto;
    	padding-top:10px;
    	padding-bottom:25px;
    	width:800px;
    	background-color:#fff;
    }
    
    #upper-section {
    	width: 700px;
    	margin: 0 auto;
            text-align: left;
    }

    Take care!

  3. #3
    Join Date
    Mar 2010
    Posts
    23
    That seems to have done the trick. Thanks

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles