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

why is extra space coming from somewhere making firefox and safari add scrollbars? (dreamweaver website)

Hi,

Ive been searching on here for an answer but couldn't find it so far.

this is a website i am working on: http://www.dulvy.com/index.html

extra space is being added at the bottom of the page when there is nothing there!

as a result firefox and safari are adding right side scroll bars when every page should be small enough to fit without one.

on a computer with a larger screen e.g. 1440 by 900 - there definitely shouldn't be any right side browser scrollbar.  i realize that with smaller resolutions there will be a scrollbar but it is too big - like something else is there when it isn't!

it looks normal in dreamweaver - the page stops just below the contact details bit.

i think this may have been happening  since i added a drop down menu to the projects button but im not entirely sure.

please could someone have a look at my html to see if you can see the problem?

thank you!
<!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>
<link rel="SHORTCUT ICON" href="web_images/favicon.ico"/><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>...:::Dulvy Lab:::...</title>
<link href="css/index.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/anylinkcssmenu.css" />
 
 
<style type="text/css">
<!--
body {
	background-image: url(web_images/eagleray_background.jpg);
	margin-top: 0px;
	background-repeat: repeat;
}
a:link {
	color: #666666;
}
a:hover {
	color: #666666;
}
a:visited {
	color: #666666;
}
a:active {
	color: #5F5F5F;
}
-->
</style>
 
<script type="text/javascript" src="Scripts/anylinkcssmenu.js">
 
/***********************************************
* AnyLink CSS Menu script v2.0- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Project Page at http://www.dynamicdrive.com/dynamicindex1/anylinkcss.htm for full source code
***********************************************/
 
</script>
 
<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>
 
 
 
<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>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
 
<body onload="MM_preloadImages('web_images/home_blue.gif','web_images/students_blue.gif','web_images/publications.gif','web_images/collab_blue.gif')">
<div id="around">
<div id="blocker"></div>
 
<div id="links_bar"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','web_images/home_blue.gif',1)"><img src="web_images/home_grey.gif" name="Image1" width="87" height="34" border="0" align="left" id="Image1" /></a>
 
<div id="projects_dropdown2"><a href="submenu_example.html" class="anchorclass" rel="submenu1"onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','web_images/projects_blue.gif','Image3','','projects_blue.gif',1)"><img src="web_images/projects_grey.gif" name="Image2" width="143" height="34" border="0" id="Image2" /></a>
<div id="submenu1" class="anylinkcss">
<ul>
<li>
  <div align="center"><a href="DELETE.html">Extinction risk</a></div>
</li>
<li>
  <div align="center"><a href="DELETE.html">Biodiversity Indicators</a></div>
</li>
<li>
  <div align="center"><a href="DELETE.html">Climate Change</a></div>
</li>
<li>
  <div align="center"><a href="DELETE.html">Fisheries</a></div>
</li>
<li>
  <div align="center"><a href="DELETE.html">Sharks</a></div>
</li>
<li>
  <div align="center"><a href="DELETE.html">Coral Reefs</a></div>
</li>
</ul>
</div></div>
 
 
 
 
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','web_images/collab_blue.gif',1)"><img src="web_images/collab_grey.gif" alt="" name="Image6" width="192" height="34" border="0" id="Image6" /></a><a href="students.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','web_images/students_blue.gif',1)"><img src="web_images/students_grey.gif" name="Image4" width="143" height="34" border="0" id="Image4" /></a><a href="publications.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','web_images/publications.gif',1)"><img src="web_images/publications_grey.gif" name="Image5" width="192" height="34" border="0" id="Image5" /></a></div>
 
<div id="buttons">
  <script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','562','height','223','src','flash/project_btns_smaller','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','flash/project_btns_smaller' ); //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="562" height="223">
    <param name="movie" value="flash/project_btns_smaller.swf" />
    <param name="quality" value="high" />
    <embed src="flash/project_btns_smaller.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="562" height="223"></embed>
  </object>
</noscript></div>
 
<div id="image_viewer">
  <script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','352','height','150','src','flash/photo_viewer2','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','flash/photo_viewer2' ); //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="352" height="150">
    <param name="movie" value="flash/photo_viewer2.swf" />
    <param name="quality" value="high" />
    <embed src="flash/photo_viewer2.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="352" height="150"></embed>
  </object>
  </noscript>
  </div>
 
<div id="news_feed"><script src="http://feeds2.feedburner.com/dulvy?format=sigpro" type="text/javascript" ></script><noscript><p>Subscribe to RSS headline updates from: <a href="http://feeds2.feedburner.com/dulvy"></a><br/>Powered by FeedBurner</p> </noscript></div>
 
</div>
 
<div id="contacts"> 
  <div align="center"><a href="feed://dulvy.wordpress.com/feed/" target="_blank"><img src="web_images/rss.gif" width="22" height="23" border="0" align="absmiddle" /></a> <span class="style8"><a href="mailto:nick_dulvy@sfu.ca"> e-mail Nick    </a> Dr. Nicholas K. Dulvy,  Biological Sciences, 8888 University Drive, Simon Fraser University, Burnaby, BC V5A 1S6, CANADA</span></div>
</div>
 
<script type="text/javascript">
 
