On my Gallery page, I just added a background image, and a black box behind the thumbnails.
I would like to resize the black box to be the same width as my header and navbar at 980px. Also, I would like the black box to touch the bottom of my navbar and go down just below the SmugMug footer.

Is this possible?

Thanks,
Stacie

Oh, and one more thing, how do I hide the background image on specific galleries?

Originally Posted by 4EverPhotography On my Gallery page, I just added a background image, and a black box behind the thumbnails. I would like to resize the black box to be the same width as my header and navbar at 980px. Also, I would like the black box to touch the bottom of my navbar and go down just below the SmugMug footer. Is this possible? Thanks, Stacie Oh, and one more thing, how do I hide the background image on specific galleries?

Update: I removed the SmugMug footer in Easy Customizer, so all I need for the black box is to set the width to 980px, and make it touch the bottom of the navbar.

First, your missing a closing brace here:

a:active {
color:#ffffff;}
#caption_top {
display: block; 
}

Then, you could add this to your css to remove the black box:

/*====No More Background====*/
.boxBottom,
.boxTop,
.box 
{background:none !important;}

Looks like I read your question wrong....add this to your CSS, and see if its what you want:

/*=====Wide Gallery Thumbs=====*/
.galleries #homepage,
#content.userKeywords,
#header_wrapper, #footer_wrapper, #cobrand_footer,
#category, #subcategory, #header,
#smugmug, .smugmug #header, .smugmug #footer 
{margin-left: 15px;
margin-right: 15px;
min-width: 755px;
width: auto;
_width: expression
(document.documentElement.clientWidth < 790? "760px" : "auto");}

Originally Posted by J Allen Looks like I read your question wrong....add this to your CSS, and see if its what you want: /*=====Wide Gallery Thumbs=====*/ .galleries #homepage, #content.userKeywords, #header_wrapper, #footer_wrapper, #cobrand_footer, #category, #subcategory, #header, #smugmug, .smugmug #header, .smugmug #footer {margin-left: 15px; margin-right: 15px; min-width: 755px; width: auto; _width: expression (document.documentElement.clientWidth < 790? "760px" : "auto");}

I added this code, then played around with it, and got it to look like what I wanted. The only problem is I want the black box behind the thumbnails to touch the bottom of the navbar. How can I do this?

Also, do you know how to remove the background image in specific galleries?

I want the black box behind the thumbnails to touch the bottom of the navbar.

Try this:

#galleriesBox
{position:relative;
bottom:60px}

Also, do you know how to remove the background image in specific galleries?

Something like this should work, just change the 'XXXXXX' to your gallery number:

.gallery_XXXXXX
{background-image: none !important;}

[quote=J Allen]Try this:

#galleriesBox
{position:relative;
bottom:60px}

Thanks!
This code works perfectly in Firefox, but it made the black box overlap the navbar in IE. Is there a way to fix it in IE?

[quote=4EverPhotography]

Originally Posted by J Allen Try this: #galleriesBox {position:relative; bottom:60px} Thanks! This code works perfectly in Firefox, but it made the black box overlap the navbar in IE. Is there a way to fix it in IE?

If the navbar was forced to be on top of all of the other page elements, (like bringing a layer to the top in Photoshop) shouldn't that fix the overlap problem with IE?

What code do I need to add?

Try adding this, and see if IE will play nice:

#navcontainer
{z-index:99;}

Originally Posted by J Allen Try adding this, and see if IE will play nice: #navcontainer {z-index:99;}

It didn't work, IE is so annoying...

Originally Posted by 4EverPhotography It didn't work, IE is so annoying...

To get this right, I think it needs a clean start. One key to consistent behavior in different browsers is to make it so no objects overlap. You are trying to fix the gap by overlaping objects rather than shrinking/hiding the object that is causing the gap.

Here's my suggestion:

Get rid of these:

#navcontainer
{z-index:99;}

#galleriesBox
{position:relative;
bottom:60px}

Then, add this:

#category {padding-top:0;}
#category #breadcrumb {display:none;}
#category .boxTop {display:none;}
#category #galleriesBox {padding-top:20px;}

Adjust the number in red to your liking.

This removes a little padding from the top of the category object that was causing a gap.
It gets rid of the breadcrumb object which was causing most of the gap.
It gets rid of the boxtop object which was causing the rest of the gap.
It puts a little spacing back in the galleriesBox so the thumbs aren't too close.

Originally Posted by jfriend To get this right, I think it needs a clean start. One key to consistent behavior in different browsers is to make it so no objects overlap. You are trying to fix the gap by overlaping objects rather than shrinking the object that is causing the overlap. Here's my suggestion: Get rid of these: #navcontainer {z-index:99;} #galleriesBox {position:relative; bottom:60px} Then, add this: #category {padding-top:0;} #category #breadcrumb {display:none;} #category .boxTop {display:none;} #category #galleriesBox {padding-top:20px;} Adjust the number in red to your liking. This removes a little padding from the top of the category object that was causing a gap. It gets rid of the breadcrumb object which was causing most of the gap. It gets rid of the boxtop object which was causing the rest of the gap. It puts a little spacing back in the galleriesBox so the thumbs aren't too close.

Thank you!!! It worked perfectly!