Solved

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

Posted on 2007-11-22
13
1,999 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
 
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
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 
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

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

760 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now