lastlifelost Posted October 7, 2009 Share Posted October 7, 2009 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 More sharing options...
chibineku Posted October 7, 2009 Share Posted October 7, 2009 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 More sharing options...
lastlifelost Posted October 8, 2009 Author Share Posted October 8, 2009 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 More sharing options...
Synook Posted October 8, 2009 Share Posted October 8, 2009 It is the #rightmargin - explore the page in Firebug. Link to comment Share on other sites More sharing options...
lastlifelost Posted October 8, 2009 Author Share Posted October 8, 2009 I took a look at the page in Firebug, but I guess I'm not seeing what you are. As a last ditch effort to verify this issue, I removed the #rightmargin div entirely. The page is still doing it. What am I missing here? Link to comment Share on other sites More sharing options...
lastlifelost Posted October 8, 2009 Author Share Posted October 8, 2009 bumped for further need of assistance - I still can't find the problem. The page is active now with the #rightmargin taken out, it still scrolls on smaller screens or shrunken browser windows. Link to comment Share on other sites More sharing options...
chibineku Posted October 8, 2009 Share Posted October 8, 2009 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. Link to comment Share on other sites More sharing options...
lastlifelost Posted October 9, 2009 Author Share Posted October 9, 2009 Thanks! I'll take a look at that and report back my results. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.