Help with some minor alignment and border issues on my site

[scottycam]

Hi..

I'm having some minor issues with my site that I'm unsure of how to fix. Could someone lend a hand?

kaderphotography.com is my site.

These are my issues:

1. On the home page, when you make the screen wider, my "slideshow" moves to the left. When you make it smaller (width wise) it centers again. I'd like to make it so that its centered all the time regardless of screen width.

2. When you go into my gallery, (gallery>portfolio>travel) you'll notice that when you widen the screen, you'll see that everything on the left moves with the screen except for the "STYLE: SMUGMUG". How can I get that to move with the screen?

3. I'm missing borders for the right side and the bottom to make a complete box. I'm not sure of the correct code to do this part.

4. Lastly, while in (gallery>Portfolio>Travel) if I wanted to go to page 2, I'd have to hit next. However, in my <gallerery>public>the great new england air show>, I can click on that arrow and it will give me a dropdown with the option to go to a certain page.

Now that I think of it, does this button only appear for more than 2 pages?


Thanks everyone for your help.

[jfriend]

1) Your home page doesn't have that centering problem in Firefox. My guess is that it's because of a syntax error in your CSS that is treated differently in the different browsers. When I put your CSS through the W3C validator, it shows me these meaningful errors:

/*.box { /* access any box element – mostly on home page but also comments */
border:2px solid #BAB0A6; /* put a light border around it 2 pixels wide */
}

In this block, you have to decide if you want the whole thing commented out of the whole thing active. It's half and half now and potentially rendering all the rest of your CSS inactive depending upon how the browser treats the extra comments. If you want the whole thing disabled, then just either delete it or just change the scope to one that will never match like this:

/* access any box element mostly on home page but also comments */
.xxbox {
border:2px solid #BAB0A6; /* put a light border around it 2 pixels wide */
}

In your banner CSS, the margin value must have units (if it isn't zero) and opacity is not widely supported. If you want opacity, you should just let the png give it to you.

#my_banner {
width:400px;
height: 90px;
margin: 34px auto;
background: url(http://kaderphotography.smugmug.com/photos/264291947_Hjhbu-O.png) no-repeat;
opacity: .9;
_filter: alpha(opacity=90);
}

Another one where you need units:

#navcontainer ul {
margin-top: -40px;
padding: 5px;
float: right;
list-style-type: none;
font-family: Times New Roman, Times New Roman;
font-size: 140%;
text-align: center;
}

In this one, you have too many digits for the color:

#navcontainer ul li a:hover {
color: #fff0000;
background-color: #000000;
}

Another one missing units and an extra comma:

#singleImage #photos,
#smugmug_small #photos,
#allthumbs #photos,{
margin:0; padding:1px;
}

Missing units again:

#filmstrip #photos,
#traditional #photos,
#smugmug #photos {
margin:5px; padding:5px;
}


This is just a chunk of invalid CSS. I'm not sure what you meant it to be. This is right before your text-align:center directive for your slideshow, so it's probably causing part of the problem. I'd recommend just deleting it.

.boxTop, .boxBottom (line 889)


}

After cleaning all those up, see if the centering problem in IE fixes itself.

2) For a much nicer style picker, see this thread (http://www.dgrin.com/showthread.php?t=111251&highlight=style+picker).

I'll be back in a few moments with thoughts on your questions 3) and 4).

[jfriend]

3) After you've cleaned up the CSS errors, you can get a solid border all the way around your galleries with this CSS:

#smugmug {border:1px solid #ffffff;}

4) Yes, I think you figure out the drop-down. It only appears if there are more than two pages.

[scottycam]

Hi John,
Thanks for taking the time to run through that for me. I knew it was a mess, but after tinkering with all the changes, i was hesitant to start deleting things not knowing clearly what each bit did.

I'm going to go through and make the changes that you suggested. Thanks so much!

3) After you've cleaned up the CSS errors, you can get a solid border all the way around your galleries with this CSS:

#smugmug {border:1px solid #ffffff;}

4) Yes, I think you figure out the drop-down. It only appears if there are more than two pages.