• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 180
  • Last Modified:

Lost scroll bar in both IE and FF when displaying images with CSS

Hi,

I am using CSS for the first time to controll where my images go, however when i add content to my page that goes beyond the normal view of the screen neither IE or FF will allow me to scroll down.

If anyone can tell me where Im going wrong and why I would be very grateful.

I am working in VS2008 and am slowly converting the HTLM images into <asp:image> display methods....


.body {

	background-image: url(../_images/DNA_Background.jpg);
	background-repeat: repeat-x;
	background-color: #999;
    overflow: auto;
   
 }
.head_image  {
        display:block;
        position:fixed;
        left:130px;
        top:-40px;
           
                
} 

.text {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	color: #000;	
	}
	
.headline {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 16px;
	font-style: normal;
	font-weight: bold;
	color: #FFF;	
}

.tbbody_background 
{
    position:fixed;
    left:100px;
    top:323px; 
    background-repeat: no-repeat;
}
.tleft {
	background-image: url(../_images/DNA_Left.png);
	background-repeat: no-repeat;
}
.tabel_location 
{
 position:fixed;
 left:140px;
 top:325px;   
   
}

Open in new window

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">

    <title>DNA Scaffolding</title>
<link href="CSS/DNA.css" rel="stylesheet" type="text/css" />

</head>
<body class="body">
<!--<span class=head_image></span>--> 

<form id="form1" runat="server">

    <asp:Image ID="Head_Image" runat="server" ImageUrl="_images/DNA_Head.png"  CssClass=head_image/>
    <asp:Image ID="Image1" runat="server" ImageUrl="_images/DNA_Body.png" CssClass=tbbody_background/>

   




<table width="1065px" align="center" border="0" cellspacing="0" cellpadding="0" class=tabel_location>
  
  <tr>
    
    <td height="740" valign="top" >
    <table width="90%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="21%" valign="top"><p><img src="_images/Link_Button_Home.png" alt="" width="201" height="51" /><br />
          <img src="_images/Link_Button_About.png" alt="" width="201" height="51" /><br />
          <img src="_images/Link_Button_Contact.png" alt="" width="201" height="51" /><br />
          <img src="_images/Link_Button_Health.png" alt="" width="201" height="51" /><br />
          <img src="_images/Link_Button_Previous.png" alt="" width="201" height="51" /><br />
          <img src="_images/Link_Button_Services.png" alt="" width="201" height="51" /><br />
          <img src="_images/Link_Button_Pricing.png" alt="" width="201" height="51" /><br />
        </p></td>
        <td width="3%"></td>
        <td width="76%" valign="top"><div>
          <div>
            <p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and   typesetting industry. Lorem Ipsum has been the industry's standard dummy text   ever since the 1500s, when an unknown printer took a galley of type and   scrambled it to make a type specimen book. It has survived not only five   centuries, but also the leap into electronic typesetting, remaining essentially   unchanged. It was popularised in the 1960s with the release of Letraset sheets   containing Lorem Ipsum passages, and more recently with desktop publishing   software like Aldus PageMaker including versions of Lorem Ipsum.</p>
            </div>
          <div>
            <h2>Why do we use it?</h2>
            <p>It is a long established fact that a reader will be distracted by the   readable content of a page when looking at its layout. The point of using Lorem   Ipsum is that it has a more-or-less normal distribution of letters, as opposed   to using 'Content here, content here', making it look like readable English.   Many desktop publishing packages and web page editors now use Lorem Ipsum as   their default model text, and a search for 'lorem ipsum' will uncover many web   sites still in their infancy. Various versions have evolved over the years,   sometimes by accident, sometimes on purpose (injected humour and the   like).</p>
            </div>
          </div>          <div>
            <div>
              <h2>Where does it come from?</h2>
              <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has   roots in a piece of classical Latin literature from 45 BC, making it over 2000   years old. Richard McClintock, a Latin professor at Hampden-Sydney College in   Virginia, looked up one of the more obscure Latin words, consectetur, from a   Lorem Ipsum passage, and going through the cites of the word in classical   literature, discovered the undoubtable source. Lorem Ipsum comes from sections   1.10.32 and 1.10.33 of &quot;de Finibus Bonorum et Malorum&quot; (The Extremes of Good and   Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of   ethics, very popular during the Renaissance. The first line of Lorem Ipsum,   &quot;Lorem ipsum dolor sit amet..&quot;, comes from a line in section 1.10.32.</p>
              <p>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below   for those interested. Sections 1.10.32 and 1.10.33 from &quot;de Finibus Bonorum et   Malorum&quot; by Cicero are also reproduced in their exact original form, accompanied   by English versions from the 1914 translation by H. Rackham.</p>
              </div>
            
          </div></td>
      </tr>
      </table>  
    </td>    
  </tr>
</table> 
</div>
    </form>
</body>
</html>

Open in new window

0
SimonPrice33
Asked:
SimonPrice33
  • 5
1 Solution
 
cfEngineersCommented:
try taking out

overflow: auto;
0
 
SimonPrice33Author Commented:
Hi,

before i tried overflow: auto; there was noting there and this didnt work,
also, overflow: scroll; gives the appearance of scroll, but doesnt allow me to actually scroll down...

its as if it just doesnt see anything below the line of the screen.....
0
 
SimonPrice33Author Commented:
I have found that its CssClass=tbbody_background that is the issue....

just need to look into fixing it....
0
Technology Partners: 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!

 
SimonPrice33Author Commented:
actually,

i was wrong, its because the position is fixed, however,  if i dont fix them to their positions i cant seem to get them where I want them......

any suggestions??

0
 
SimonPrice33Author Commented:
ah ha!!!

fixed it....

had to change fixed to absolute...

yay me!!
0
 
SimonPrice33Author Commented:
i fixed it....
0

Featured Post

Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now