Solved

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

Posted on 2007-11-22
13
2,020 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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

Ready to get started with anonymous questions?

It's easy! Check out this step-by-step guide for asking an anonymous question on Experts Exchange.

Question has a verified solution.

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

Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
Suggested Courses

636 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