PDA

View Full Version : Unable to get scroll bar working in Firefox



Hyrule
Mar 22nd, 2010, 10:24 PM
So i have a project that i need to complete tonight.

My brief is to create a website consisting of 8 pages using
XHTML
CSS
JavaScript

I have created all my pages in dreamweaver CS4, filled them with content but when i preview the page in Firefox i cannot scroll up and down the page, when previewing the page using Internet Explorer i can.

Here is an example of one of my pages in HTML code:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Store Page</title>

<link href="My CSS.css" rel="stylesheet" type="text/css" />

<script type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body onload="MM_preloadImages('Website Buttons/Home Button HIGHLIGHT.jpg','Website Buttons/News Button HIGHLIGHT.jpg','Website Buttons/Games button HIGHTLIGHT.jpg','Website Buttons/Coming Soon HIGHLIGHT.jpg','Website Buttons/About Us HIGHLIGHT.jpg','Website Buttons/Store button HIGHLIGHT.jpg')">


<div align="center" id="content">
<div id="header">
<td width="718" height="142"><div align="center"><img src="Website Buttons/7th studio logo.jpg" alt="" width="720" height="140" align="bottom" /></div></td>
<tr>
<th height="37" scope="rpw">
<div align="center"><a href="Home.html"><img src="Website Buttons/Home Button.jpg" name="Home Button" width="120" height="55" border="0" id="Home Button" /></a><a href="News.html"><img src="Website Buttons/News button.jpg" name="News Button" width="120" height="55" border="0" id="News Button" /></a><a href="Console Games.html"><img src="Website Buttons/Games Button.jpg" name="Games Button" width="120" height="55" border="0" id="Games Button" /></a><a href="Coming soon.html"><img src="Website Buttons/Coming soon button.jpg" name="Coming Soon Button" width="120" height="55" border="0" id="Coming Soon Button" /></a><a href="Who Are We.html"><img src="Website Buttons/About Us.jpg" name="About Us Button" width="120" height="55" border="0" id="About Us Button" /></a><a href="Shop.html"><img src="Website Buttons/Store button.jpg" name="Store Button" width="120" height="55" border="0" id="Store Button" /></a></div></th>
</tr>
</div>
<h1 align="center">
Welcome to the 7th Studio online store!</h1>
<div align="center">
<table width="722" border="1" align="center" id="container">
<tr>
<th width="253" scope="col"><div align="center"> Item </div></th>
<th width="228" scope="col"><div align="center">Description</div></th>
<th width="92" scope="col"><div align="center">Price</div></th>
<th width="121" scope="col"><div align="center">Buy Now</div></th>
</tr>
<tr>
<td height="112"><div align="center"></
<p><img src="Store Images/Book.jpg" width="144" height="92" /></p>
</div></td>
<td><p align="center">Maybe you could create the next 7th Studio video game character with this exclusive 7th Studio sketchbook.</p></td>
<td><div align="center">
<p>9.99</p>
</div></td>
<td><div align="center">
<div id="e1">
<form name="_xclick" target="paypal" action="https://www.paypal.com/uk/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_cart" />
<input type="hidden" name="business" value="[email protected]" />
<input type="hidden" name="currency_code" value="GBP" />
<input type="hidden" name="item_name" value="Sketchbook" />
<input type="hidden" name="amount" value="9.99" />
<table>
<tr>
<td><input type="image" src="Website Buttons/x-click-but22.gif" border="0" name="submit" alt="PayPal" /></td>
</tr>
</table>
<input type="hidden" name="add" value="1" />
</form>
</div>
</div></td>
</tr>
<tr>
<td height="246"><div align="center">
<p><img src="Store Images/T-Shirt.jpg" width="163" height="151" /></p>
</div></td>
<td><p align="center">Grab this T-Shirt while it's hot! You'll be the envy of your friends as you wear the hottest T-Shirt on the block. Suit up and represent 7th Studio. Available in Medium size only.</p></td>
<td><div align="center">
<p>&pound;16.99</p>
</div></td>
<td><div align="center">
<div id="e1">
<div id="e1"></div>
<form name="_xclick" target="paypal" action="https://www.paypal.com/uk/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="business" value="[email protected]">
<input type="hidden" name="currency_code" value="GBP">

