Div problem. White border appears when scrolling.

**candyx** · 05-07-2009, 03:03 AM

I was wondering if anyone could help me. When I scroll, a white box appears around the border which covers the animation. How do I remove this?

View the problem here: http://www.younghunting.com.au/test.html

I am using 2 divs. One div contains the background animation. The other sits on top and contains the html.

Is there a problem with my code? Please keep in mind that I want site positioned as it is already (H: Left, V: Centered).

Thanks.

Code:

<body>

<div style="position:absolute; left:245px; width: 675px; height:385px; top:50%; margin-top:-230px; z-index:1">

<div style="position:absolute; height:14px; left:0px; top:0px;">
            <td height="14"><table height="14" width="100%"border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td width="55" height="14"><img src="http://www.younghunting.com.au/images/border-top-left.gif" width="55" height="14" alt="" /></td>
                <td width="100%" height="14"><img src="http://www.younghunting.com.au/images/border-top-middle1.gif" width="100%" height="14" alt="" /></td>
                <td width="58" height="14"><img src="http://www.younghunting.com.au/images/border-top-right.gif" width="58" height="14" alt="" /></td>
              </tr>
            </table></td>
</div>


<div style="position: absolute; height: 14px; left:0px; bottom:0px;">
            <td height="14"><table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td width="55"><img src="http://www.younghunting.com.au/images/border-bottom-left.gif" width="55" height="14" alt="" /></td>
                <td width="100%"><img src="http://www.younghunting.com.au/images/border-bottom-middle1.gif" width="100%" height="14" alt="" /></td>
                <td width="58"><img src="http://www.younghunting.com.au/images/border-bottom-right.gif" width="58" height="14" alt="" /></td>
              </tr>
            </table></td>
</div>

</div>

<div style="position: absolute; height:100%; width:100%; overflow: hidden; z-index:2"> 

<div style="position: absolute; top: 50%; margin-top: -630px; left: 0px; height:1600px; width:450px; "><script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','450','height','1600','src','http://www.younghunting.com.au/images/tree','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','bgcolor','','wmode','transparent','movie','http://www.younghunting.com.au/images/tree' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="450" height="1600">  
  <param name="movie" value="http://www.younghunting.com.au/images/tree.swf" />
  <param name="quality" value="high" />
  <param name="BGCOLOR" value="transparent">
  <param name="wmode" value="transparent">
  <embed src="http://www.younghunting.com.au/images/tree.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="450" height="1600" bgcolor="" wmode="transparent"></embed>
</object></noscript></div>
             
<div style="position: absolute; top: 50%; margin-top: 200px; height:200px; width:1120px; left: 140px;"><script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','1120','height','200','src','http://www.younghunting.com.au/images/water','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','bgcolor','','wmode','transparent','movie','http://www.younghunting.com.au/images/water' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="1120" height="200">  
  <param name="movie" value="http://www.younghunting.com.au/images/water.swf" />
  <param name="quality" value="high" />
  <param name="BGCOLOR" value="">
  <param name="wmode" value="transparent">
  <embed src="http://www.younghunting.com.au/images/water.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="1120" height="200" bgcolor="" wmode="transparent"></embed>
</object></noscript></div>

</div>

<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','450','src','http://www.younghunting.com.au/images/tree.swf','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','http://www.younghunting.com.au/images/tree.swf' ); //end AC code
</script>

<script type="text/javascript">

<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','1120','height','200','src','http://www.younghunting.com.au/images/water.swf','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','http://www.younghunting.com.au/images/water.swf' ); //end AC code
</script>
<script type="text/javascript">

</body>

**candyx** · 05-07-2009, 03:52 AM

I think it has something to do with this part of the code:

Code:

<div style="position: absolute; height:100%; width:100%; overflow: hidden; background-color: transparent; z-index:1">

I don't want the background to cause the site to scroll.

Thread: Div problem. White border appears when scrolling.

Thread Tools

Search Thread

Div problem. White border appears when scrolling.

Bookmarks

Bookmarks

Posting Permissions