Browser Problems And Paragraph CSS

They have: 6 posts

Joined: Jan 2008

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 ??

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;

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's picture

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. Smiling

a Padded Cell our articles site!

They have: 6 posts

Joined: Jan 2008

It worked! Thank you so much Smiling

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.