Hey guys, I'm having some problems.
Try these two codes at the bottom and you'll see what I mean:
CSS Code:
html,body {
height: 800px;
background-color: silver;
margin: 0;
}
div#wrapper {
background-color: white;
min-height: 700px;
width: 1000px;
margin-left: auto;
margin-right: auto;
border: 2px green dotted;
}
div#header {
text-align: center;
background-color: yellow;
min-height: 100px;
border-bottom: 2px green dotted;
}
div#main {
background-color: orange;
width: 80%;
float: right;
min-height: 700px;
border-left: 2px green dotted;
}
div#menu {
background-color: purple;
width: 20%;
min-height: 700px;
}
'
HTML 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">
<head>
<title>CSS Site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div id=wrapper>
<div id=header><p>Header</p></div>
<div id=main><p>Main Content</p></div>
<div id=menu><p>Navigation Menu</p></div>
</div>
</body>
</html>'
Could someone tell me why this is happening and why it's not working with Internet Explorer 6 ??
webwiz posted this at 17:30—12th January 2008.
He has: 319 posts
Joined: May 2007
I did not try this out, but I can see that you are using "min-height" -- IE prior to version 7 did not understand this.
I suggest using "height" instead of "min-height" for IE 5/6. Because of an IE bug that treats "height" as "min-height" in many cases, that may work for you.
There are several ways of giving a rule to IE 5/6 alone. My preference is the "Tan hack" aka the "star-html" hack, like this:
* html div#main {height: 700px;}'
Hope this helps.
Cordially, David
--
"Old web developers don't die, they degrade gracefully..."
Rajaie posted this at 18:31—12th January 2008.
They have: 6 posts
Joined: Jan 2008
Thanx man, that solved the IE problem, but I'm still having the problem where the columns are out of place.
If you try the code you'll see what I mean
JeevesBond posted this at 08:20—13th January 2008.
He has: 3,523 posts
Joined: Jun 2002
Think I can see what you mean. The problem is caused by the margins of the p element, add:
p {margin: 0;
}
'
To your code and you'll see what the issue was. Margins can cause some odd problems, you'll also see this with headings.
a Padded Cell our articles site!
Rajaie posted this at 12:00—13th January 2008.
They have: 6 posts
Joined: Jan 2008
It worked! Thank you so much