Solved

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

Posted on 2007-11-22
13
2,013 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
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!

 
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: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering 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

Title # Comments Views Activity
ASP.NET Content Page 3 64
email validation 9 64
CSS auto-height of empty div 3 71
Wordpress Responsive Web design and iPads 11 40
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
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 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…

752 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