Datis
January 28, 2010, 12:02am
1
i have this code
<div id="container">
<div id="products_content">
<div id="products_page_header">
<div id="products_page">
<div class="post">
<div class="entrytext">
some text
</div>
</div>
</div>
</div>
</div>
<div id="clear">
</div>
<div id="siteinfo">
<p>
some content
</p>
</div>
</div>
and this css :
div#container {
margin: 0 auto;
width: 960px;
height: auto;
border-left: thin solid #6b5c57;
border-right: thin solid #6b5c57;
}
div#products_page_header {
width: 960px;
height: 50px;
background-image: url(images/products_page_header.png);
background-repeat: no-repeat;
margin: 10px 0 0 0;
}
div#products_page {
width: 950px;
float: right;
margin: 50px 0 0 0;
}
div.post {
float: right;
border: 1px solid #6b5c57;
width: 200px;
height: 350px;
margin: 10px;
}
div#siteinfo {
height: 280px;
position:relative;
background-image: url(images/footer.jpg);
}
the problem is its working on all new browsers except IE7 !
the height of products container wont work and footer div overlap it !
what should i do ?
Luki_be
January 28, 2010, 12:28am
2
Do you have an url to look at. In your post you have an div id=clear but that isn’t in your posted css. What is the css for the div id=clear?
Hi, the problem is is that on “div#products_page_header” you set a 50px height, and IE is stayin at that height.
You need to remove that height (also, I assume the #clear has clear:both on it)
div#products_page_header {
width: 960px;
[color=red]/*height: 50px;*/[/color]
background-image: url(images/products_page_header.png);
background-repeat: no-repeat;
margin: 10px 0 0 0;
}
Rayzur
January 28, 2010, 12:54am
4
the problem is its working on all new browsers except IE7 !
Along with the height problem Ryan mentioned you also need to contain your header floats for modern browsers. The page was really not working properly as you stated it was.
Set up the #products_content styles also for any future floats that may follow the header.
Remove that clearing div and just clear the footer instead.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>demo</title>
<style type="text/css">
* {margin:0;padding:0;}
body {
background: #fff;
font-size:100%;
}
[B]#container[/B] {
margin: 0 auto;
width: 960px;
border-left: [COLOR=Blue]1px [/COLOR]solid #6b5c57;
border-right: [COLOR=Blue]1px[/COLOR] solid #6b5c57;
}
[B]#products_page_header[/B] {
width: 960px;
[COLOR=Red]/*height: 50px;*/[/COLOR]
background:yellow url(images/products_page_header.png) no-repeat;
margin: 10px 0 0 0;
[COLOR=Blue]overflow:hidden;/*contain header floats*/[/COLOR]
}
[B]#products_content[/B]{
[COLOR=Blue]width:960px;/*IE haslayout/float containment*/[/COLOR]
[COLOR=Blue]overflow:hidden;/*contain floats that may follow the header*/[/COLOR]
background:blue;
}
#products_page {
width: 950px;
float: right;
margin: 50px 0 0 0;
}
.post {
float: right;
border: 1px solid #6b5c57;
width: 200px;
height: 350px;
margin: 10px;
background:lime;
}
[B]#siteinfo[/B] {
[COLOR=Blue]clear:both;[/COLOR]
height: 280px;
position:relative;
background:orange url(images/footer.jpg);
}
</style>
</head>
<body>
<div id="container">
<div id="products_content">
<div id="products_page_header">
<div id="products_page">
<div class="post">
<div class="entrytext">
some text
</div>
</div>
</div>
</div>
</div><!--end products_content-->
<div id="siteinfo">
<p>some content</p>
</div>
</div>
</body>
</html>
Luki_be
January 28, 2010, 12:58am
5
RyanReese:
Hi, the problem is is that on “div#products_page_header” you set a 50px height, and IE is stayin at that height.
You need to remove that height (also, I assume the #clear has clear:both on it)
div#products_page_header {
width: 960px;
[color=red]/*height: 50px;*/[/color]
background-image: url(images/products_page_header.png);
background-repeat: no-repeat;
margin: 10px 0 0 0;
}
Have you tested that cross browser? The OP needs to give IE7 only that solution because it messes up Opera and FF
Rayzur
January 28, 2010, 1:06am
6
It does not work correctly in other browsers because the floats were not being contained properly.
The page was not working correctly for modern browsers to begin with. I posted the needed rules above.
Yes I did. I forgot to post the overflow:hidden; though I did have it locally.
And i had the overflow:hidden set on the container div lol
Datis
January 28, 2010, 12:49pm
9
sorry for my late answer !
Thanks for your help now its working correctly !
with your method do I need to have clear div ? or just cleat at footer will work ?
thnx again
Luki_be
January 28, 2010, 1:21pm
10
just clear the footer, like Rayzur said. His code will work now and for eternity