Why doesn't IE like this css?

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
kzar
Forum Newbie
Posts: 16
Joined: Thu Nov 25, 2004 3:03 pm

Why doesn't IE like this css?

Post by kzar »

Been trying to hack a bit of a better layout for my project using css, It looks how I want in firefox but terrible in IE. http://kzar.co.uk/test/test.htm to see it for yourself.

Here is the css

Code: Select all

body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: black;
	margin: 0px;
	padding: 0px;
	position: relative;
}

h1 { 
	height: 30px;
	position: absolute;
	left: 0px;
	top: 0px;
	margin: 0px;
	right: 0px; 
	border-bottom: 1px dashed #666;
	background-color: #cccccc;
	padding: 5px 5px 5px 5px; 
}

div#menu {
	background: #EDF4FF;
	position: absolute;
	top: 40px;
	left: 0px;
	width: 150px;
	padding: 5px 5px 5px 5px; 
	margin-bottom: 10px;
	margin-left: 0;
	margin-top: 5;
	margin-right: 0;
	border: 1px black solid;
}

div#stuff {
	background: #EDF4FF;
	position: absolute;
	top: 40px;
	left: 160px;
	right: 0px;
	padding: 5px 5px 5px 5px; 
	margin-bottom: 10px;
	margin-left: 5;
	margin-top: 5;
	margin-right: 5;
	border: 1px black solid;
}
I'm totaly clueless in how to sort it out, so any ideas would be handy.

Thanks
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

Maybe try this:

Code: Select all

body { 
   font-family: Verdana, Arial, Helvetica, sans-serif; 
   font-size: 12px; 
   color: #000000; 
   margin: 0px; 
   padding: 0px; 
} 

h1 { 
   height: 30px; 
   left: 0px; 
   top: 0px; 
   right: 0px; 
   margin: 0px; 
   border-bottom: 1px dashed #666666; 
   background-color: #cccccc; 
   padding: 5px; 
} 

#menu { 
   background-color: #EDF4FF; 
   top: 40px; 
   left: 0px; 
   width: 150px; 
   padding: 5px; 
   margin-bottom: 10px; 
   margin-left: 0; 
   margin-top: 5; 
   margin-right: 0; 
   border: 1px #000000 solid; 
} 

#stuff { 
   background-color: #EDF4FF; 
   top: 40px; 
   left: 160px; 
   right: 0px; 
   padding: 5px; 
   margin-bottom: 10px; 
   margin-left: 5; 
   margin-top: 5; 
   margin-right: 5; 
   border: 1px #000000 solid; 
}
I think background needs to be background-color. And thry this... when you code your <DIV> tags using the style for menu or stuff, call it like:

Code: Select all

<div id="menu">something here</div>
This is just a thought. Try it out and see if it helps. Post back if it worked.
User avatar
harpax
Forum Newbie
Posts: 1
Joined: Wed Feb 09, 2005 10:26 am

Post by harpax »

Hey,

IE and Mozilla parse boxes (as <div> or <h>) different. IE includes margin, border and padding values in the width while in Mozilla only the inner box (the content) is width.

IE.width = mozilla.width + margin + padding + border

http://css-discuss.incutio.com/?page=BoxModelHack shows some workarounds

hope that helps
zenabi
Forum Commoner
Posts: 84
Joined: Mon Sep 08, 2003 5:26 am
Location: UK

Post by zenabi »

Note that IE6 will render the box model correctly if it is not in quirks mode, i.e you set a Doctype at the start of your HTML files.

It will be beneficial if you can learn to code to XHTML Strict. See: http://www.w3schools.com/xhtml/xhtml_intro.asp
Post Reply