Solved

CSS div tag not following when scrolling - I have spent MONTHS - part II

Posted on 2007-11-22
13
2,008 Views
Last Modified: 2012-05-05
I have page that I want to display correctly in IE 7.0.

My problem is very obvious if you scroll below the visible area in your browser.

The page can be found at http://www.dragonswim.dk

Below is the  code for the HTML - and later you will find the CSS code
********************************************************************************************************
<body onLoad="MM_preloadImages('images/newsite/hjem_b.jpg','images/newsite/nyheder_b.jpg','images/newsite/kalender_b.jpg','images/newsite/fakta_b.jpg','images/newsite/kontakt_b.jpg')">
      <div id="global">
                  <div id="top"></div><!--TOP end-->
                        <div id="top_nav">
                              <div class="search_field">
                                    <form action="soegning.asp" name="Search" method="post"><input name="search" type="text" size="20">
                                          <div class="search_button">
                                                <SCRIPT TYPE="text/javascript">
                                                <!--
                                                var sr = new submitroll("submit.out.jpg","submit.over.jpg","mysubmit");
                                                sr.write();
                                                //-->
                                                </SCRIPT>                                    
                                          </div><!--SEARCH_BUTTON end-->
                                    </form>
                              </div><!--SEARCH_FIELD end-->
                        </div><!--TOP_NAV end-->                                    
                  <div id="toc_content">
                    <div id="toc_top"></div><!--TOC_CONTENT end-->
                          <!--#include file="ledLights.asp"-->
                        <div class="toc_nav_top"><a href="default.asp" target="_self" onMouseOver="MM_swapImage('hjem','','images/newsite/hjem_b.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="images/newsite/hjem_b.jpg" alt="HJEM - startside for hele hjemmesiden" name="hjem" width="140" height="40" border="0"></a></div>
                        <div class="toc_nav_top"><a href="news.asp" target="_self" onMouseOver="MM_swapImage('nyheder','','images/newsite/nyheder_b.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="images/newsite/nyheder_a.jpg" alt="Nyheder - lampen blinker hvis nyheder er mindre end 3 dage gamle" name="nyheder" width="140" height="40" border="0"></a></div>  
                        <div class="toc_nav_top"><a href="calendar.asp" target="_self" onMouseOver="MM_swapImage('kalender','','images/newsite/kalender_b.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="images/newsite/kalender_a.jpg" alt="Kalender" name="kalender" width="140" height="40" border="0"></a></div>  
                        <div class="toc_nav_top"><a href="facts.asp" target="_self" onMouseOver="MM_swapImage('fakta','','images/newsite/fakta_b.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="images/newsite/fakta_a.jpg" alt="Oplysninger om svømmeklubben" name="fakta" width="140" height="40" border="0"></a></div>  
                        <div class="toc_nav_top"><a href="contact.asp" target="_self" onMouseOver="MM_swapImage('kontakt','','images/newsite/kontakt_b.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="images/newsite/kontakt_a.jpg" alt="Kontakt klubben" name="kontakt" width="140" height="40" border="0"></a></div>
                        <div id="toc_bottom"></div><!--TOC_BOTTOM end-->
                        <div id="toc_below_bottom">
                              <!--#include file="subtoc.asp"-->
                        </div><!--TOC_BELOW_BOTTOM end-->
                  </div><!--TOC_CONTENT end-->
                  <!--#Start of news article-->
                  <div class="newsitem">
                              <div class="frontpage_header">
                                    <%=(RSForside.Fields.Item("course").Value)%>
                              </div><!--FRONTPAGE_HEADER end-->
                              <div class="frontpage_credentials">
                                    Udgivelse: <%=(RSForside.Fields.Item("timestamp").Value)%>, forfatter: <%=(RSForside.Fields.Item("navn").Value)%>
                              </div><!--FRONTPAGE_CREDENTIALS end-->
                          <div class="frontpage_content">
                          <% 'Her er forsidens nyhed - hvis der er over 1000 ord sÃ¥ hvis noget af nyheden, ellers vis hele nyheden
                              dim words
                              words = LEN(RSForside("menu"))
                              if words >= 2000 then
                              response.write LEFT((RSForside("menu")),2000) & "... <a href=article.asp?id=" & rsForside("id") & "><b>Læs mere</b></a>"
      '                        response.write LEFT((RSForside("menu")),1000) & "... <a href=show.asp?id=" & rsForside("id") & "><b>Læs mere</b></a>"
                              else  
                              response.write (RSForside.Fields.Item("menu").Value)
                              end if
                          %>
                          </div><!--FRONTPAGE_CONTENT end-->
              </div><!--NEWSITEM end-->
                  <!--#include file="sponsors.asp"-->
      </div><!--#GLOBAL end-->
