Browser Problems And Paragraph CSS
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: 629 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
--
delete from internet where user_agent="MSIE" and version < 8;
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,956 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
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.