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 3 of 3
  1. #1
    Regular Coder
    Join Date
    Aug 2002
    Posts
    152
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Arrow Fix Overflow in images gallery

    Hello,

    Could someone please help me fix the vertical scrollbar issue that appears in the gallery as well as the overlapping of the last image in the gallery.

    http://www.greekconcierge.com/venue-gallery.php

    The CSS code is:

    Code:
    <style type="text/css">
    body {
    	margin: 0 auto;
    	padding: 0;
    	width: <% gallery_width %>;
    	font: 14px Georgia, "Times New Roman", Times, serif;
    }
    h1 {
    	font: normal 320%/100% Georgia, "Times New Roman", Times, serif;
    	margin: 20px 0 5px 0;
    	letter-spacing: -2px;
    }
    .credits {
    	border-bottom: solid 1px #ccc;
    	padding-bottom: 5px;
    	margin: 0 0 30px 0;
    	font: 120% Garamond, Georgia, serif;
    }
    .credits em {
    	color: #999;
    }
    .backlink a {
    	font-size: 10px;
    	text-decoration: none;
    	color: #AAA;
    }
    .backlink a:hover,
    .backlink a:visited:hover {
    	color: #000;
    }
    img {
    	border: none;
    }
    #page_nav {
    	color: #999;
    	clear:both;
    	text-align: center;
    }
    #page_nav a:link, #page_nav a:visited, #page_nav a:hover, #page_nav a:visited:hover {
    	text-decoration: none;
    	color: #222;
    }
    #breadcrumb_nav {
    	color: #999;
    }
    #breadcrumb_nav a:link, #breadcrumb_nav a:visited, #breadcrumb_nav a:hover, #breadcrumb_nav a:visited:hover {
    	text-decoration: none;
    	color: #222;
    }
    a {
    	color: black;	
    }
    #container {
    	overflow: auto;
    	width: 100%
    }
    .hidden {
    	visibility: hidden;
    	position:absolute;
    	top:0;
    	left:0;
    	display:inline;
    }
    
    /* ---------- gallery styles start here ----------------------- */
    .gallery {
    	list-style: none;
    	margin: 0;
    	padding: 0;
    }
    .gallery li {
    	padding: 0px;
    	margin: 0;
    	float: left;
    	position: relative;
    	width: 95px;
    	height: 95px;
    }
    .gallery li:hover img {
    	border-color: #000;
    	background: #000;
    }
    .gallery img {
    	background: #000;
    	border: solid 0px #888;
    	padding: 5px;
    }
    .gallery em {
    	background: #000 url(images/grey-gradient.gif) repeat-y;
    	color: #000;
    	font-style: normal;
    	padding: 2px 10px;
    	display: block;
    	position: absolute;
    	top: 110px;
    	left: 9px;
    	border: 0px solid #000;
    	border-left-color: #888;
    }
    .gallery a {
    	text-decoration: none;
    }
    .gallery a:hover em {
    	background: #000 url(images/orange-gradient.gif) repeat-y;
    	border-color: #000;
    }
    .newversion {
    	position: absolute;
    	right: 0;
    	top: 0;
    	margin: 0;
    	padding: 0;
    	border: none;
    	float: none;
    }
    .newversion a img {
    	background-color: transparent;
    	color: black;
    	border: none;
    	text-decoration: none;
    }
    </style>

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Try
    Code:
    .gallery li {
    	padding: 0px;
    	margin: 0;
    	float: left;
    	position: relative;
    	width: 95px;
    	/*height: 95px;*/
    
    }
    #container {
    	
    	width: 100%
    }
    
    .gallery {
    	list-style: none;
    	margin: 0;
    	padding: 0;
    overflow: auto;
    }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder
    Join Date
    Aug 2002
    Posts
    152
    Thanks
    5
    Thanked 0 Times in 0 Posts
    thanks you are a true legend !!


  •  

    Posting Permissions

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