Page 1 of 1

Why doesn't IE like this css?

Posted: Fri Jan 07, 2005 6:51 am
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

Posted: Tue Jan 25, 2005 4:48 pm
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.

Posted: Tue Mar 08, 2005 11:04 am
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

Posted: Tue Mar 08, 2005 1:56 pm
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