Hi,
Me again!
This is related to the same site I talk about in the internal links question.
The bulk of the site is one long page of repeating divs with a class Ive called "main" all are sitting in a single div called "content"
the CSS for these is as follows:
.content {
display:block;
height:100%;
max-height:100%;
overflow:auto;
position:relative;
z-index:3;
width:100%;
margin:10px auto 10px auto;
}
and
.main {
width:940px;
margin:auto;
min-height:100%;
border:1px solid #000;
clear:both;
height:100%;
background:url(bgimg.jpg) repeat-y center;
padding:40px;
border-bottom:none;
border-top:none;
}
All was well and I had 4 occurences of "main" working nicely then I added a 5th and it appears overlaid half way through the 4th article. Now theres no difference to the code at all, basically its.....
<html>
<body>
<div id="header">
-header content-
</div>
<div id="content">
<div class="main">
-content1-
</div>
<div class="main">
-content2-
</div>
etc etc then
<div class="main">
-content5-
</div>
</div>
Ive searched and searched through the CSS thinking that maybe theres a setting of the height in the body or somewhere that limited the height but nothing. Both "html" and "body" tags have CSS set to 100% (admittedly I nicked this from a tutorial on making a fixed header site, so cant be sure if thats the problem!).
I use Dreamweaver CS4 (admittedly for no reason other than it looks pretty as generally I hard code) and in that it appears fine on the Design view. Once loaded to the server however and it breaks.
Im viewing it in Firefox and IE7 and both have the same problem.
Me again!
This is related to the same site I talk about in the internal links question.
The bulk of the site is one long page of repeating divs with a class Ive called "main" all are sitting in a single div called "content"
the CSS for these is as follows:
.content {
display:block;
height:100%;
max-height:100%;
overflow:auto;
position:relative;
z-index:3;
width:100%;
margin:10px auto 10px auto;
}
and
.main {
width:940px;
margin:auto;
min-height:100%;
border:1px solid #000;
clear:both;
height:100%;
background:url(bgimg.jpg) repeat-y center;
padding:40px;
border-bottom:none;
border-top:none;
}
All was well and I had 4 occurences of "main" working nicely then I added a 5th and it appears overlaid half way through the 4th article. Now theres no difference to the code at all, basically its.....
<html>
<body>
<div id="header">
-header content-
</div>
<div id="content">
<div class="main">
-content1-
</div>
<div class="main">
-content2-
</div>
etc etc then
<div class="main">
-content5-
</div>
</div>
Ive searched and searched through the CSS thinking that maybe theres a setting of the height in the body or somewhere that limited the height but nothing. Both "html" and "body" tags have CSS set to 100% (admittedly I nicked this from a tutorial on making a fixed header site, so cant be sure if thats the problem!).
I use Dreamweaver CS4 (admittedly for no reason other than it looks pretty as generally I hard code) and in that it appears fine on the Design view. Once loaded to the server however and it breaks.
Im viewing it in Firefox and IE7 and both have the same problem.
