largelylivin
Feb-02-2008, 01:46 PM
Warning: If you don't understand Sprites and Flyouts, this will make no sense to you at all!
I have, and they work, right hand menu buttons that on hover cause a flyout of submenus to occur. The flyout menus are created with visibility: hidden. When the cursor hovers over a menu button, its visibility is set to visible.
I need to take snapshots of my screens in 'action', like you might for a user manual, so I manually change visibility:hidden to visible so that the flyout is there while I take the snapshot. PROBLEM: the flyout shows-up in a different location when I set visibility manually than on hover. It works the same in IE7 and Firefox.
NOTE: my site is currently set-up to show the problem.
Direct Link: http://smile-123.smugmug.com
Does this qualify for CSS problem of the day? Does the award involve cash?
CSS:
#localButtons,
#photoButtons,
#otherButtons
{
display: block;
margin: 0 auto;
font-size: .9em;
padding: 0;
color: #1c2a6f;
}
/* vertical offset on screen*/
#localButtons {position: absolute; top:50px; left: -24px;}
#photoButtons {position: absolute; top:215px;left: -24px;}
#otherButtons {position: absolute; top:430px;left: -24px;}
/* roll-over buttons */
#localButtons .flyout { margin-top: 10px; list-style:none; width:107px; height:150px; position:absolute; z-index: 600; }
#photoButtons .flyout {margin-top: 10px; list-style:none; width:107px; height:200px; position:absolute; z-index: 600; }
#otherButtons .flyout {margin-top: 10px; list-style:none; width:107px; height:50px; position:absolute; z-index: 600; }
#localButtons .flyout ul,
#photoButtons .flyout ul,
#otherButtons .flyout ul {
padding:0;
margin:0 auto;
list-style:none;
} /* original except color*/
#localButtons .flyout li,
#photoButtons .flyout li,
#otherButtons .flyout li {
display:block; width:107px; height:46px;/* color: #1c2a6f;*/ text-align: left;
vertical-align: middle; padding-top: 2px;
padding-bottom: 2px; white-space: wrap;
}
#localButtons .flyout li a,
#localButtons .flyout li a:visited {display:block; background:url(/photos/240734387-O.png); height: 46px; width: 107px; padding-top: 2px; padding-bottom: 2px; position: absolute;}
#photoButtons .flyout li a,
#photoButtons .flyout li a:visited {display:block; background:url(/photos/240734386-O.png); height: 46px; width: 107px; padding-top: 2px; padding-bottom: 2px; position: absolute;}
#otherButtons .flyout li a,
#otherButtons .flyout li a:visited {display:block; background:url(/photos/240734384-O.png); height: 46px; width: 107px; padding-top: 2px; padding-bottom: 2px; position: absolute;}
/* initial non-hover positions for each button on background image */
#localButtons .flyout li a.yachtSales { background-position: 0 0; }
#localButtons .flyout li a.localAccommodations { background-position: 0 -92px; }
#localButtons .flyout li a.localServices { background-position: 0 -184px; }
#photoButtons .flyout li a.findGalleries { background-position: 0 0px;}
#photoButtons .flyout li a.findPhotos { background-position: 0 -92px;}
#photoButtons .flyout li a.findBrands { background-position: 0 -184px;}
#photoButtons .flyout li a.findTypes { background-position: 0 -276px;}
#otherButtons .flyout li a.otherDestinations { background-position: 0 0px;}
/* hover positions for each button on background image */
#localButtons .flyout li a:hover.yachtSales { background-position: 0 -46px;}
#localButtons .flyout li a:hover.localAccommodations { background-position: 0 -138px;}
#localButtons .flyout li a:hover.localServices { background-position: 0 -230px;}
#photoButtons .flyout li a:hover.findGalleries { background-position: 0 -46px;}
#photoButtons .flyout li a:hover.findPhotos { background-position: 0 -138px;}
#photoButtons .flyout li a:hover.findBrands { background-position: 0 -230px;}
#photoButtons .flyout li a:hover.findTypes{ background-position: 0 -322px;}
#otherButtons .flyout li a:hover.otherDestinations { background-position: 0 -46px;}
/* can replace background with a unique image */
#localButtons .flyout ul.yachtSales {visibility:hidden; display:block; width:200px; position: absolute; left: -199px; vertical-align: middle; top: 9px; height: 38px;background: #66feff; opacity:0.8; filter:alpha(opacity=80);}
#localButtons .flyout ul.localAccommodations {visibility:hidden; display:block; width:200px; position: absolute; left: -199px; vertical-align: middle; top: -47px; height: 112px; background: #66feff; opacity:0.8; filter:alpha(opacity=80);}
#localButtons .flyout ul.localServices {visibility:hidden; display:block; width:200px; position: absolute; left: -199px; vertical-align: middle; top: -47px; height:112px; background: #66feff; opacity:0.8; filter:alpha(opacity=80);}
#photoButtons .flyout ul.findGalleries {visibility:visible; display:block; width:200px; position: absolute; left: -199px; vertical-align: middle; top: -47px; height: 138px; background: #66feff; opacity:0.8; filter:alpha(opacity=80);}
#photoButtons .flyout ul.findPhotos {visibility:hidden; display:block; width:200px; position: absolute; left: -199px; vertical-align: middle; top: -47px; height: 152px; background: #66feff; opacity:0.8; filter:alpha(opacity=80);}
#photoButtons .flyout ul.findBrands {visibility:hidden; display:block; width:200px; position: absolute; left: -199px; vertical-align: middle; top: 9px; height: 28px; background: #66feff; opacity:0.8; filter:alpha(opacity=80);}
#photoButtons .flyout ul.findTypes {visibility:hidden; display:block; width:200px; position: absolute; left: -199px; vertical-align: middle; top: -47px; height: 112px; background: #66feff; opacity:0.8; filter:alpha(opacity=80);}
#otherButtons .flyout ul.otherDestinations {visibility:hidden; display:block; width:200px; position: absolute; left: -199px; vertical-align: middle; top: -14px; height: 84px;background: #66feff; opacity:0.8; filter:alpha(opacity=80);}
#localButtons .flyout table,
#photoButtons .flyout table,
#otherButtons .flyout table
{ position:absolute;
border-collapse:collapse;
top:0; left:0;
z-index:9998 !Important;
} /* original */
#localButtons .flyout li,
#photoButtons .flyout li,
#otherButtons .flyout li
{ float:left;
margin-bottom:1px;
} /* original */
#localButtons .flyout li ul,
#photoButtons .flyout li ul,
#otherButtons .flyout li ul
{ visibility:hidden;
position:absolute;
border-left:1px solid #fff;
padding-top:4px;
}
#localButtons .flyout li ul li,
#photoButtons .flyout li ul li,
#otherButtons .flyout li ul li
{ display:block; display:inline;
font-size: .9em;
width:190px;
height:22px;
border:0;
margin:0 5px;
background: transparent;
} /* original */
#localButtons .flyout li ul li a,
#localButtons .flyout li ul li a:visited
{ text-indent:0;
background:transparent;
display:block; /*font-size:.9em;*/
font-weight: bold;
width:190px;
height:22px;
line-height:21px;
color: #1c2a6f;
border-bottom:1px solid #1c2a6f;
text-decoration:none;
} /* original */
#photoButtons .flyout li ul li a,
#photoButtons .flyout li ul li a:visited
{ text-indent:0;
background:transparent;
display:block; /*font-size:.9em;*/
font-weight: bold;
width:190px;
height:22px;
line-height:21px;
color: #1c2a6f;
border-bottom:1px solid #1c2a6f;
text-decoration:none;
} /* original */
#otherButtons .flyout li ul li a,
#otherButtons .flyout li ul li a:visited
{ text-indent:0;
background:transparent;
display:block; /*font-size:.9em;*/
font-weight: bold;
width:190px;
height:22px;
line-height:21px;
color: #1c2a6f;
border-bottom:1px solid #1c2a6f;
text-decoration:none;
} /* original */
* html .flyout li a:hover
{ position:relative;
white-space:normal;
padding-left: 2px;
border-width: 1px;
border-style: solid;
border-color: #1c2a6f;
}
* html .flyout li a:hover ul li a:hover
{ outline: 1px solid #1c2a6f; }
#localButtons .flyout li:hover,
#photoButtons .flyout li:hover,
#otherButtons .flyout li:hover
{position:relative; z-index: 9998; }
#localButtons .flyout li:hover ul li a:hover,
#photoButtons .flyout li:hover ul li a:hover,
#otherButtons .flyout li:hover ul li a:hover
{ padding-left: 2px;
border-width: 1px;
border-style: solid;
border-color: #1c2a6f;
}
#localButtons .flyout li:hover b,
#localButtons .flyout li a:hover b {
visibility:visible;
} /* original */
#localButtons .flyout li:hover ul,
#localButtons .flyout li a:hover ul {
visibility:visible;
} /* original */
#photoButtons .flyout li:hover b,
#photoButtons .flyout li a:hover b {
visibility:visible;
} /* original */
#photoButtons .flyout li:hover ul,
#photoButtons .flyout li a:hover ul {
visibility:visible;
} /* original */
#otherButtons .flyout li:hover b,
#otherButtons .flyout li a:hover b {
visibility:visible;
} /* original */
#otherButtons .flyout li:hover ul,
#otherButtons .flyout li a:hover ul {
visibility:visible;
} /* original */
HTML
<div id="localButtons">
<ul class="flyout">
<li>
<a href="#nogo" class="yachtSales">
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="yachtSales">
<li><a href="/gallery/3917405" title="See Our Yacht
Sales Sponsors">Yacht Sales</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<a href="#nogo" class="localAccommodations">
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="localAccommodations">
<li><a href="/gallery/3913439" title="See Our
Marina Sponsors">Marinas</a></li>
<li><a href="/gallery/3917371" title="Find
transient slips">Transient Slips</a></li>
<li><a href="/gallery/3917410" title="See Our
Restaurant Sponsors">Restaurants</a></li>
<li><a href="/gallery/3917427" title="Find Dock n Dine Restaurants">Dock n Dine</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<a href="#nogo" class="localServices">
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="localServices">
<li><a href="#nogo" title="Coming Soon">Marine
Surveyors</a></li>
<li><a href="#nogo" title="Coming Soon">Bait and Tackle</a></li>
<li><a href="#nogo" title="Coming Soon">Marine
Supplies</a></li>
<li><a href="#nogo" title="Coming Soon">Marine
Services</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul><!-- flyout -->
</div>
<!-- localButtons -->
<div id="photoButtons">
<ul class="flyout">
<li>
<a href="#nogo" class="findGalleries">
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="findGalleries">
<li><a href="/By-Location" title="See Galleries by
Location">By Location</a></li>
<li><a href="/By-Event" title="See Event Related
Galleries">By Event</a></li>
<li><a href="/By-Client" title="See Galleries by
Client">By Client</a></li>
<li><a href="/gallery/3301938"
title="Our Gallery of Local Birds Photographs">Marsh and Shore Birds</a></li>
<li><a href="/gallery/3301948" title="Our Gallery of Places to Go">Landmarks and Parks</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<a href="#nogo" class="findPhotos">
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="findPhotos">
<li><a href="/keyword" title="See a list of
keywords to photographs">By Boat Name or Keyword</a></li>
<li><a href="/date" title="Search by Date Range">By
Date</a></li>
<li><a href="http://smile-123.smugmug.com/homepage/templatechange.mg?TemplateID=7&origin=http://smile-123.smugmug.com/popular" title="Voted most popular by
You!">Most Popular Photos</a></li>
<li><a href="http://smile-123.smugmug.com/homepage/templatechange.mg?TemplateID=7&origin=http://smile-123.smugmug.com/keyword/finished" title="Selected Examples of our Finished Prints">Finished Photos</a></li>
<li><a href="http://smile-123.smugmug.com/homepage/templatechange.mg?TemplateID=7&origin=http://smile-123.smugmug.com/keyword/unclaimed" title="Selected Photos Looking for a Good Home">Orphan (Unclaimed) Photos</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<a href="#nogo" class="findBrands">
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="findBrands">
<li><a href="/gallery/4108252">See Photos by Brand
Name</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<a href="#nogo" class="findTypes">
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="findTypes">
<li><a href=
"http://smile-123.smugmug.com/homepage/templatechange.mg?TemplateID=7&origin=http://smile-123.smugmug.com/keyword/sail%20boat"
title="Search for Sail Boats">Sailboats</a></li>
<li><a href=
"http://smile-123.smugmug.com/homepage/templatechange.mg?TemplateID=7&origin=http://smile-123.smugmug.com/keyword/performance%20boat"
title="Search for Performance Boats">Performance
Boats</a></li>
<li><a href=
"http://smile-123.smugmug.com/homepage/templatechange.mg?TemplateID=7&origin=http://smile-123.smugmug.com/keyword/jet%20ski"
title="Search for Jet Skis">Jet Skis</a></li>
<li><a href=
"http://smile-123.smugmug.com/homepage/templatechange.mg?TemplateID=7&origin=http://smile-123.smugmug.com/keyword/commercial"
title="Search for Commercial Boats">Commercial
Boats</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
<!-- photoButtons -->
<div id="otherButtons">
<ul class="flyout">
<li>
<a href="#nogo" class="otherDestinations">
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="otherDestinations">
<li><a href="http://blue-dog.smugmug.com" target=
"_blank" title="We Turn Photographs into Art">Photo
Retouching</a></li>
<li><a href="http://vintage-photos.blogspot.com/"
target="_blank" title="See My Vintage Photo Blog">
Vintage Photos</a></li>
<li><a href=
"http://www.smugmug.com/?referrer=VMaPuO1BD8DIg"
target="_blank" title="I can get you $5 off!">Join
SmugMug</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
<!-- otherButtons -->
</div>
<!-- right_margin -->
I have, and they work, right hand menu buttons that on hover cause a flyout of submenus to occur. The flyout menus are created with visibility: hidden. When the cursor hovers over a menu button, its visibility is set to visible.
I need to take snapshots of my screens in 'action', like you might for a user manual, so I manually change visibility:hidden to visible so that the flyout is there while I take the snapshot. PROBLEM: the flyout shows-up in a different location when I set visibility manually than on hover. It works the same in IE7 and Firefox.
NOTE: my site is currently set-up to show the problem.
Direct Link: http://smile-123.smugmug.com
Does this qualify for CSS problem of the day? Does the award involve cash?
CSS:
#localButtons,
#photoButtons,
#otherButtons
{
display: block;
margin: 0 auto;
font-size: .9em;
padding: 0;
color: #1c2a6f;
}
/* vertical offset on screen*/
#localButtons {position: absolute; top:50px; left: -24px;}
#photoButtons {position: absolute; top:215px;left: -24px;}
#otherButtons {position: absolute; top:430px;left: -24px;}
/* roll-over buttons */
#localButtons .flyout { margin-top: 10px; list-style:none; width:107px; height:150px; position:absolute; z-index: 600; }
#photoButtons .flyout {margin-top: 10px; list-style:none; width:107px; height:200px; position:absolute; z-index: 600; }
#otherButtons .flyout {margin-top: 10px; list-style:none; width:107px; height:50px; position:absolute; z-index: 600; }
#localButtons .flyout ul,
#photoButtons .flyout ul,
#otherButtons .flyout ul {
padding:0;
margin:0 auto;
list-style:none;
} /* original except color*/
#localButtons .flyout li,
#photoButtons .flyout li,
#otherButtons .flyout li {
display:block; width:107px; height:46px;/* color: #1c2a6f;*/ text-align: left;
vertical-align: middle; padding-top: 2px;
padding-bottom: 2px; white-space: wrap;
}
#localButtons .flyout li a,
#localButtons .flyout li a:visited {display:block; background:url(/photos/240734387-O.png); height: 46px; width: 107px; padding-top: 2px; padding-bottom: 2px; position: absolute;}
#photoButtons .flyout li a,
#photoButtons .flyout li a:visited {display:block; background:url(/photos/240734386-O.png); height: 46px; width: 107px; padding-top: 2px; padding-bottom: 2px; position: absolute;}
#otherButtons .flyout li a,
#otherButtons .flyout li a:visited {display:block; background:url(/photos/240734384-O.png); height: 46px; width: 107px; padding-top: 2px; padding-bottom: 2px; position: absolute;}
/* initial non-hover positions for each button on background image */
#localButtons .flyout li a.yachtSales { background-position: 0 0; }
#localButtons .flyout li a.localAccommodations { background-position: 0 -92px; }
#localButtons .flyout li a.localServices { background-position: 0 -184px; }
#photoButtons .flyout li a.findGalleries { background-position: 0 0px;}
#photoButtons .flyout li a.findPhotos { background-position: 0 -92px;}
#photoButtons .flyout li a.findBrands { background-position: 0 -184px;}
#photoButtons .flyout li a.findTypes { background-position: 0 -276px;}
#otherButtons .flyout li a.otherDestinations { background-position: 0 0px;}
/* hover positions for each button on background image */
#localButtons .flyout li a:hover.yachtSales { background-position: 0 -46px;}
#localButtons .flyout li a:hover.localAccommodations { background-position: 0 -138px;}
#localButtons .flyout li a:hover.localServices { background-position: 0 -230px;}
#photoButtons .flyout li a:hover.findGalleries { background-position: 0 -46px;}
#photoButtons .flyout li a:hover.findPhotos { background-position: 0 -138px;}
#photoButtons .flyout li a:hover.findBrands { background-position: 0 -230px;}
#photoButtons .flyout li a:hover.findTypes{ background-position: 0 -322px;}
#otherButtons .flyout li a:hover.otherDestinations { background-position: 0 -46px;}
/* can replace background with a unique image */
#localButtons .flyout ul.yachtSales {visibility:hidden; display:block; width:200px; position: absolute; left: -199px; vertical-align: middle; top: 9px; height: 38px;background: #66feff; opacity:0.8; filter:alpha(opacity=80);}
#localButtons .flyout ul.localAccommodations {visibility:hidden; display:block; width:200px; position: absolute; left: -199px; vertical-align: middle; top: -47px; height: 112px; background: #66feff; opacity:0.8; filter:alpha(opacity=80);}
#localButtons .flyout ul.localServices {visibility:hidden; display:block; width:200px; position: absolute; left: -199px; vertical-align: middle; top: -47px; height:112px; background: #66feff; opacity:0.8; filter:alpha(opacity=80);}
#photoButtons .flyout ul.findGalleries {visibility:visible; display:block; width:200px; position: absolute; left: -199px; vertical-align: middle; top: -47px; height: 138px; background: #66feff; opacity:0.8; filter:alpha(opacity=80);}
#photoButtons .flyout ul.findPhotos {visibility:hidden; display:block; width:200px; position: absolute; left: -199px; vertical-align: middle; top: -47px; height: 152px; background: #66feff; opacity:0.8; filter:alpha(opacity=80);}
#photoButtons .flyout ul.findBrands {visibility:hidden; display:block; width:200px; position: absolute; left: -199px; vertical-align: middle; top: 9px; height: 28px; background: #66feff; opacity:0.8; filter:alpha(opacity=80);}
#photoButtons .flyout ul.findTypes {visibility:hidden; display:block; width:200px; position: absolute; left: -199px; vertical-align: middle; top: -47px; height: 112px; background: #66feff; opacity:0.8; filter:alpha(opacity=80);}
#otherButtons .flyout ul.otherDestinations {visibility:hidden; display:block; width:200px; position: absolute; left: -199px; vertical-align: middle; top: -14px; height: 84px;background: #66feff; opacity:0.8; filter:alpha(opacity=80);}
#localButtons .flyout table,
#photoButtons .flyout table,
#otherButtons .flyout table
{ position:absolute;
border-collapse:collapse;
top:0; left:0;
z-index:9998 !Important;
} /* original */
#localButtons .flyout li,
#photoButtons .flyout li,
#otherButtons .flyout li
{ float:left;
margin-bottom:1px;
} /* original */
#localButtons .flyout li ul,
#photoButtons .flyout li ul,
#otherButtons .flyout li ul
{ visibility:hidden;
position:absolute;
border-left:1px solid #fff;
padding-top:4px;
}
#localButtons .flyout li ul li,
#photoButtons .flyout li ul li,
#otherButtons .flyout li ul li
{ display:block; display:inline;
font-size: .9em;
width:190px;
height:22px;
border:0;
margin:0 5px;
background: transparent;
} /* original */
#localButtons .flyout li ul li a,
#localButtons .flyout li ul li a:visited
{ text-indent:0;
background:transparent;
display:block; /*font-size:.9em;*/
font-weight: bold;
width:190px;
height:22px;
line-height:21px;
color: #1c2a6f;
border-bottom:1px solid #1c2a6f;
text-decoration:none;
} /* original */
#photoButtons .flyout li ul li a,
#photoButtons .flyout li ul li a:visited
{ text-indent:0;
background:transparent;
display:block; /*font-size:.9em;*/
font-weight: bold;
width:190px;
height:22px;
line-height:21px;
color: #1c2a6f;
border-bottom:1px solid #1c2a6f;
text-decoration:none;
} /* original */
#otherButtons .flyout li ul li a,
#otherButtons .flyout li ul li a:visited
{ text-indent:0;
background:transparent;
display:block; /*font-size:.9em;*/
font-weight: bold;
width:190px;
height:22px;
line-height:21px;
color: #1c2a6f;
border-bottom:1px solid #1c2a6f;
text-decoration:none;
} /* original */
* html .flyout li a:hover
{ position:relative;
white-space:normal;
padding-left: 2px;
border-width: 1px;
border-style: solid;
border-color: #1c2a6f;
}
* html .flyout li a:hover ul li a:hover
{ outline: 1px solid #1c2a6f; }
#localButtons .flyout li:hover,
#photoButtons .flyout li:hover,
#otherButtons .flyout li:hover
{position:relative; z-index: 9998; }
#localButtons .flyout li:hover ul li a:hover,
#photoButtons .flyout li:hover ul li a:hover,
#otherButtons .flyout li:hover ul li a:hover
{ padding-left: 2px;
border-width: 1px;
border-style: solid;
border-color: #1c2a6f;
}
#localButtons .flyout li:hover b,
#localButtons .flyout li a:hover b {
visibility:visible;
} /* original */
#localButtons .flyout li:hover ul,
#localButtons .flyout li a:hover ul {
visibility:visible;
} /* original */
#photoButtons .flyout li:hover b,
#photoButtons .flyout li a:hover b {
visibility:visible;
} /* original */
#photoButtons .flyout li:hover ul,
#photoButtons .flyout li a:hover ul {
visibility:visible;
} /* original */
#otherButtons .flyout li:hover b,
#otherButtons .flyout li a:hover b {
visibility:visible;
} /* original */
#otherButtons .flyout li:hover ul,
#otherButtons .flyout li a:hover ul {
visibility:visible;
} /* original */
HTML
<div id="localButtons">
<ul class="flyout">
<li>
<a href="#nogo" class="yachtSales">
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="yachtSales">
<li><a href="/gallery/3917405" title="See Our Yacht
Sales Sponsors">Yacht Sales</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<a href="#nogo" class="localAccommodations">
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="localAccommodations">
<li><a href="/gallery/3913439" title="See Our
Marina Sponsors">Marinas</a></li>
<li><a href="/gallery/3917371" title="Find
transient slips">Transient Slips</a></li>
<li><a href="/gallery/3917410" title="See Our
Restaurant Sponsors">Restaurants</a></li>
<li><a href="/gallery/3917427" title="Find Dock n Dine Restaurants">Dock n Dine</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<a href="#nogo" class="localServices">
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="localServices">
<li><a href="#nogo" title="Coming Soon">Marine
Surveyors</a></li>
<li><a href="#nogo" title="Coming Soon">Bait and Tackle</a></li>
<li><a href="#nogo" title="Coming Soon">Marine
Supplies</a></li>
<li><a href="#nogo" title="Coming Soon">Marine
Services</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul><!-- flyout -->
</div>
<!-- localButtons -->
<div id="photoButtons">
<ul class="flyout">
<li>
<a href="#nogo" class="findGalleries">
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="findGalleries">
<li><a href="/By-Location" title="See Galleries by
Location">By Location</a></li>
<li><a href="/By-Event" title="See Event Related
Galleries">By Event</a></li>
<li><a href="/By-Client" title="See Galleries by
Client">By Client</a></li>
<li><a href="/gallery/3301938"
title="Our Gallery of Local Birds Photographs">Marsh and Shore Birds</a></li>
<li><a href="/gallery/3301948" title="Our Gallery of Places to Go">Landmarks and Parks</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<a href="#nogo" class="findPhotos">
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="findPhotos">
<li><a href="/keyword" title="See a list of
keywords to photographs">By Boat Name or Keyword</a></li>
<li><a href="/date" title="Search by Date Range">By
Date</a></li>
<li><a href="http://smile-123.smugmug.com/homepage/templatechange.mg?TemplateID=7&origin=http://smile-123.smugmug.com/popular" title="Voted most popular by
You!">Most Popular Photos</a></li>
<li><a href="http://smile-123.smugmug.com/homepage/templatechange.mg?TemplateID=7&origin=http://smile-123.smugmug.com/keyword/finished" title="Selected Examples of our Finished Prints">Finished Photos</a></li>
<li><a href="http://smile-123.smugmug.com/homepage/templatechange.mg?TemplateID=7&origin=http://smile-123.smugmug.com/keyword/unclaimed" title="Selected Photos Looking for a Good Home">Orphan (Unclaimed) Photos</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<a href="#nogo" class="findBrands">
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="findBrands">
<li><a href="/gallery/4108252">See Photos by Brand
Name</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<a href="#nogo" class="findTypes">
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="findTypes">
<li><a href=
"http://smile-123.smugmug.com/homepage/templatechange.mg?TemplateID=7&origin=http://smile-123.smugmug.com/keyword/sail%20boat"
title="Search for Sail Boats">Sailboats</a></li>
<li><a href=
"http://smile-123.smugmug.com/homepage/templatechange.mg?TemplateID=7&origin=http://smile-123.smugmug.com/keyword/performance%20boat"
title="Search for Performance Boats">Performance
Boats</a></li>
<li><a href=
"http://smile-123.smugmug.com/homepage/templatechange.mg?TemplateID=7&origin=http://smile-123.smugmug.com/keyword/jet%20ski"
title="Search for Jet Skis">Jet Skis</a></li>
<li><a href=
"http://smile-123.smugmug.com/homepage/templatechange.mg?TemplateID=7&origin=http://smile-123.smugmug.com/keyword/commercial"
title="Search for Commercial Boats">Commercial
Boats</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
<!-- photoButtons -->
<div id="otherButtons">
<ul class="flyout">
<li>
<a href="#nogo" class="otherDestinations">
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="otherDestinations">
<li><a href="http://blue-dog.smugmug.com" target=
"_blank" title="We Turn Photographs into Art">Photo
Retouching</a></li>
<li><a href="http://vintage-photos.blogspot.com/"
target="_blank" title="See My Vintage Photo Blog">
Vintage Photos</a></li>
<li><a href=
"http://www.smugmug.com/?referrer=VMaPuO1BD8DIg"
target="_blank" title="I can get you $5 off!">Join
SmugMug</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
<!-- otherButtons -->
</div>
<!-- right_margin -->