Tweet
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;
}
Thanks.
Comment