</body>

********************************************************************************************************

Below is the CSS code

********************************************************************************************************
* {
padding: 0px;
margin: 0px;
}


html {
z-index:0;
height:100%;
background-image:url(../images/newsite/fadeback.gif);
background-repeat:repeat-x;
background-color:#B2D9ED;
}

body {
z-index:1;
width:822px; /*Her kan du ændre hele sidens bredde*/
height:100%; /* for firefox og opera */
margin:0 auto;
background-color:#ffffff;
border-left: solid 1px #3E8AAE;
border-right: solid 1px #3E8AAE;
}

#global {
z-index:0;
background-color:#ffffff;
}

#top{
z-index:0;
position:relative;
float:left;
top:10px;
left:10px;
width:800px;
height:200px;
background-image: url(../images/newsite/top8.jpg);
background-repeat:no-repeat;
}

#top_nav{
z-index:0;
position:relative;
float:left;
top:15px;
left:10px;
width:800px;
height:36px;
overflow:hidden;
background-image: url(../images/newsite/top_nav7.jpg);
background-color:#ffffff;
}

.search_field{
z-index:0;
position:relative;
float:NONE;
top:6px;
left:585px;
width:100px;
height:10px
overflow: hidden;
}

.search_button{
z-index:0;
position:absolute;
top:-3px;
left:150px;
width:80px;
height:30px;
overflow:hidden;
}

#toc_main_container {
z-index:0;
position:relative;
float:left;
top:0px;
left:0px;
}

#frontpage_main{
z-index:1;
position:absolute;
top:260px;
left:165px;
width:500px;
overflow: hidden;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}

#sponsor_container {
z-index:0;
position:relative;
float:left;
top:25px;
right:15px;
float:right;
}

#sponsor_top {
z-index:1;
position:relative;
top:0px;
left:0px;
width:110px;
height:20px;
overflow:visible;
background-image:url(../images/newsite/sponsor_top.jpg);
}

#sponsor_content {
z-index:1;
position:relative;
top:0px;
width:110px;
left:0px;
height:380px;
overflow:visible;
background-image:url(../images/newsite/sponsor_bar.jpg);
background-repeat:repeat-y;
text-align:center;
vertical-align:top;
overflow: hidden;
text-align:center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
}

#sponsor_bottom {
z-index:1;
position:relative;
top:0px;
left:0px;
width:110px;
height:10px;
overflow:hidden;
background-image:url(../images/newsite/sponsor_bottom.jpg);
}

.sponsor_image {
z-index:2;
position:relative;
width:100px;
margin-bottom:0px;
border:solid 1px #999999;
}

.chart {
z-index:10;
position: absolute;
top:30px;
left:710px;
width:50px;
height:50px;
overflow:visible;
}

#toc_top {
z-index: 1;
position:relative;
top: 0px;
left:0px;
width:140px;
height:20px;
overflow:hidden;
background-image:url(../images/newsite/nav_top.jpg);
}

#toc_content{
z-index:0;
position:relative;
float:left;
top:25px;
left:15px;
width:140px;
height:200px;
overflow:visible;

}

#toc_bottom {
z-index: 1;
position:relative;
top: 0px;
left:0px;
width:140px;
height:10px;
overflow:hidden;
background-image:url(../images/newsite/nav_bottom.jpg);
}

#toc_below_bottom{
z-index:1;
position:relative;
top:20px;
left:0px;
width:140px;
}

.toc_nav_top{
z-index:2;
position:relative;
top:0px;
left:0px;
width:140px;
height:40px;
}

.toc_nav_bottom
{
z-index:3;
position:relative;
left:10px;
width:120px;
padding:1px;
margin-top:2px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}

.img_border
{
border: solid 1px #999999;
}

.led {
      z-index:4;
      position:absolute;
      left:126px;
      top:72px;
      width:12px;
      height:11px;
      overflow:hidden;
}

.ledNEWS {
      z-index:4;
      width:12px;
      height:11px;
      overflow:hidden;
}

