Jump to content

Why Is This Page Scrolling?


lastlifelost
 Share

Recommended Posts

I hate to ask so much, but can someone go over my code for this page:http://woodturningvt.com/betapage.phpAt lower resolutions, the page gets a vertical scroll when it shouldn't and I cannot for the life of me find the problem.CSS

/*  WOODTURNINGVT.com - Rosato Woodturning      *//*  GENERAL definitions  */*  {  padding:  0;  margin:   0;}body {  background: #fff url(images/site/bgfade.jpg) repeat-x top;  color:      #000;  height:     auto;  width:      100%;  position:   relative;  margin:     0px;  padding:    5px 0 0 0;}a , a:visited  , a img{  text-decoration: none;  border:          0px;  color:           #000;}ul {  list-style-type:  none;}h1  {  font-family: Georgia, "Times New Roman", Times, serif;  padding:      0 50px 10px 0;  display:      inline;}h2,h3  {   font-family: Georgia, "Times New Roman", Times, serif;  padding:      0 2em 0 0;  display:      inline;}/*  ID definitions  */#head {  float:   left;  margin:  10px 0 0 0;  padding: 0px;}#graybar {  border-bottom:   16px solid #baab8a;  margin-left:     294px;}#content {  position:   absolute;      top:    0px;      left:   0px;  float:      left;  width:      100%;}#topimgbox {  height:         87px;  width:          75%;  min-width:      440px;  padding-bottom: 10px;}#rightmargin {  width:       190px;  float:       right;  margin-top:  10px;  min-height:  580px;}/*  CLASS definitions  */.imgcontainer a {  text-decoration:  none;  border:           none;  }.imgcontainer img  {  margin:  4px;  }.imgcontainer a:hover img{  border:    2px ridge #009;  margin:    0px;  padding:   2px;  }div.imgcontainer  , .gallery ul  {  display:  -moz-inline-stack;  display:  inline-block;  zoom:     1;  /*  triggers hasLayout for IE  */  *display: inline;  /*  IE inline display  */.pagecontent {  font-family:  Verdana, Arial, Helvetica, sans-serif;  font-size:     1.5em;  line-height:  150%;  position:      relative;      top:        132px;  margin:       0 220px 300px 190px;  border:        2px solid blue  }  #hometext {  background:  url(images/site/rwlogowhole.png) top left no-repeat;  height:          150px;  max-width:   375px;  padding:       125px 0 0 255px;  margin:        -20px auto 0;  border:         1px solid red  }

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><!-- Mimic Internet Explorer 7 --><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /><title>Gallery - Rosato Woodturning</title><link href="rosatocss.css" rel="stylesheet" type="text/css" /><!-- SCRIPTS ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~--><script type="text/javascript"><!--function CloseWindow(el_id) {   var popup = document.getElementById(el_id);  popup.style.display='none';} function showWindow(el_id) {   var popup = document.getElementById(el_id);   popup.style.display='block';}//--></script><!-- END SCRIPTS ~~~~~~~~~~~~~~~~~~~~~~~~~~~--></head><body><div id="bglayers">  <img src="http://woodturningvt.com/images/site/rwlogotop.png" alt="Rosato Woodturning" width="294" height="183" id="head" />  <div id="graybar">    <div id="topimgbox">      <img src="http://woodturningvt.com/images/site/topplatter.png" alt="platter" class="floatleft"/>      <img src="http://woodturningvt.com/images/site/topbowl.png" alt="bowl" class="floatright"/>    </div>  <!-- END #topimgbox -->  </div>  <!-- END #graybar --></div> <!-- END #bglayers --><div id="content">  <div id="rightmargin">    <img src="http://woodturningvt.com/images/site/Lamp.png" alt="lamp" width="171" height="359" id="lamp"/>  </div> <!-- END #rightmargin -->   <div id="menu">  <?php include_once("php/nav.htm"); ?>  </div>  <!-- END #menu -->  <div class="pagecontent">  <div class="images">  <?php  //  RANDOM IMAGE GENERATOR  //  $dirarray = array('green','production','other');  $images = array('1'); //  primes the image array   foreach ($dirarray as $dpath)  {    $dir = glob('images/products/' . $dpath . '/thumbs/{*.jpg,*.png}',GLOB_BRACE);    foreach ($dir as $img)    {      array_unshift($images,$img);    }  }  array_pop($images);  shuffle($images);          $array = array('floatleft','floatright','centered');  foreach ($array as $loop)  {        $image = next($images);    $alt = pathinfo($image,PATHINFO_BASENAME);  //for image alt text    echo "<div class='imgcontainer $loop'><img src='$image' alt='$alt' height='120' width='160' /></div>\n    ";              }  ?>  </div>  <!-- END .images -->    <div id="hometext">	  <em style="font-size:1em">Continuing the tradition of woodturning in Vermont</em></h3>   </div>    <div class="images" style="position:fixed ; bottom:0px ; left:0px;">  <?php  //  RANDOM IMAGE GENERATOR CONTINUED  //  $array = array('floatleft','floatright','centered');  foreach ($array as $loop)  {        $image = next($images);    $alt = pathinfo($image,PATHINFO_BASENAME);  //for image alt text    echo "<div class='imgcontainer $loop'><img src='$image' alt='$alt' height='120' width='160' /></div>\n";              }  ?>      </div>  <!-- END .images -->    </div> <!-- END .pagecontent -->  <div id="copyright">    Copyright © 2009 Nick Rosato, Rosato Woodturning    <div id="webmaster">Webmaster: <a href="http://SosImagesOnline.com" target="blank">Sos Images Online</a></div>  </div> <!-- END #copyright --></div> <!-- END #content --></body></html>

Link to comment
Share on other sites

The div bglayers is 113px tall, and the right sidebar that lives inside #content has a min-height of nearly 600px. When you throw in the normal toolbars etc. at the top of a browser window, that's too big for most to display on one page.

Link to comment
Share on other sites

I thought of that but discarded the idea because the right sidebar is absolutely positioned to the top of the screen. When I put a border around that sidebar and view the site in 1024x768, I can see the whole div. Are there any other thoughts out there about why this is happening? Or perhaps solutions that will work around the issue? I tried hiding the overflow, but that did some VERY nasty things to the entire page.

Link to comment
Share on other sites

div.pagecontents is 410px heigh, and is offset from the top by 270px and has 300px clearance on the bottom due to the margins assigned to it. You can change the margins for that div to 0 220px 0px 190px and, at least in FF, notice no change in layout, but the scrollbar is longer (i.e. there's less running beyond the viewport). So that's progress.

Edited by chibineku
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...