//anylinkcssmenu.init("menu_anchors_class") //call this function at the very *end* of the document!
anylinkcssmenu.init("anchorclass")
</script>
</body>
 
</html>

Open in new window

0
kikisu
Asked:
kikisu
  • 3
  • 2
  • 2
  • +1
5 Solutions
 
v2MediaCommented:
FF3 doesn't add a scrollbar. IE6 does, and that's because you explicitly style them in your css file. Try deleting the scroll bar colours from your css (only works in IE anyway).
0
 
HyperDawnCommented:
I believe this problem occurs because the area it's scrolling to is the area where an element would have been if you hadn't altered it using position: absolute or relative etc.

You can probably fix it by adding something like overflow: hidden or perhaps by making sure each element has a position defined.
0
 
Dan-LLCommented:
just a hunch.. the background is not fixed and masive

try

background-attachment:fixed;

in the css file of body

0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
kikisuAuthor Commented:
Hello everybody, thanks for your time and help,

v2media, i deleted the scrollbar colours from my css but it didn't effect the side bar - it was still present so i put the colours back in.

hyperdawn, I tried adding overflow hidden to the to the divs but it also had no effect.

Dan-LL, i tried that but it didnt make a differnce, i also deleted the background to double check but the extra space was still there.

well, at least i am reducing the possibilities! I will keep experimenting! thank you for your help

below is my css for the index page (prob a bit messy)

thanks
@charset "UTF-8";
#around {
	background-image: url(../web_images/delete_grey.gif);
	background-repeat: no-repeat;
	height: 610px;
	width: 945px;
	margin-right: auto;
	margin-left: auto;
}
#links_bar {
	height: 34px;
	width: 930px;
	margin-top: 60px;
	margin-left: 7px;
	margin-bottom: 0px;
}
#around #blocker {
	height: 20px;
	width: 945px;
}
#around #buttons {
	height: 225px;
	width: 565px;
	margin-top: 255px;
	margin-left: 10px;
	float: left;
	display: inline;
	
	
}#contacts {
	width: 945px;
	margin-right: auto;
	margin-left: auto;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	height: 25px;
	
}
#around #image_viewer {
	float: right;
	width: 352px;
	margin-top: 180px;
	height: 150px;
	margin-right: 10px;
	margin-left: 8px;
	clear: right;	
	display: inline;
	
}
#around #news_feed {
	float: right;
	height: 130px;
	width: 345px;
	overflow: auto;
	margin-right: 15px;
	color: #666666;
	margin-top: 15px;
	margin-left: 10px;
	clear: right;
	display: inline;
	
}
#creditfooter
{
display: none;
}
 
div.feedburnerFeedBlock > ul > li > .date { 
        display: inline; 
        padding-left: 10px; 
		font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #666666;
	font-size: 14px;
}
 
div.feedburnerFeedBlock ul { 
margin-left:0; 
padding-left:0; 
list-style-type: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #666666;
	font-size: 14px;
 
}
 
div.feedburnerFeedBlock p.feedTitle {
font-weight:bold; 
font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #666666;
	font-size: 16px;
	text-align: center;
	
}
 
 
 
div.feedburnerFeedBlock { 
border:3px solid #66ccff; 
background-color:#ccffff; 
padding:12px;
margin-top: -30px;
 
}
 
div.feedburnerFeedBlock ul li span.headline { 
font-weight:bold; 
font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #666666;
	font-size: 14px;
	
}
 
div.feedburnerFeedBlock ul li span a
{
font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #666666;
	font-size: 14px;
}
 
BODY{
scrollbar-face-color: #ccffff;
scrollbar-arrow-color: #00ccff;
scrollbar-track-color: #ccffff;
}
#around #blocker2 {
	float: right;
	height: 40px;
	width: 200px;
}
#around #links_bar #projects_link {
	width: 143px;
	height: 34px;
	float: left;
	clear: left;
}
#projects_dropdown {
	height: 34px;
	width: 143px;
	float: left;
}
#around #links_bar #projects_dropdown2 {
	height: 34px;
	width: 143px;
	float: left;
}
#projects_nav {
	background-color: #003300;
	height: 34px;
	width: 143px;
}
#around2 #blocker2 {
	float: right;
	height: 40px;
	width: 200px;
}
 
#projects_dropdown {
	height: 34px;
	width: 143px;
	float: left;
}
#around2 #links_bar #projects_dropdown2 {
	height: 34px;
	width: 143px;
	float: left;
	z-index: 140;
	}

Open in new window

0
 
Dan-LLCommented:
been right through it, can't see why this has happened, bet it will something really simple when you find it.
0
 
v2MediaCommented:
Right, got it.

Add to the page css :

div {
      border: 1px solid #FF0000;
}

You'll see that div id "image-viewer" and div id "anylinkshadow" aren't positioned properly. They both appear below the footer.

Fix the css so that these elements position properly and the problem will go away.
0
 
kikisuAuthor Commented:
Hi v2Media,

thanks for the help, wont that give everything a red border though?

thanks
0
 
v2MediaCommented:
Remove it once you've corrected the position of the errant divs. It's just for debugging purposes.
0

Featured Post

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.

  • 3
  • 2
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now