.newsitem {
z-index:1;
float:left;
position:relative;
top:25px;
left:30px;
width:500px;
background-color:#ffffff;

}
.MY_newsitem {
z-index:1;
position:relative;
top:10px;
left:40px;
width:600px;
background-color:#ffffff;
overflow:visible;
padding-bottom:50px;
margin-top:5px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}

.MY_calendar {
z-index:-1;
background-color:#ffffff;
overflow:visible;
margin-top:5px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}

.recorditem {
z-index:1;
position: relative;
top:25px;
left:25px;
width:600px;
/*height:100%;*/
background-color:#ffffff;
/*border-right: solid 1px #3E8AAE;*/
overflow: auto;
padding-bottom:110px;
}

.frontpage_header {
position:relative;
float:left;
top:10px;
left:0px;
font-family: Arial, Helvetica, sans-serif;
font-size:20px;      
padding-bottom:5px;
background-color:#ffffff;
width:500px;
}

.MY_frontpage_header {
font-family: Arial, Helvetica, sans-serif;
font-size:20px;      
padding-bottom:10px;
background-color:#ffffff;
width:600px;
}

.frontpage_content {
z-index:1;
position:relative;
overflow:visible;
float:left;
top:25px;
left:0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
line-height:2;
padding-bottom:20px;
background-color:#ffffff;
width:500px;
margin-bottom:50px;
}

.MY_frontpage_content {
z-index:1;
position:relative;
float:left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:11px;      
top:10px;
left:10px;
padding-bottom:20px;
background-color:#ffffff;
width:500px;
}

.frontpage_credentials {
z-index:0;
position:relative;
float:left;
top:10px;
left:0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color:#FF0000;
font-size:10px;      
padding-bottom:5px;
border-bottom:solid 1px #999999;
width:500px;
}

.search_header {
font-family: Arial, Helvetica, sans-serif;
font-size:20px;      
padding-bottom:5px;
}

.search_content {
      z-index:1;
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size:11px;
      background-color:#ffffff;
      display:block;
      overflow:visible;
      height: 25px;
      width: 520px;
}

.search_credentials {
font-family: Verdana, Arial, Helvetica, sans-serif;
color:#FF0000;
font-size:10px;      
padding-bottom:5px;
}

.news_header {
font-family: Arial, Helvetica, sans-serif;
font-size:20px;      
background-color:#ffffff;
}

.news_content {
z-index:10;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:11px;      
padding-top:3px;
padding-bottom:3px;
}

.news_credentials {
font-family: Verdana, Arial, Helvetica, sans-serif;
color:#FF0000;
font-size:10px;
padding-top:3px;
padding-bottom:3px;      
}

.profile_header {
font-family: Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:400;      
padding-bottom:5px;
background-color:#ffffff;
width:515px;
}

.data {
      z-index:1;
      width:110px;
      height:180px;
      float:left;
      background-color:#ffffff;
      padding-right:6px;
      margin:4px;
      background-image:url(../images/fade.gif);
      background-repeat: repeat-x;
      border:solid 1px #a0a0a0;
}

.pics {
      Z-index:2;
      float:inherit;
      Position:relative;
      left:8px;
      top: 10px;
      height:140px;
      width:100px;
      background-color:#c0c0c0;
      padding:0px;
      overflow:hidden;
}

.txt {
      Z-index:2;
      float:inherit;
      Position:relative;
      left:10px;
      top: 10px;
      width:100px;
      height:70px;
      overflow: hidden;
      font-family:Arial, Helvetica, sans-serif;
      font-size:10px;
      color:#000000;
}

.txtspan {
      position: relative;
      float:inherit;
      display:block;
}

.profilePics {
      Z-index:2;
      float:left;
      Position:relative;
      left:8px;
      top: 10px;
      height:200px;
      width:100px;
      background-image:url(../images/fade.gif);
      background-repeat: repeat-x;
      border:solid 1px #a0a0a0;      
      background-color:#ffffff;
      padding:2px;
      margin-left:12px;
      margin-bottom:20px;
      overflow:hidden;
}

.txtProfile {
      Z-index:2;
      Position:relative;
      left:2px;
      top: 5px;
      overflow: hidden;
      font-family:Arial, Helvetica, sans-serif;
      font-size:10px;
      color:#000000;
}

.clubrecords_subheader {
font-family: Arial, Helvetica, sans-serif;
font-size:13px;      
font-weight:700;
padding-top:3px;
padding-bottom:3px;
background-color:#d0d0d0;
}