<input type="hidden" name="item_name" value="7th_Studio_T-Shirt">
<input type="hidden" name="amount" value="16.99">
<table>
<tr>
<td><input type="image" src="Website Buttons/x-click-but22.gif" border="0" name="submit" alt="PayPal"></td>
</tr>
</table>
<input type="hidden" name="add" value="1">
</form>
</div>
</div>
<div id="e1"></div>
</td>
</tr>
<tr>
<td height="78" colspan="4"><div align="center">
<p>It is your responsibility to contact us by email or phone to advise us of your intention to return or exchange any item(s) within 7 days of receipt of them. Please note that, once opened and or used, products cannot be returned to us unless the product is faulty or broken. We will not refund your order unless the item/(s) are in saleable condition upon return. You will be liable for the cost of returning items to us.</p>
</div></td>
</tr>
</table>
</div>
<div align="center" id="content">
<div align="center" id="footer">
<div align="center">
<table width="357" border="0">
<tr>
<th width="418" height="43"><h4>Copyright &copy; 2010-2011 7th Studio Games Development. All rights reserved. </h4> <div align="center">
<h4>Web design and development by Theme Motion Web Design</h4>
</div></th>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

and this is my CSS code:

/* CSS Document */

body {
font-family: Arial, Helvetica, sans-serif;
background-image:url(Website Buttons/background.png);
color: #FFFFFF;
text-align:justify;
letter-spacing: normal;
vertical-align: middle;
word-spacing: normal;
position: fixed;
text-indent: 1px;
overflow: scroll;
background-color: #000;
}

td {
font-family: Arial, Helvectica, sans-serif;
text-align: left;
font-size: small;
background-color:#FFFFFF;
border-color: rgb(0,0,0);
}

th {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
background-color:#000000;
}

h1 {
font-family: Arial, Helvectica, sans-serif;
font-size: large;
colour: #6699CC;
color:#FFF;
border-color: #000;
text-align: center;
}

h2 {
font-family: Arial, Helvectica, sans-serif;
font-size: medium;
colour: #6699CC;
background-color: #FFFFFF;
color: #000000;
border-color: rgb(25,25,25);
font-style: normal;
font-variant: normal;
}

h3 {
font-family: Arial, Helvectica, sans-serif;
font-size:10px;
text color: #FFF;
text-align: center;
}

h4 {
font-family: Arial, Helvectica, sans-serif;
font-size:9px;
text color: #FFF;
}


p {
font-family: Arial, Helvectica, sans-serif;
border-color: rgb(0,0,0);
font-size: medium;
font-style: normal;
font-weight: normal;
font-variant: normal;
color: #000;
background-color: #FFFFFF;
}

/*--------------*/
/* LAYOUT */
/*------------*/

#header {
min-width: 753px;
border:none;
height: auto;
}

#container {
background-color: #FFF;
padding: 5px;
}

#wrapper {
padding: 5px;
}

#content {
padding: 1px 1px 1px 1px;
text-align: center;
margin-left: 15%;
margin-right: 15%;
}

#footer {
clear: both;
width: 100%;
text-align: center;
padding: 3px;
font-size: 8pt;
}


Does anyone have any ideas why it isn't working?

Thank you for any help i get in advance and i hope i made this thread in the right section :)

VIPStephan
Mar 23rd, 2010, 01:11 AM
Remove overflow: scroll, and most importantly: remove position: fixed from the body rule. Why are you using it at all?

abduraooft
Mar 23rd, 2010, 01:20 PM
My brief is to create a website consisting of 8 pages using
• XHTML
• CSS
• JavaScript You should aim for making semantic (http://boagworld.com/technology/semantic-code-what-why-how) documents, using the appropriate tags depending upon the contexts. And you should never use tables for making layouts (http://www.hotdesign.com/seybold/), which considered as very bad.