#1
  1. what's your moniker?
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2003
    Location
    Highland Park, NJ
    Posts
    201
    Rep Power
    11

    Angry CSS layout off by a few px in IE


    heyya,

    I'm doing a quick layout, and I'm running into some problems with my floating menu.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    
     <head>
    	<style type="text/css">
    		body {
    			margin:0;
    			padding:0;
    			background-color:white;
    			font:normal 1em/150% Verdana,Arial,sans-serif;
    		}
    		#container {
    			width:750px;
    			padding:0;
    			margin:0;
    			background:#FAA;
    		}
    		#contents {
    			width:566px;
    			margin:10px 0 0 162px;
    			border:1px solid #999;
    			border-bottom:none;
    			padding:10px;
    			background:#FFF;
    		}
    		#contents p {font-size:80%;line-height:150%;}
    		#menu {
    			width:160px;
    			background:#FFA;
    			margin:0;
    			padding:0;
    			float:left;
    		}
    		img {border:none}
    	</style>
     </head>
    
     <body>
    	<div id="container">
    		
    			<div id="menu">
    				<p>Wisi te quis lobortis dolor vel hendrerit consequat ex. Nulla hendrerit ad et. Praesent adipiscing nostrud dolore, feugait velit dolore dignissim. Aliquam blandit consequat ex blandit praesent hendrerit. Commodo in nonummy suscipit facilisi lorem ullamcorper dolore vulputate ea, ullamcorper eum duis delenit. Iriure nostrud qui, vulputate ut aliquip at, amet ut, erat, consequat autem. Facilisis sit lorem te illum suscipit zzril. Dignissim illum, duis accumsan. Et, duis enim euismod wisi commodo elit amet. Hendrerit nulla luptatum dolore tincidunt nulla nulla minim velit feugait accumsan, dolore minim, feugait nonummy, elit vero erat.</p>
    			</div>
    			<div id="contents">
    				<a href="#"><img src="bedroom-furniture.jpg" width="566" height="250" border="0" alt="" /></a>
    
    				<h3>Welcome to mook</h3>
    
    				<p>Wisi te quis lobortis dolor vel hendrerit consequat ex. Nulla hendrerit ad et. Praesent adipiscing nostrud dolore, feugait velit dolore dignissim. Aliquam blandit consequat ex blandit praesent hendrerit. Commodo in nonummy suscipit facilisi lorem ullamcorper dolore vulputate ea, ullamcorper eum duis delenit.</p>
    
    				<p>Facilisis sit lorem te illum suscipit zzril. Dignissim illum, duis accumsan. Et, duis enim euismod wisi commodo elit amet. Hendrerit nulla luptatum dolore tincidunt nulla nulla minim velit feugait accumsan, dolore minim, feugait nonummy, elit vero erat.</p>
    			</div>
    
    	</div>
     </body>
    
    </html>
    readers digest version: I have a 750px container. My content div is 566, plus 2px for the border, plus 20px for the padding. Giving it a margin-left of 162px gives us a grand total of 750. IE seems to hate the padding - when i modify that it works fine - even changing the margin doesn't do anything. and there's an extra 2px between the menu and the contents just in case.

    So I can't figure why it's bumping down in IE. and i'm using v6, and have the doctype declared, so it shouldn't be in quirks mode.

    TIA,

    Greg
  2. #2
  3. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1955
    Giving a width (you don't really need it, do you?) to the block element following a float makes IE nuttier than usual. Big John has an article on the IE float model on his and Holly Bergevin's site, /*PIE*/.

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.

IMN logo majestic logo threadwatch logo seochat tools logo