.records_subheader {
font-family: Arial, Helvetica, sans-serif;
font-size:11px;      
font-weight:700;
padding-top:1px;
padding-bottom:1px;
background-color:#d0d0d0;
}

.tocSideMenu {
z-index:2;
position:relative;
float:left;
top:15px;
left: 20px;
width:160px;
}

.sidemenu     {
      font-family:arial;
      font-weight:400;
      font-size:12px;
      letter-spacing:2px;            
      width: 160px;

      }

.loginSideMenu     {
      font-family:arial;
      font-weight:400;
      font-size:12px;
      width: 160px;

      }


.sidemenu a {
      display: block;
      text-decoration: none;
      color: #000;
      background: inherit;
      border-bottom: 1px solid #000000;      
      
      }
.sidemenu a:visited{
      color: #000000;
      background: #ffffff;
      }
.sidemenu a:hover {
      color: #ffffff;
      background: #107698;
      }
      
.sidemenu a:active{
      color: #ffffff;
      background: #107698;
      }      
      

.linkNoDecoration {
padding-top:9px;
padding-left:10px;
padding-bottom:7px;
}

.linkStart {
padding-top:9px;
padding-left:10px;
padding-bottom:7px;
}
0
Comment
Question by:jensjakobsen
  • 7
  • 4
  • 2
13 Comments
 
LVL 25

Expert Comment

by:imitchie
ID: 20336393
try removing height: 100% from css:body
0
 
LVL 1

Author Comment

by:jensjakobsen
ID: 20336515
Better - but not perfect :(
0
 
LVL 25

Expert Comment

by:imitchie
ID: 20336542
can you remove it from html as well?
0
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
LVL 1

Author Comment

by:jensjakobsen
ID: 20336551
No effect :(
0
 
LVL 30

Expert Comment

by:VirusMinus
ID: 20336599
immediately after the topnav div ends put a <div style="clear:both"/>

and put one immediately after sponsorcontainer as well.
0
 
LVL 25

Expert Comment

by:imitchie
ID: 20336690
the key is that

.frontpage_content {
top:25px;

is causing the overflow. removing everything else but it still causes it to be longer than body. btw, use your original CSS, make a tiny change. move the DIV after the BODY back inside BODY!  Also, Add a DIV right inside BODY,<DIV class="body-div"
remember to close it right before </BODY>

change
body {
to
.body-div
0
 
LVL 1

Author Comment

by:jensjakobsen
ID: 20338625
What does <div style="clear:both"/> do?
0
 
LVL 30

Expert Comment

by:VirusMinus
ID: 20339939
it clears floats before it and returns the document to normal flow.

any floated elements are taken out of the normal flow of the document. so its containers do not know to keep a space for them.

see the various methods of clearing floats: http://www.ejeliot.com/blog/59
0
 
LVL 1

Author Comment

by:jensjakobsen
ID: 20340684
Virus Minus - none of your suggestions worked :(

Imitchie - Could you explain in detail - please show what you mean with this:

the key is that

.frontpage_content {
top:25px;

is causing the overflow. removing everything else but it still causes it to be longer than body. btw, use your original CSS, make a tiny change. move the DIV after the BODY back inside BODY!  Also, Add a DIV right inside BODY,<DIV class="body-div"
remember to close it right before </BODY>

change
body {
to
.body-div
0
 
LVL 1

Author Comment

by:jensjakobsen
ID: 20450054
Imitchie - Could you explain in detail - please show what you mean with this:

the key is that

.frontpage_content {
top:25px;

is causing the overflow. removing everything else but it still causes it to be longer than body. btw, use your original CSS, make a tiny change. move the DIV after the BODY back inside BODY!  Also, Add a DIV right inside BODY,<DIV class="body-div"
remember to close it right before </BODY>

change
body {
to
.body-div
0
 
LVL 1

Accepted Solution

by:
jensjakobsen earned 0 total points
ID: 20450160
I guess this problem is a little bit boring to deal with but I sure would love an answer I still try to solve it :(
0
 
LVL 25

Expert Comment

by:imitchie
ID: 20452015
I know that the CSS fragment is causing a problem.
This one right here-
.frontpage_content { top:25px;

But I am not sure how to fix it either.
0
 
LVL 1

Author Comment

by:jensjakobsen
ID: 20452115
OK - thank you very much for answering though.
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question