CSS layout off by a few px in IE

Dev Shed Forums Sponsor:

May 4th, 2004, 01:02 PM

stinkoman

what's your moniker?

Join Date: Oct 2003

Location: Highland Park, NJ

Posts: 201

Time spent in forums: < 1 sec
Reputation Power: 5

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

__________________
new jersey web design

May 4th, 2004, 02:50 PM

kk5st

Thanks Johnny Hart (BC) R.I.P.

Join Date: May 2003

Location: Dallas

Posts: 4,585

Time spent in forums: 1 Month 2 Days 16 h 15 m 44 sec
Reputation Power: 662

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.

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread: