Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

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

Posted on 2007-11-22
13
Medium Priority
?
2,024 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…

721 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