Thanks J.
I got the slide to work - thanks to you but the gap between the slide and the nave is still there. I want the border of the slideshow to blend witht he border of the navbar. :(
Change your custom header to this:
<div id="myHeader">
<div id="my_banner"></div>
<div id="navcontainer">
<ul>
<li><a href="http://www.markjohnsonphotography.net" title="Home">HOME</a></li>
<li><a href="http://www.markjohnsonphotography.net/Portfolio/" title="The Gallery">the GALLERY</a></li>
<li><a href="http://www.markjohnsonphotography.net/Services/Portraits/" title="Our Services">our SERVICES</a></li>
<li><a href="http://www.markjohnsonphotography.net/Clients/gallery/" title="Customer Proofs">CUSTOMER proofs</a></li>
<li><a href="http://www.markjohnsonphotography.net/Contact-Page/RequestInfo/9453602_NFHcj" title="Request Info">REQUEST info</a></li>
<li><a href="http://www.markjohnsonphotography.net/BIO/BIO/8218766_Hobuk" title="About Me">ABOUT me</a></li>
<li><a href="http://www.mjphotographyblog.blogspot.com/" title="The BLOG">the BLOG</a></li>
</ul>
</div>
</div>
Change your entire CSS to this:
#my_banner
{width: 800px;
height: 117px;
margin: 0 auto;
background: url(http://markjohnsonphotography.smugmug.com/photos/648762445_NExua-O.png) no-repeat;
/*_background: none*/;
_filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader(enabled=true,sizingmethod=image,src='http ://markjohnsonphotography.smugmug.com/photos/648762445_NExua-O.png');}
body {background-color: #a9081c !important;}
#navcontainer ul {margin-bottom:0;}
/***** Homepage Code *****/
#homepage {width:850px; height: 450px;}
body.homepage {
background-color: #a9081c;}
#bioBox {padding-top: 0px; }
#bioBox .box {display: none;}
/*.homepage body {display: none;}*/
#my-footer {margin-bottom: -15px;
display: block;
text-align: center;
font-size: 10pt;
color: #FFFFFF;
font-family: Centuray Gothic;}
/* remove padding from the top of all the slideshow container elements */
#homepage, #bioBox .boxBottom, #userBio {padding-top:0;}
/* hide the breadcrumb on the homepage which often just takes up empty space */
#homepage #breadcrumb {display:none;}
/******==== Start NavBar ====******/
#myHeader {position:relative; width:800px; margin: 0 auto;}
#navcontainer ul {
padding: 0;
list-style-type: none;
font-weight: normal;
font-family: Century Gothic;}
#navcontainer {
width: 800px;
text-align:center;
position:absolute;
bottom: 2px;
left:0;
}
#navcontainer ul li a {
text-decoration: none;
padding: .20em .4em;
font-size: 9.5pt;
color: #ab133b;}
#navcontainer ul li {display: inline; }
#navcontainer ul li a:hover {
color: #000000;
text-decoration: italic;}
/******====End NavBar====******/
/*====Homepage====*/
#header_wrapper,
#userName,
#feeds
{display:none;}
#my-email-link
{font-size: 130%;}
/*=====2nd Homepage=====*/
.galleries #bioBox,
.homepage #galleriesBox,
.homepage #categoriesBox,
.homepage #featuredBox
{display:none;}
.galleries #galleriesBox,
.galleries #categoriesBox,
.galleries #featuredBox
{display: block;}
/*====Tighten Homepage====*/
#userBio {padding:0;}
#homepage {padding-top:0;}
.homepage #breadcrumb
{display:none;}
/*====No More Border====*/
.galleryPage,
.boxBottom,
.boxTop,
.box
{border:none !important;}
/*====No More Background====*/
.boxBottom,
.boxTop,
.box
{background:none !important;}
#bioBox .photo
{display:none;}
/*=====Galleries 4 Across=====*/
.miniBox {width:122px; text-align:center; height:210px; margin:0 28px;}
.miniBox .photo {float:none; width:122px; height:auto; _height:1px;}
.miniBox .albumTitle {width:122px;}
.miniBox .description {width:122px;}
.miniBox .updated {width:122px;}
.loggedIn .miniBox {height:auto; min-height:300px;}
.loggedIn .miniBox .smbuttons {margin:0 auto; width:122px;}
.loggedIn .miniBox input {width:122px;}
.loggedIn .miniBox textarea {width:112px;}
.boxBottom .albumLarge {width:192px; height:350px; text-align:center; margin:0 24px;}
.albumLarge .photoLarge {float:none; width:192px; height:auto; _height:1px;}
.albumLarge .albumTitle {width:192px;}
.albumLarge .description {width:192px;}
.albumLarge .updated {width:192px;}
.loggedIn .boxBottom .albumLarge {height:auto; min-height:450px;}
.loggedIn .albumLarge .smbuttons {margin:0 auto; width:192px;}
.loggedIn .albumLarge input {width:192px;}
.loggedIn .albumLarge textarea {width:182px;}
/*=====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");}*/
#breadcrumb {visibility: hidden;}
#altViews {visibility: visible;}
.loggedIn #breadcrumb {visibility: visible;}
/****** ==================END BREADCRUM CODE========================== ******/
#categoriesBox,
.category {border: none !important;}
.gallery_8040949_6py6P {border: none !important;}
#caption_top {display: block; text-align: center;}
#caption_bottom {display: none;}
/************************************************** ****************************/
div#thumbnails a:link img,
div#thumbnails a:visited img { border: 5px ridge orange; }
div#thumbnails a:hover img,
div#thumbnails a:active img { border: 5px ridge white; }
/************************************************** ****************************/
/************************** Tighten Homepage **************************/
#userBio {padding:0;}
.homepage #breadcrumb
{display:none;}
#bioBox .photo {display: none;}
/************************************************** ****************************/
.homepage .menu {display:none;}
.featured .menu,
.galleries .menu,
.bio .menu,
.menu {display:block;}
.homepage #enterSite {display:block;}
.featured #enterSite,
.galleries #enterSite,
.bio #enterSite,
#enterSite {display:none;}
#footer
{display:none !important;}
#myFooter {display: none;}
/*.homepage */
/*.homepage #navcontainer {display: none;}*/
.galleries #navcontainer {display: block;}
/**************************** Title Colors ****************************/
#galleryTitle,
#categoryTitle
{display:none;}
/************************** End Title Colors **************************/
#userBio {text-align: center !important;}
a.title, .title, .imgBorderOn {color: #fbc79d;}
/*====Image Border Color====*/
.imgBorder
{border-color:#fbc79d !important;}
/*====Selected Image border====*/
.imgBorderOn
{border-color:#FFFFFF !important;}
a.title, .title, .imgBorderOn {
color: #fbc79d;
}
/*====Image Border Hover====*/
a:hover img.imgBorder,
.imgBorderOn
{border-color:brown !important;}
.homepage #enterSite {display:block;}
/*.featured #enterSite,*/
.home #enterSite,
.home #enterSite,
#enterSite {display:none;}
#enterSite a {
font-size: 17pt;
text-decoration: none;
font-family: Trebuchet;
color: #F87217;}
#enterSite a:hover {
color: #FFFFFF;
text-decoration: underline;}
#enterSite
{text-align:center;
position:relative;
bottom: -625px;}
.top_border, /*removes gallery borders*/
.bottom_border,
.left_border,
.right_border {
border:0;
}
a.nav.next {color: #fbc79d;}
a.nav.prev {color: #fbc79d;}
a.nav.first {color: #fbc79d;}
a.nav.last {color: #fbc79d;}
/* page picker mods */
.pageNav, a.pageOn {
color: #fbc79d; /* this is the color for the Page N of N text */
font-weight: bold; /* match the photonav text, you may delete this if it's not bold */
}
.pageNav .nav {
font-weight: normal;
}
.pickerContent a.page {
color: #fbc79d;
font-weight: normal;
}
.pickerContent a.page:hover {
background-color: #fbc79d; /* this is the background hover color for the non-selected page, pick a light color from the theme */
color: #fbc79d; /* this is the text color, pick a dark color from the theme or use black */
}
.pickerContent a.pageOn, .pickerContent a.pageOn:hover {
background-color: #fbc79d; /* this is the background for the selected page, pick a medium dark color from the theme */
color: #fbc79d; /*text color for the selected page, light color or white */
}
/* hide captions and keywords under photos */
#caption_bottom {display: none}
#caption_top {display: none}
#photoKeywords {display: none}
#traditional .caption {display: none;}
#lightBoxCaption {display: none;}
/************************************************** *********************************/
#gallerytitle .gallery_8050419_kjekA {color:#F87217;font-variant:small-caps;font-size: 12pt;}
.gallery_524841949_uuEHd {color:#F87217;font-variant:small-caps;font-size: 12pt;}
.gallery_581473394_Vffic {font-color:#F87217;font-variant:small-caps;font-size: 12pt;}
/************************************************** *********************************/
/******==== Start Category Code ====******/
#subcategoriesBox .albumTitle .nav {color:#F87217;font-variant: small-caps;}
#subcategoriesBox .description {display: none;}
#categoriesBox .albumTitle .nav {color:#FFCC33;font-variant: small-caps;font-size: 12pt;}
/******==== End Category Code ====******/
/************** START gallery 8218766 *************/
.gallery_8218766 #albumDescription {
margin-top: -20px; /* gap from navbar at top */
background: none; /* background of description box */
padding: 5px 40px 40px 40px; /* top right bottom left */
} /* spacing inside box from edges */
.gallery_8218766 .myPhoto {
float: left; /* allows the text to flow to the right */
padding: 0 30px 10px 0; /* top right bottom left */
} /* spacing of text around photo */
.gallery_8218766 .myPhoto img {
border: 0px ridge #444; /* add border around photo */
}
.gallery_8218766 .myTitle {
font-family: Comic Sans MS, verdana;
font-size: 150%;
color: #444;
font-weight: bold;
text-align: center;
margin: 0 auto 30px auto; /* top right bottom left */
}
.gallery_8218766 .myText {
font-family: Century Gothic;
font-size: 10pt;
color: #fbc79d;
font-weight: normal;
text-align: justify;
}
.gallery_8218766 .myEmail {color: #444;}
.gallery_8218766 .myEmail:hover {color: red;}
/* things you can hide on page */
.gallery_8218766 .nophotos h3, /* if no photos in gallery */
.gallery_8218766 #albumNav_top,
.gallery_8218766 #albumNav_bottom,
.notLoggedIn .gallery_8218766 .journal_entry, /* hides photos in gallery */
.notLoggedIn .gallery_8218766 #breadcrumb {display: none;}
/************* END gallery 8218766 ************/
.gallery_9453602 .nophotos h3 {display: none;}
/************** START gallery 9386052 *************/
.gallery_9386052 #albumDescription {
margin-top: 10px; /* gap from navbar at top */
background: none; /* background of description box */
padding: 5px 40px 40px 40px; /* top right bottom left */
} /* spacing inside box from edges */
.gallery_9386052 .myPhoto {
float: left; /* allows the text to flow to the right */
padding: 0 30px 10px 0; /* top right bottom left */
} /* spacing of text around photo */
.gallery_9386052 .myPhoto img {
border: 0px ridge #444; /* add border around photo */
}
.gallery_9386052 .myTitle {
font-family: Century Gothic;
font-size: 13pt;
color: #fbc79d;
font-weight: normal;
text-align: center;
margin: 0 auto 30px auto; /* top right bottom left */
}
.gallery_9386052 .myText {
font-family: Century Gothic;
font-size: 10pt;
color: #fbc79d;
font-weight: normal;
text-align: justify;
}
.gallery_9386052 .myEmail {color: #444;}
.gallery_9386052 .myEmail:hover {color: red;}
/* things you can hide on page */
.gallery_9386052 .nophotos h3, /* if no photos in gallery */
.gallery_9386052 #albumNav_top,
.gallery_9386052 #albumNav_bottom,
.notLoggedIn .gallery_9386052 .journal_entry, /* hides photos in gallery */
.notLoggedIn .gallery_9386052 #breadcrumb {display: none;}
/************* END gallery 9386052 ************/
/************** START gallery 9398613 *************/
.gallery_9398613 #albumDescription {
margin-top: 10px; /* gap from navbar at top */
background: none; /* background of description box */
padding: 5px 40px 40px 40px; /* top right bottom left */
} /* spacing inside box from edges */
.gallery_9398613 .myPhoto {
float: left; /* allows the text to flow to the right */
padding: 0 30px 10px 0; /* top right bottom left */
} /* spacing of text around photo */
.gallery_9398613 .myPhoto img {
border: 0px ridge #444; /* add border around photo */
}
.gallery_9398613 .myPhoto2 {
float: right; /* allows the text to flow to the right */
padding: 0 30px 10px 0; /* top right bottom left */
} /* spacing of text around photo */
.gallery_9398613 .myPhoto2 img {
border: 0px ridge #444; /* add border around photo */
}
.gallery_9398613 .myTitle {
font-family: Comic Sans MS, verdana;
font-size: 150%;
color: #fbc79d;
font-weight: bold;
text-align: center;
margin: 0 auto 30px auto; /* top right bottom left */
}
.gallery_9398613 .myText {
font-family: Century Gothic;
font-size: 10pt;
color: #fbc79d;
font-weight: normal;
text-align: justify;
}
.gallery_9398613 .myEmail {color: #444;}
.gallery_9398613 .myEmail:hover {color: red;}
/* things you can hide on page */
.gallery_9398613 .nophotos h3, /* if no photos in gallery */
.gallery_9398613 #albumNav_top,
.gallery_9398613 #albumNav_bottom,
.notLoggedIn .gallery_9398613 .journal_entry, /* hides photos in gallery */
.notLoggedIn .gallery_9398613 #breadcrumb {display: none;}
/************* END gallery 9398613 ************/
Then, if you want to fine tweak the alignment of the slideshow, remove these two lines from your slideshow declaration:
Remove these two lines from your slideshow declaration:
borderColor: '7c1329',
borderThickness: '4',
It should look roughly like this in Firefox and we can check it out in IE after you make the changes:
http://content.screencast.com/users/jfriend/folders/Jing/media/2d79b5b0-6cec-4ea7-8fb4-b79e40461438/2009-09-14_0825.png