You are trying to do too much by repurposing the standard Smugmug header. It would give you much better control to go to your site-wide-customization and turn off the standard Smugmug header completely and replace it with your own HTML that gives you full control over things and makes it easier to get consistent behavior among different browsers. Here's what I would suggest:
1) Go to your site-wide-customization and turn off the standard Smugmug header.
2) Replace your entire custom header with this HTML:
div id="myHeaderWrapper">
<div id="myBanner">
<a href="http://gallery.artsydots.com/">
<img src="http://gallery.artsydots.com/img/spacer.gif" alt="Artsy Dots" title="Artsy Dots" width="226" border="0" height="92">
</a>
</div>
<div id="navcontainer">
<ul>
<li><a href="http://gallery.artsydots.com/gallery/7827723_qHZuw"> ● Contact</a></li>
<li><a href="http://www.artsydots.com"> ● Artsydots.com</a></li>
<li><a href="http://artsydots.smugmug.com/gallery/7824904_eQwFC"> ● About</a></li>
<li><a href="http://artsydots.smugmug.com/galleries"> ● Galleries</a></li>
<li><a href="http://artsydots.smugmug.com"> Home</a></li>
</ul>
</div>
</div>
Replace your entire custom CSS with this:
#myHeaderWrapper {position:relative; margin: 10px 15px;}
.homepage #myHeaderWrapper, .category #myHeaderWrapper {width:750px; margin-left: auto; margin-right:auto;}
#myBanner {
width: 226px;
height: 92px;
background: transparent url(http://artsydots.smugmug.com/photos/494079889_YuNYA-M.png) no-repeat;
_background:none;
_filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader (enabled=true, sizingMethod=image src='http://artsydots.smugmug.com/photos/494079889_YuNYA-M.png');
}
/* this part hides the your photos/home, login and help links */
#toolbar a.nav {display: none;}
/* custom navigation bar */
#navcontainer {position:absolute; right:0; bottom:24px;}
#navcontainer ul {
margin: 0;
padding: 0;
list-style-type: none;
font-size: 16px;
_font-size: 14px;
font-variant: small-caps;
}
#navcontainer ul li {
display: inline;
float: right;
}
#navcontainer ul li a {
text-decoration: none;
padding: 0px 4px;
color: #fff;
}
#navcontainer ul li a:hover {
color: #b2a1c9;
}
#bioBox .photo {
display: none;
}
/* To center the slideshow, add the following to your CSS: */
#userBio {
text-align: center !important;
}
/*Change default image border color*/
.imgBorder {
border-color: #c8e8f0;
}
a:hover img.imgBorder,
.imgBorderOn {
border-color: #2d1138;
}
/* Text color */
a.title,
.title {
color:white;
}
/* Change color of links */
a:link {
color:#b2a1c9;
}
a:visited {
color:#b2a1c9;
}
a:hover {
color:#b2a1c9;
}
a:active {
color:#b2a1c9;
}
/* Change color of misc type and borders */
#lightBoxNav .title, #cartNav .title, #popUpnav .title {
color: #b2a1c9;
}
#cartFG .box .title {
color: #b2a1c9;
font-weight: bold;
}
.pageNav {
text-align: center;
color: #b2a1c9;
}
.pickerContent a.page:hover {
background-color: #b2a1c9;
}
.pickerContent .pageOn, .pickerContent a.pageOn:hover {
color: #b2a1c9;
}
/* footer adjustments */
/* turn off the login link on the minifooter */
.loginLink {
display: none;
}
/* turn off the cart link on the minifooter */
.cartlink_footer {
display: none;
}
#my_footer {
float: auto;
}
/* hides your name (including any 's) */
#userName {
display: none;
}
/* hides the word home */
#userHome {
display: none;
}
#feeds {
display:none;
}
p.updated {
display: none;
}
#photoKeywords {
display: none;
}
/* html only page for gallery XXXXXX */
.gallery_7824904 .nophotos {
display: none;
}
.gallery_7827723 .nophotos {
display: none;
}
.gallery_7828069 .nophotos {
display: none;
}
/* */
.homepage #galleriesBox,
.homepage #categoriesBox,
.homepage #featuredBox {
display: none;
}
.galleries #bioBox {
display: none;
}
.galleries #galleriesBox,
.galleries #categoriesBox,
.galleries #featuredBox {
display: block;
}
.loggedIn .homepage #galleriesBox,
.loggedIn .homepage #categoriesBox {
display: block;
}
/* ================================================== == */
/* == FAQ #18, Line up boxes with titles underneath === */
/* ============== Current as of 13 Feb 07 ============= */
/* ================================================== == */
.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;}
That should give you this on the homepage and category pages with a stretchy version on your gallery pages. Once you put all this in, we can see if it needs any finetuning on other pages and look at the other browsers.
http://content.screencast.com/users/jfriend/folders/Jing/media/6b7021bc-c819-4aed-9c86-f9a15b8cc2d0/2009-04-07_2120.png