Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Apr 2010
    Location
    Somerset,UK
    Posts
    138
    Thanks
    10
    Thanked 1 Time in 1 Post

    Scroll bar appearing when I dont think it should

    Hi all

    This problem is driving me bonkers. I have a page displaying some photos, using a simple rollover gallery. It all works ok and validates etc but for some reason which I cannot figure out, a scroll bar is appearing to scroll down the page.

    I have checked the heights and as far as I can see there is nothing that is making the page to heigh to warrant a scroll bar appearing.

    All my other pages, using the same template, have not got this problem so it must be something on the page.

    Can anyone help or has anyone got any clues?? I have tried overflows in the left and right div but that doesn't help. and the black image in the right column is there to add height so the rollover image fits! There maybe an easier way to do this but it will work for now......my problem is the blasted scrolly bar!!

    CSS
    Code:
    @charset "UTF-8";
    /* CSS Document */
    
    * {
    	margin:0;
    	padding:0;
    }
    
    body {
    	background-color:#000;
    	color:#FFF;
    	font-family:Tahoma, Geneva, sans-serif;
    	font-size:14px;
    }
    
    #wrapper {
    	position:relative;
    	width:1000px;
    	height:auto;
    	margin-left:auto;
    	margin-right:auto;
    	margin-top:10px;
    	padding:10px;
    }
    
    /*nav bar*/
    #nav {
    	position:relative;
    	width:960px;
    	height:60px;
    	margin-left:auto;
    	margin-right:auto;
    	padding-top:20px;
    	padding-right:20px;
    	background-image:url(images/nav_bar.png);
    	background-repeat:no-repeat;
    	text-align:right;
    }
    
    .nav ul {
    	margin: 20px;
    }
    
    .nav li {
    	padding:10px 10px 2px 10px;
    	list-style-type:none;
    	display:inline;
    	font-size:15px;
    	color:#FFF;
    }
    
    .nav li:hover {
    	border-bottom:medium solid #999;
    }
    /*end nav bar*/
    
    #intro {
    	position:relative;
    	float:left;
    	width:580px;
    	height:auto;
    	margin-top:20px;
    	padding:10px;
    	font-size:15px;
    }
    
    #home_image {
    	position:relative;
    	float:left;
    	width:380px;
    	height:auto;
    	margin-top:20px;
    }
    
    #design {
    	position:relative;
    	float:left;
    	width:310px;
    	height:200px;
    	margin:20px 10px;
    	background-color:#FFF;
    	background-image:url(images/box_bg.png);
    	color:#000;
    }
    
    #photo {
    	position:relative;
    	float:left;
    	width:310px;
    	height:200px;
    	margin:20px 10px;
    	background-color:#FFF;
    	background-image:url(images/box_bg.png);
    	color:#000;
    }
    
    #about {
    	position:relative;
    	float:left;
    	width:310px;
    	height:200px;
    	margin:20px 10px;
    	background-color:#FFF;
    	background-image:url(images/box_bg.png);
    	color:#000;
    }
    
    #left {
    	position:relative;
    	float:left;
    	width:570px;
    	height:auto;
    	margin:10px 10px 10px 0;
    	padding:10px;
    }
    
    #right {
    	position:relative;
    	float:left;
    	width:360px;
    	height:auto;
    	margin:10px 0 10px 0;
    	padding:10px;
    	overflow:hidden;
    }	
    
    #footer {
    	position:relative;
    	float:left;
    	width:960px;
    	height:12px;
    	margin-left:auto;
    	margin-right:auto;
    	padding-top:2px;
    	padding-bottom:2px;
    	background-image:url(images/footer.jpg);
    	color:#FFF;
    	text-align:right;
    	font-size:10px;
    	border-radius:2px;
    }
    
    ul {
    	margin:6px 0 0 30px;
    	list-style-type:square;
    }
    
    li {
    	padding:6px 0 0 10px;
    }
    
    /*header texts*/
    
    
    h1 {
    	font-size:26px;
    	margin:10px;
    	/*text-shadow: 2px 2px 2px #666;*/
    }
    
    h2 {
    	font-size:18px;
    	margin:14px 0 0 10px;
    	color:#666;
    }
    
    h3 {
    	font-size:18px;
    	margin:0 0 0 10px;
    	text-decoration:underline;
    }
    	
    /*end header texts*/
    
    
    p {
    	padding:6px;
    }
    
    img.floatleft_portfolio {
    	float:left;
    	display:block;
    	margin: 4px 8px 4px 10px;
    	padding: 2px;
    	border:thin solid #FFF;
    }
    
    img.floatright_portfolio {
    	float:right;
    	display:block;
    	margin: 0 100px 0 0;
    }
    
    img.floatleft_about {
    	float:left;
    	display:block;
    	margin: 20px 0 0 60px;
    }
    
    a:link, a:visited, a:active {
    	color:#FFF;
    	text-decoration:none;
    	font-weight:normal;
    }
    
    a:hover  {
    	color:#FFF;
    	font-weight:normal;
    }
    
    /*Gallery CSS*/
    .thumbnail img{
    	border: 1px solid white;
    	margin: 5px 5px 5px 5px;
    }
    
    .thumbnail:hover{
        background-color: transparent;
    }
    
    .thumbnail:hover img{
        border: 1px solid #000;
    }
    
    .thumbnail span{ /*CSS for enlarged image*/
    	position: absolute;
    	background-color: #000;
    	padding: 2px;
    	left: -1500px;
    	visibility: hidden;
    	color: black;
    	text-decoration: none;
    	text-align:center;
    	border:thin solid #FFF;
    }
    
    .thumbnail span img{ /*CSS for enlarged image*/x
    	padding: 2px;
    }
    
    .thumbnail:hover span{ /*CSS for enlarged image*/
    	visibility: visible;
    	top: 0px;
    	left: 600px; /*position where enlarged image should offset horizontally */
    	z-index: 50;
    }
    /*End gallery CSS*/
    HTML
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html><!-- InstanceBegin template="/Templates/other_temp.dwt" codeOutsideHTMLIsLocked="false" -->
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    
    <!-- InstanceBeginEditable name="doctitle" -->
    <title>CT Designs - Photography</title>
    <script src="scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    
    <script type="text/javascript">
    
    	$(document).ready(function() {
    		$('.thumbnail img').animate({
    			opacity:.5
    		});
    		$('span img').stop({
    			opacity:.1
    			});
    		
    		$('.thumbnail img').hover(function(){
    			$(this).stop().animate({opacity:1},'fast');
    		}, function(){
    			$(this).stop().animate({opacity:.5}, 'slow');
    		});
    	});
    
    
    </script>
    
    <!-- InstanceEndEditable -->
    <!-- InstanceBeginEditable name="head" -->
    <!-- InstanceEndEditable -->
    <link href="ct_page_style.css" rel="stylesheet" type="text/css">
    </head>
    
    <body>
    <div id="wrapper">
      <div id="nav">
        <ul class="nav">
         <li class="nav"><a href="index.html">Home</a></li>
         <li class="nav"><a href="about.html">About</a></li>
         <li class="nav"><a href="portfolio.html">Design</a></li>
         <li class="nav"><a href="photography.html">Photography</a></li>
         <li class="nav"><a href="contact.html">Contact</a></li>
        </ul>
        </div>
      <!-- InstanceBeginEditable name="page_left" -->
      <div id="left"><a class="thumbnail" href="#thumb"><img src="thumbs/berries.jpg" alt="Crab Apples" width="60px" height="60px" ><span><img src="photos/117.jpg" alt="Crab Apples" width="277" height="360"></span></a>
    
    <a class="thumbnail" href="#thumb"><img src="thumbs/grass.jpg" alt="Sun beams on river" width="60px" height="60px" ><span><img src="photos/grass_tint.jpg" alt="Sun beams on river" width="277" height="360"></span></a>
    
    <a class="thumbnail" href="#thumb"><img src="thumbs/ladder.jpg" alt="Beach textures" width="60px" height="60px" ><span><img src="photos/ladder.JPG" alt="Beach textures" width="277" height="360"></span></a> 
    
    <a class="thumbnail" href="#thumb"><img src="thumbs/ray.jpg" alt="Sun rays through trees" width="60px" height="60px" ><span><img src="photos/ray_black_white.jpg" alt="Sun rays through trees" width="310" height="233"></span></a>
    
    <a class="thumbnail" href="#thumb"><img src="thumbs/beach_sm.jpg" alt="Beach" width="60px" height="60px" ><span><img src="photos/beach.jpg" alt="Beach" width="277" height="360"></span></a>
    
    <br>
    
    <a class="thumbnail" href="#thumb"><img src="thumbs/twig.jpg" alt="Driftwood" width="60px" height="60px" ><span><img src="photos/twig.jpg" alt="Driftwood" width="277" height="360"></span></a>
    
    <a class="thumbnail" href="#thumb"><img src="thumbs/pylons_sm.jpg" alt="Pylons" width="60px" height="60px" ><span><img src="photos/pylons.jpg" alt="Pylons" width="277" height="360" ></span></a>
    
    <a class="thumbnail" href="#thumb"><img src="thumbs/trees.jpg" alt="Eerie trees" width="60px" height="60px" ><span><img src="photos/trees_1.JPG" alt="Eerie trees" width="277" height="360"></span></a>
    
    <a class="thumbnail" href="#thumb"><img src="thumbs/candle_sm.jpg" alt="Candle" width="60px" height="60px" ><span><img src="photos/candle.jpg" alt="Candle" width="277" height="360"></span></a>
    
    <a class="thumbnail" href="#thumb"><img src="thumbs/building_sm.jpg" alt="building" width="60px" height="60px" ><span><img src="photos/building.jpg" alt="Building" width="277" height="360"></span></a>
    
    <br>
    
    <a class="thumbnail" href="#thumb"><img src="thumbs/meandc_sm.jpg" alt="Together" width="60px" height="60px" ><span><img src="photos/meandc.jpg" alt="Together" width="277" height="360"></span></a>
    
    <a class="thumbnail" href="#thumb"><img src="thumbs/meg_sm.jpg" alt="Meg" width="60px" height="60px" ><span><img src="photos/meg.JPG" alt="Meg" width="277" height="360"></span></a>
    
    <p>Click <a href="http://instagrid.me/claire_t1980/" onclick="window.open('http://instagrid.me/claire_t1980/','new','');return false"><em>here</em></a> to view my pictures
    on Instagram.</div>
      <!-- InstanceEndEditable --><!-- InstanceBeginEditable name="page_right" -->
      <div id="right"><p>These are just a few of the photos
            I have<br> taken.</p>
            <p>Hover over the thumbnails to view
              larger<br> image. </p>
              <p>My images have been modified
               using<br> apps on my phone and
                Photoshop,<br> others are simply
                 O-natural.</p>
                 <img src="images/black.jpg" height="200" width="180" alt="Blank" ></div>
                 
      <!-- InstanceEndEditable -->
      <div id="footer">Designed by CT Designs &copy; 2012</div>
        </div>
        
    </body>
    <!-- InstanceEnd --></html>
    Thanks in advance as always!
    Hmmmm......scratchy head time......

  • #2
    New Coder
    Join Date
    Sep 2012
    Location
    NWO Canada
    Posts
    12
    Thanks
    0
    Thanked 2 Times in 2 Posts

    Post

    try

    Code:
       overflow:hidden;
    and an
    Code:
      overflow:auto;
    on your main one ?

  • #3
    Regular Coder
    Join Date
    Apr 2010
    Location
    Somerset,UK
    Posts
    138
    Thanks
    10
    Thanked 1 Time in 1 Post
    Ahhh Thanks!!

    I put overflow:hidden on my wrapper and it worked......knew it would be something simple!!

    Thanks again!
    Hmmmm......scratchy head time......

  • #4
    New Coder
    Join Date
    Sep 2012
    Location
    NWO Canada
    Posts
    12
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Cool np glad I could help


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •