Web Analytics Made Easy -
StatCounter CSS Spacing Problem - CodingForum

Announcement

Collapse
No announcement yet.

CSS Spacing Problem

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Resolved CSS Spacing Problem

    http://www.piperhale.com/new/gallery.html

    On my gallery page there's some random white space near the bottom that I can't seem to get rid of. Here's my CSS code:

    Code:
    #banner, #main, #footer {
    	border-left : 1px solid;
    	border-right : 1px solid;
    	font-family : "Palatino Linotype", "Book Antiqua", Palatino, serif;
    }
    
    #banner {
    	height : 160px;
    	padding : 0;
    	background-color : #8b2323;
    }
    
    #banner h1 {
    	margin-left : 10px;
    }
    
    #title {
    	float : left;
    	height : 55px;
    	width : 460px;
    	margin : 0 0 0 2px;
    	color : white;
    	border-bottom : 1px solid white;
    	font-family : "Palatino Linotype", "Book Antiqua", Palatino, serif;
    }
    
    #address {
    	width : 200px;
    	height : 90px;
    	background-color : #8b2323;
    	float : right;
    	margin : 2px;
    	color : white;
    	font-family : "Palatino Linotype", "Book Antiqua", Palatino, serif;
    	padding-bottom : 10px;
    }
    
    #address p {
    	margin : 4px 4px 4px 12px;
    }
    
    #main {
    	background-color : #526f35;
    	margin: 0px;
    	padding: 0px;
    }
    
    
    #footer {
    	height : 30px;
    	background-color : #8b2323;
    	border-bottom : 1px solid;
    	padding: 0;
    	margin: 0;
    }
    
    #copyright {
    	height : 20px;
    	width : 400px;
    	color : white;
    	font-family : "Palatino Linotype", "Book Antiqua", Palatino, serif;
    }
    
    ul.mainNav {
    	border-bottom : 2px solid #526f35;
    	margin : 0;
    	padding-left : 40px;
    	float : left;
    	width : 918px;
    	padding-bottom : 0;
    }
    
    .mainNav li {
    	list-style : none;
    	float : left;
    	margin-right : 5px;
    	width : auto;
    	padding-right: 5px;
    }
    
    .mainNav a {
    	display : block;
    	padding : 7px 15px 7px 15px;
    	text-align : center;
    	text-decoration : none;
    	color : #fff;
    	font-weight : bold;
    	font-size : 1.2em;
    	text-transform : uppercase;
    }
    
    .mainNav a:hover {
    	color : #FC6;
    }
    
    #current {
    	background-color : white;
    }
    
    #current a {
    	display : block;
    	text-align : center;
    	text-decoration : none;
    	color : #000;
    	font-weight : bold;
    	font-size : 1.2em;
    	text-transform : uppercase;
    }
    
    #current a:hover {
    	color : #000;
    }
    
    #wrapper {
    	margin : 0 auto;
    	width : 960px;
    }
    
    #content {
    	width : 100%;
    }
    
    /* default link style - needed to make the :active work correctly in IE */
    a, a:visited, a:hover, a:active {
    	color:#000;
    }
    
    /* style the outer cntaining div to fit the landscape, portrait and buttons */
    #album {
    	width:320px; 
    	height:450px; 
    	background:#eee url(photos/photo38.jpg) 0 40px no-repeat;
    	border:1px solid #aaa;
    	margin:0 auto 0 auto;
    }
    
    /* remove the padding margin and bullets from the list. Add a top margin and width to fit the images and a position relative */
    .gallery {
    	padding:0; 
    	margin:320px 0 0 0; 
    	list-style-type:none; 
    	position:relative; 
    	width:320px;
    }
    
    /* remove the default image border */
    .gallery img {
    	border:0;
    }
    
    /* make the list horizontal */
    .gallery li {
    	float:left;
    }
    
    /* style the link text to be central in a surrounding box */
    .gallery li a, .gallery li a:visited {
    	font-size:11px;
    	float:left; 
    	text-decoration:none; 
    	color:#000; 
    	background:#fff; 
    	text-align:center; 
    	width:26px; 
    	height:26px; 
    	line-height:24px; 
    	border:1px solid #444;
    	margin:2px;
    }
    
    /* position the images using an absolute position and hide them from view */
    .gallery li a img {
    	position:absolute; 
    	top:-320px; 
    	left:0; 
    	visibility:hidden; 
    	border:0;
    }
    
    /* fix the top position for the landscape images */
    .gallery li a img.landscape {
    	top:-280px;
    }
    
    /* fix the left position for the portrait images */
    .gallery li a img.portrait {
    	left:0;
    	border-left:40px solid #eee;
    	border-right:40px solid #eee;
    }
    
    /* style the hover background color for the text boxes */
    .gallery li a:hover {
    	background:#ddd;
    }
    
    /* style the active/focus colors for the text boxes (required for IE) */
    .gallery li a:active, .gallery li a:focus {
    	background:#444; 
    	color:#fff;
    	outline:0;
    }
    
    /* make the images visible on active/focus */
    .gallery li a:active img, .gallery li a:focus img {
    	visibility:visible;
    	outline:0;
    }
    Last edited by Artifaxx; Aug 23, 2011, 09:56 PM.

  • #2
    If you're talking about the gap between your footer and your main content, you have a bottom margin of 20px on your #album div.

    Download firebug for firefox. Its a very useful tool for debugging issues like this. Does alot more as well.
    Teed

    Comment


    • #3
      Thanks, I changed that to 0, but I'm still having the same problem. Also, I'm using Safari so I can't use firebug

      Comment


      • #4
        Originally posted by Artifaxx View Post
        Thanks, I changed that to 0, but I'm still having the same problem. Also, I'm using Safari so I can't use firebug
        Did you refresh your browser?(ctrl+f5)
        Teed

        Comment


        • #5
          Ahh....Dreamweaver didn't upload the edited CSS file to my web server. I used filezilla to transfer the CSS file and now it works great Thanks.

          Comment

          Working...
          X