Help figuring out what css elements belong to a dropdown menu

[schwim]

I'm pretty sure I'm going to be out of luck on this because I think the menu uses some jquery that I won't be able to carry over, but want to give it a shot.

If you look at http://www.bluemoonelise.net, you can see the hover-over menu right below the header image. I've been asked to try to move that menu to an infusionsoft shopping cart, which allows only editing of some html after the body tag and css. I'm wondering if I can figure out what css/jquery elements belong to the menu in an attempt to move it over to the other site.

here's the menu html in question:

<!-- Main Navigation -->
        <div id="nav-wrapper" class="container_12">
            <nav class="grid_12">

                                        
                <ul id="main-nav" class="sf-menu grid_12 clearfix"><li id="menu-item-19" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-19"><a href="https://cy987.infusionsoft.com/app/storeFront/showStoreFront">Herbal Body Care</a>
<ul class="sub-menu">
    <li id="menu-item-56" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-56"><a href="https://cy987.infusionsoft.com/app/storeFront/showSubCategoryPage?subcategoryId=6">Bath Salts</a></li>
    <li id="menu-item-57" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-57"><a href="https://cy987.infusionsoft.com/app/storeFront/showSubCategoryPage?subcategoryId=8">Body Lotion</a></li>
    <li id="menu-item-58" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-58"><a href="https://cy987.infusionsoft.com/app/storeFront/showSubCategoryPage?subcategoryId=10">Body Mist</a></li>
    <li id="menu-item-59" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-59"><a href="https://cy987.infusionsoft.com/app/storeFront/showSubCategoryPage?subcategoryId=12">Body Oils</a></li>
    <li id="menu-item-66" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-66"><a href="https://cy987.infusionsoft.com/app/storeFront/showSubCategoryPage?subcategoryId=34">Clothing</a></li>
    <li id="menu-item-65" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-65"><a href="https://cy987.infusionsoft.com/app/storeFront/showSubCategoryPage?subcategoryId=24">Gift Certificates</a></li>
    <li id="menu-item-67" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-67"><a href="https://cy987.infusionsoft.com/app/storeFront/showCategoryPage?categoryId=4">Gift Crates</a></li>
    <li id="menu-item-60" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-60"><a href="https://cy987.infusionsoft.com/app/storeFront/showSubCategoryPage?subcategoryId=14">Lip Balm</a></li>
    <li id="menu-item-61" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-61"><a href="https://cy987.infusionsoft.com/app/storeFront/showSubCategoryPage?subcategoryId=16">Roll On’s</a></li>
    <li id="menu-item-62" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-62"><a href="https://cy987.infusionsoft.com/app/storeFront/showSubCategoryPage?subcategoryId=18">Room Spray</a></li>
    <li id="menu-item-64" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-64"><a href="https://cy987.infusionsoft.com/app/storeFront/showSubCategoryPage?subcategoryId=22">Salt Scrub</a></li>
    <li id="menu-item-63" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-63"><a href="https://cy987.infusionsoft.com/app/storeFront/showSubCategoryPage?subcategoryId=20">Soap</a></li>
</ul>
</li>
<li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22"><a href="http://www.bluemoonelise.net/massage/">Massage</a></li>
<li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27"><a href="http://www.bluemoonelise.net/yoga/">Yoga</a>
<ul class="sub-menu">
    <li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28"><a href="http://www.bluemoonelise.net/yoga-q-a/">Yoga Q & A</a></li>
</ul>
</li>
<li id="menu-item-33" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-33"><a href="http://www.bluemoonelise.net/events/">Events</a></li>
<li id="menu-item-34" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-34"><a href="http://www.bluemoonelise.net/soap-making-classes/">Soap Making Classes</a></li>
<li id="menu-item-35" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-35"><a href="http://www.bluemoonelise.net/blog/">Blog</a></li>
</ul>                
                                
            </nav> <!-- end .grid_12  -->  
        </div> <!-- end #nav-wrapper .container_12 -->

Any thoughts on the matter would be greatly appreciated!

[ralph.m]

This menu is a standard one called Superfish ... a JavaScript enhanced version of the well-known Suckerfish menu. Suckerfish uses just CSS, while Superfish enhances it with JS ... so you could use either. You can link to JS fies inside the <body> element ... and it's actually recommended these days ... placing the JS links just before the closing <body> tag.

[schwim]

Hi there and sorry for the long delay in continuing. She's had a heck of a time dealing with the Infusionsoft people.

Thanks very much for pointing out the menu system. I'm wondering if there's a way to retrieve the relevant css and jquery elements called in the page I'm trying to duplicate the menu on instead of redesigning superfish on the new site to mimic the current menu?

What I mean is could I use the web developer addon or something similar to see what css and reference files I need to add to the other site to get the menu to look and act the same? If so, how might I go about doing that?

Thanks very much for your time!

[Paul O'B]

Hi,

You can use Firebug to see what rules are in effect for the css on the menu.

However, it would be difficult to extract all the necessary rules using Firebug and then use them as a stand alone menu.

It would be easier just to go through the stylesheet and pull out the styles needed.

Here's a rough start that shows everything that's needed for the menu to work (although some rules may be redundant).

<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<!-- Meta Info -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Blue Moon Elise</title>
<style type="text/css">
* {
	margin:0;
	padding:0;
}
body {
	background:#f1edd6;
	font: normal 12px/18px 'Droid Sans', arial, sans-serif;
	color:#585858;
	text-align:left;
}
.clear { clear:both; }
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
#nav-wrapper .sf-menu a:focus, #nav-wrapper .sf-menu a:hover, #nav-wrapper .sf-menu a:active, #sub-nav-wrapper .sf-menu a:focus, #sub-nav-wrapper .sf-menu a:hover, #sub-nav-wrapper .sf-menu a:active { color:#b35314!important; }
#nav-wrapper nav {
	height:60px;
	margin:auto;
}
/* Center Main Navigation */
#nav-wrapper .sf-menu { text-align: center; }
#nav-wrapper .sf-menu li {
	display: inline-block;
	float: none;
	text-align:left;
}
#nav-wrapper .sf-menu li a { display: inline-block; }
/* Main Navigation Styles */
#nav-wrapper .sf-menu a {
	font-family:Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
	color:#464646;
	font-size:16px;
	padding: .8em 1em;
	text-decoration:none;
	text-transform:uppercase;
}
#nav-wrapper .sf-menu a { color:	#464646; }
.sf-menu, .sf-menu * {
	margin:			0;
	padding:		0;
	list-style:		none;
}
.sf-menu {
	line-height:	1.0;
	height: 3.3em;
}
.sf-menu ul {
	position:		absolute;
	top:			-999em;
	width:			10em; /* left offset of submenus need to match (see below) */
}
.sf-menu ul li { width:			100%; }
#nav-wrapper .sf-menu ul li a {
	font-size:12px;
	color:#9D9D9D;
	text-shadow: none;
	filter: none;
}
.sf-menu li:hover { visibility:		inherit; /* fixes IE7 'sticky bug' */ }
.sf-menu li {
	float:			left;
	position:		relative;
	padding-bottom: 2px;
}
.sf-menu a {
	display:		block;
	position:		relative;
}
.sf-menu li:hover ul, .sf-menu li.sfHover ul {
	left:			0;
	top:			3.3em; /* match top ul list item height */
	z-index:		99;
}
ul.sf-menu li:hover li ul, ul.sf-menu li.sfHover li ul { top:			-999em; }
ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul {
	left:			17em; /* match ul width */
	top:			0;
}
ul.sf-menu li li:hover li ul, ul.sf-menu li li.sfHover li ul { top:			-999em; }
ul.sf-menu li li li:hover ul, ul.sf-menu li li li.sfHover ul {
	left:			17em; /* match ul width */
	top:			0;
}
/*** SKIN ***/
.sf-menu {
	float:			left;
	/* margin-bottom:	1em; */
	margin: 8px 0 10px;
}
.sf-menu li { /* background:		#BDD2FF; */ }
#nav-wrapper .sf-menu li li {
	background:		#ffffff;
	border-bottom: 1px dashed #e6e3cf;
	width:200px;
	height:25px;
	padding:5px 0 10px;
}
#nav-wrapper .sf-menu li li:last-child { border-bottom:none; }
.sf-menu li li:last-child {
	border-bottom: none;
	padding-bottom:15px;
}
.sf-menu li li li { background:		#ffffff; }
#nav-wrapper .sf-menu li:hover, #nav-wrapper .sf-menu li.sfHover, #nav-wrapper .sf-menu a:focus, #nav-wrapper .sf-menu a:hover, #nav-wrapper .sf-menu a:active {
	background:	#ffffff;
	outline:0;
}
/*** arrows **/
.sf-menu a.sf-with-ul { /* padding-right: 	2.25em; */ min-width:		1px; /* trigger IE7 hasLayout so spans position accurately */ }
.sf-sub-indicator {
	position:		absolute;
	display:		block;
	right:			.75em;
	top:			1.05em; /* IE6 only */
	width:			10px;
	height:			10px;
	text-indent: 	-999em;
	overflow:		hidden;/*background:		url('images/arrows-ffffff.png') no-repeat -10px -100px;  8-bit indexed alpha png. IE6 gets solid image only */
}
a > .sf-sub-indicator {  /* give all except IE6 the correct values */
	top:			.8em;
	background-position: 0 -100px; /* use translucent arrow for modern browsers*/
}
/* apply hovers to modern browsers */
a:focus > .sf-sub-indicator, a:hover > .sf-sub-indicator, a:active > .sf-sub-indicator, li:hover > a > .sf-sub-indicator, li.sfHover > a > .sf-sub-indicator { background-position: -10px -100px; /* arrow hovers for modern browsers*/ }
/* point right for anchors in subs */
.sf-menu ul .sf-sub-indicator { background-position:  -10px 0; }
.sf-menu ul a > .sf-sub-indicator { background-position:  0 0; }
/* apply hovers to modern browsers */
.sf-menu ul a:focus > .sf-sub-indicator, .sf-menu ul a:hover > .sf-sub-indicator, .sf-menu ul a:active > .sf-sub-indicator, .sf-menu ul li:hover > a > .sf-sub-indicator, .sf-menu ul li.sfHover > a > .sf-sub-indicator { background-position: -10px 0; /* arrow hovers for modern browsers*/ }
/*** shadows for all but IE6 ***/
.sf-shadow ul {
	background:	url('images/shadow.png') no-repeat bottom right;
	padding: 0 8px 9px 0;
	text-align:left;
	width:200px;
	-moz-border-radius-bottomleft: 17px;
	-moz-border-radius-topright: 17px;
	-webkit-border-top-right-radius: 17px;
	-webkit-border-bottom-left-radius: 17px;
}
.sf-shadow ul.sf-shadow-off { background: transparent; }
/*------------------------------------------------*/
/*	Sub Navigation 
/*------------------------------------------------*/
#sub-nav-wrapper nav {
	height:32px;
	background:url(images/bg-sub-nav.png) no-repeat;
	margin-top:15px;
	margin-bottom:15px;
}
/* Center Sub Navigation */
#sub-nav-wrapper .sf-menu {
	text-align: center;
	height:2em;
}
#sub-nav-wrapper .sf-menu li {
	display: inline-block;
	float: none;
}
#sub-nav-wrapper .sf-menu li a { display: inline-block; }
/* Style Sub Nav */
#sub-nav-wrapper .sf-menu { margin: 0 0; }
#sub-nav-wrapper .sf-menu a {
	font-family:Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
	font-size:14px;
	padding: .6em 1em;
	text-decoration:none;
	text-transform:uppercase;
}
#sub-nav-wrapper .sf-menu a { color:	#977f76; }
#sub-nav-wrapper .sf-menu ul li a {
	font-size:12px;
	color:#9D9D9D;
	text-shadow: none;
	filter: none;
}
#sub-nav-wrapper .sf-menu li:hover, #sub-nav-wrapper .sf-menu li.sfHover, #sub-nav-wrapper .sf-menu a:focus, #sub-nav-wrapper .sf-menu a:hover, #sub-nav-wrapper .sf-menu a:active {
	background:	#fff;
	outline:0;
}
#sub-nav-wrapper .sf-menu li:hover ul, #sub-nav-wrapper .sf-menu li.sfHover ul {
	left:			0;
	top:			2.6em; /* match top ul list item height */
	z-index:		99;
}
#sub-nav-wrapper .sf-menu li li {
	background:	#ffffff;
	border-bottom: 1px dashed #e6e3cf;
	width:200px;
	height:25px;
	padding-top:10px;
	padding-bottom:10px;
}
#sub-nav-wrapper .sf-menu li li:last-child { border-bottom: none!important; }
</style>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js?ver=3.4.1'></script>
<script type='text/javascript' src='http://www.bluemoonelise.net/wp-content/themes/animalhouse/js/jquery.fancybox-1.3.4.js?ver=3.4.1'></script>
<script type='text/javascript' src='http://www.bluemoonelise.net/wp-content/themes/animalhouse/js/superfish.js?ver=3.4.1'></script>
<script type='text/javascript' src='http://www.bluemoonelise.net/wp-content/themes/animalhouse/js/link_nudge.js?ver=3.4.1'></script>
</head>

<body class="home page page-id-8 page-template page-template-template-full-width-no_white-php windows firefox ff1">
<div id="nav-wrapper" class="container_12">
		<nav class="grid_12">
				<ul id="main-nav" class="sf-menu grid_12 clearfix">
						<li id="menu-item-19" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-19"><a href="https://cy987.infusionsoft.com/app/storeFront/showStoreFront">Herbal Body Care</a>
								<ul class="sub-menu">
										<li id="menu-item-56" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-56"><a href="https://cy987.infusionsoft.com/app/storeFront/showSubCategoryPage?subcategoryId=6">Bath Salts</a></li>
										<li id="menu-item-57" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-57"><a href="https://cy987.infusionsoft.com/app/storeFront/showSubCategoryPage?subcategoryId=8">Body Lotion</a></li>
										<li id="menu-item-58" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-58"><a href="https://cy987.infusionsoft.com/app/storeFront/showSubCategoryPage?subcategoryId=10">Body Mist</a></li>
										<li id="menu-item-59" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-59"><a href="https://cy987.infusionsoft.com/app/storeFront/showSubCategoryPage?subcategoryId=12">Body Oils</a></li>
										<li id="menu-item-66" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-66"><a href="https://cy987.infusionsoft.com/app/storeFront/showSubCategoryPage?subcategoryId=34">Clothing</a></li>
										<li id="menu-item-65" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-65"><a href="https://cy987.infusionsoft.com/app/storeFront/showSubCategoryPage?subcategoryId=24">Gift Certificates</a></li>
										<li id="menu-item-67" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-67"><a href="https://cy987.infusionsoft.com/app/storeFront/showCategoryPage?categoryId=4">Gift Crates</a></li>
										<li id="menu-item-60" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-60"><a href="https://cy987.infusionsoft.com/app/storeFront/showSubCategoryPage?subcategoryId=14">Lip Balm</a></li>
										<li id="menu-item-61" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-61"><a href="https://cy987.infusionsoft.com/app/storeFront/showSubCategoryPage?subcategoryId=16">Roll On’s</a></li>
										<li id="menu-item-62" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-62"><a href="https://cy987.infusionsoft.com/app/storeFront/showSubCategoryPage?subcategoryId=18">Room Spray</a></li>
										<li id="menu-item-64" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-64"><a href="https://cy987.infusionsoft.com/app/storeFront/showSubCategoryPage?subcategoryId=22">Salt Scrub</a></li>
										<li id="menu-item-63" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-63"><a href="https://cy987.infusionsoft.com/app/storeFront/showSubCategoryPage?subcategoryId=20">Soap</a></li>
								</ul>
						</li>
						<li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22"><a href="http://www.bluemoonelise.net/massage/">Massage</a></li>
						<li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27"><a href="http://www.bluemoonelise.net/yoga/">Yoga</a>
								<ul class="sub-menu">
										<li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28"><a href="http://www.bluemoonelise.net/yoga-q-a/">Yoga Q &#038; A</a></li>
								</ul>
						</li>
						<li id="menu-item-33" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-33"><a href="http://www.bluemoonelise.net/events/">Events</a></li>
						<li id="menu-item-34" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-34"><a href="http://www.bluemoonelise.net/soap-making-classes/">Soap Making Classes</a></li>
						<li id="menu-item-75" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-75"><a>More</a>
								<ul class="sub-menu">
										<li id="menu-item-83" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-83"><a href="http://www.bluemoonelise.net/about-us/">About Us</a></li>
										<li id="menu-item-35" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-35"><a href="http://www.bluemoonelise.net/blog/">Blog</a></li>
										<li id="menu-item-105" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-105"><a href="http://www.bluemoonelise.net/contact-us/">Contact Us</a></li>
										<li id="menu-item-97" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-97"><a href="http://www.bluemoonelise.net/customer-service/">Customer Service</a></li>
										<li id="menu-item-101" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-101"><a href="http://www.bluemoonelise.net/sitemap/">Sitemap</a></li>
								</ul>
						</li>
				</ul>
		</nav>
</div>
<script type="text/javascript">
/*-----------------------------------------------------------------------------------*/
/*	Nav Link Nudge - http://davidwalsh.name/jquery-link-nudge
/*-----------------------------------------------------------------------------------*/	
	/* usage 1 */
	jQuery('.sub-menu li a').nudge();
	/* usage 2 */
	jQuery('.sub-menu li a').nudge({
		property: 'margin',
		direction: 'left',
		amount: 6,
		duration: 300
	});
</script>
</body>
</html>

[schwim]

Hi there Paul and thanks very much for your help.

I've moved the code over to the cart as best I could but it seems that I only had limited success and I was hoping you could help me polish it's look somewhat.

page: https://cy987.infusionsoft.com/app/s...showStoreFront

1) My menu has shifted over to the left and I'm unable to center it on the page.

2) I ended up pasting the code more than once due to trying to get some errant snippits out of view. The first time I pasted everything, it looked more like the original menu with the link text shifting slightly to the right on hoverover. The second time I posted the code, the same didn't happen.

3) The original menu seems to utilize this background image: http://www.bluemoonelise.net/wp-cont...g-main-nav.png but I am unable to figure out how to get it to show behind the menu.

Thanks in advance for any help you might be able to provide!

[Paul O'B]

Hi,

You seem to have corrupted that whole page

There is no doctype or head/body html tags either. You must have a valid doctype or browsers will revert to last century and use quirks mode and forget about anything they learned this century.

You also put the htm style tag inside your style sheet along with the js. Only css can go into a stylesheet. Neither style tags nor js are allowed in a css file.

I've pulled the files out to where they should be and the menu starts working. I also added the image to the nav wrapper and centred the menu.

#nav-wrapper {
	margin:auto;
	background:url(http://www.bluemoonelise.net/wp-content/themes/animalhouse/images/bg-main-nav.png) no-repeat 50% 0;
	display:inline-block;
	text-align:center;
	width:100%;
	min-width:940px;
}
#nav-wrapper nav {
	height:60px;
	margin:auto;
	display: inline-block;
}

Here's the full code:

<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<script type="text/javascript" src="/js/sink_jq.jsp?b=1.25.7.26"></script>
<script type="text/javascript" src="/js/sink_js.jsp?b=1.25.7.26"></script>
<style type="text/css">
img.product-thumbnail {
	max-width: 150px;
	max-height: 150px;
 width: expression(this.width > 150 ? "150px" : true);
 height: expression(this.height > 150 ? "150px" : true);
}
/* CSS Document */

body {
	background-image:url('http://www.bluemoonelise.net/wp-content/themes/animalhouse/images/backgrounds/embossed-diamonds.png');
	background-repeat:repeat;
	font-family:Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
	font-size: 12px;
	background-color: #f1edd6;
}
table {
	background-color: #F9FBEB;
	font-family:Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
}
table.ordersum {
	background-color: #F9FBEB;
	padding: 0px;
	font-family:Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
}
table.main {
	cell-spacing: 1px;
	background-color: #F9FBEB;
	padding: 0px;
	font-family:Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
	border:2px solid #643200;
}
table.specials {
	cell-spacing: 1px;
	background-color:#6699FF;
	padding: 0px;
	font-family:Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
}
td.ordertotal {
	font-family:Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
	color: #643200;
	font-size: 14px;
}
td.order { font-family:Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif; }
td.ordersumproducts {
	font-family:Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
	font-size: 12px;
	background-color: #FFFFFF;
	padding: 5px;
}
td.ordersubtotals { font-family:Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif; }
td.todaystotal {
	font-family:Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
	font-size: 12px;
	color: #643200;
}
td.ordertotals {
	font-family:Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
	color: #643200;
}
td.ordersumfinance {
	font-family:Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
	font-size: 12px;
	background-color: #FFFFFF;
	color: B29980;
	padding: 5px;
}
td.ordersumspecials {
	font-family:Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
	font-size: 12px;
	color: 643200;
	background-color: #FFFFFF;
	padding: 5px;
}
td.specials {
	font-family:Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
	font-size: 12px;
	background-color: #FFFFFF;
	padding: 5px;
}
td.specialsh2 {
	font-family:Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
	font-size: 12px;
	font-weight: bold;
	color: white;
	background-color: #6699FF;
}
td.specialprice {
	font-family:Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
	font-size: 12px;
	color: #F9FBEB;
	font-weight: bold;
	background-color: #643200;
}
td {
	font-family:Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
	font-size: 12px;
}
td.h3 {
	font-family:Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
	font-size: 16px;
	font-weight: bold;
}
td.h2 {
	font-family:Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
	font-size: 12px;
	font-weight: bold;
	color: #F9FBEB;
	background-color: #643200;
}
td.h1 {
	font-family:Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
	font-size: 12px;
	color: #F9FBEB;
	font-weight: bold;
	background-color: #643200;
}
td.main {
	font-family:Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
	font-size: 12px;
	background-color: #F9FBEB;
	padding: 5px;
}
td.products {
	font-family:Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
	font-size: 12px;
	background-color:#F9FBEB;
	padding: 5px;
}
.buttonsmall {
	height: 20px;
	font-size: 11px;
	vertical-align: 0;
	padding: 0px;
	font-family:Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
}
.buttonnorm {
	height: 20px;
	font-size: 12px;
	vertical-align: 0;
	horizontal-align: 0;
	padding: 0px;
	padding-left: 0px;
	font-family: Arial;
}
/* StoreFront Styles */
.productdivider img { border:2px solid #643200; }
td.leftlink {
	font-family: Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
	font-size: 10px;
	color: #643200;
	background-image: url('/cart/images/skins/sand/sand_bullet.jpg');
	padding-left: 30px;
	padding-right: 5px;
	padding-bottom: 2px;
}
td.leftside {
	font-family: Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
	font-size: 10px;
	color: #643200;
	padding-left: 5px;
	padding-right: 5px;
	padding-bottom: 2px;
	padding-top: 3px;
}
td.leftsideshopby {
	font-family: Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
	font-size: 10px;
	font-weight: bold;
	height: 22px;
	color: #643200;
	background-color:#F9FBEB;
	padding-left: 5px;
	padding-right: 5px;
	padding-bottom: 2px;
}
td.leftbackground {
	background-color: #F9FBEB;
	Border-left:2px solid #643200;
	Border-right:1px dotted #643200;
	padding:5px;
}
td.listingbar {
	font-family: Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
	font-size: 12px;
	font-weight: bold;
	color: #F9FBEB;
	background-color: 643200;
	padding-left: 20px;
	padding-bottom: 6px;
	padding-top: 2px;
}
td.topproductheader {
	font-family: Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
	font-size: 14px;
	font-weight: bold;
	color:#643200;
	padding-top: 5px;
	padding-left: 6px;
}
td.customHTML { padding: 5px; }
td.topnav { padding-left: 2px; }
td.categorydivider { background-image: url('/cart/images/store/maindots.gif'); }
td.productdivider {
	padding: 10px;
	text-align: center;
}
td.productlistinginfo {
	font-family: Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
	font-size: 11px;
	text-align: center;
	padding-left: 10px;
}
td.productlistinginfo a {
	font-weight:bold;
	color:#643200;
	text-decoration:none;
}
td.productinfo {
	font-size: 11px;
	background-color: #B29980;
	color:#643200;
	padding: 5px;
	border: 2px solid #643200;
}
td.productinfoheader {
	background-color: #643200;
	padding: 5px;
	color:#F9FBEB;
	font-weight: bold;
	font-size: 11px;
}
.ourprice {
	font-family: Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
	font-size: 11px;
	font-weight: bold;
	color: #b29980;
}
td.listingpadding { padding: 10px; }
td.storepadding { padding: 20px; }
td.rightside { }
td.cartitem {
	text-align: center;
	text-align: right;
	font-size: 11px;
	background-image:url('/cart/images/skins/sand/sand_cartTotal.jpg');
	background-repeat:no-repeat;
	background-position:right;
}
input.search {
	font-family: Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
	font-size: 11px;
	padding-left: 5px;
	padding-right: 5px;
}
a.leftlink:link {
	color: #405070;
	font-weight: bold;
	text-decoration: none;
}
a.leftlink:active {
	color: #643200;
	font-weight: bold;
	text-decoration: none;
}
a.leftlink:visited {
	color: #643200;
	font-weight: bold;
	text-decoration: none;
}
a.topnav:link {
	color: #643200;
	font-weight: bold;
}
a.topnav:visited {
	color: #643200;
	font-weight: bold;
}
a.cartitem:link {
	color: #643200;
	font-weight:bold;
	text-decoration:none;
}
a.cartitem:visited {
	color: #643200;
	font-weight:bold;
	text-decoration:none;
}
a.listinglink:link { color: #643200; }
a.listinglink:visited { color: #643200; }
a.leftsidelink:link { color: #643200; }
a.leftsidelink:visited { color: #643200; }
td.headerbar { }
td.footerbar { }
* {
	margin:0;
	padding:0;
}
body {
	background:#f1edd6;
	font: normal 12px/18px 'Droid Sans', arial, sans-serif;
	color:#585858;
	text-align:left;
}
.clear { clear:both; }
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
#nav-wrapper .sf-menu a:focus, #nav-wrapper .sf-menu a:hover, #nav-wrapper .sf-menu a:active, #sub-nav-wrapper .sf-menu a:focus, #sub-nav-wrapper .sf-menu a:hover, #sub-nav-wrapper .sf-menu a:active { color:#b35314!important; }
#nav-wrapper nav {
	height:60px;
	margin:auto;
	display: inline-block;
}
/* Center Main Navigation */
#nav-wrapper .sf-menu { text-align: center; }
#nav-wrapper .sf-menu li {
	display: inline-block;
	float: none;
	text-align:left;
}
#nav-wrapper .sf-menu li a { display: inline-block; }
/* Main Navigation Styles */
#nav-wrapper .sf-menu a {
	font-family:Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
	color:#464646;
	font-size:16px;
	padding: .8em 1em;
	text-decoration:none;
	text-transform:uppercase;
}
#nav-wrapper .sf-menu a { color:	#464646; }
.sf-menu, .sf-menu * {
	margin:			0;
	padding:		0;
	list-style:		none;
}
.sf-menu {
	line-height:	1.0;
	height: 3.3em;
}
.sf-menu ul {
	position:		absolute;
	top:			-999em;
	width:			10em; /* left offset of submenus need to match (see below) */
}
.sf-menu ul li { width:			100%; }
#nav-wrapper .sf-menu ul li a {
	font-size:12px;
	color:#9D9D9D;
	text-shadow: none;
	filter: none;
}
.sf-menu li:hover { visibility:		inherit; /* fixes IE7 'sticky bug' */ }
.sf-menu li {
	float:			left;
	position:		relative;
	padding-bottom: 2px;
}
.sf-menu a {
	display:		block;
	position:		relative;
}
.sf-menu li:hover ul, .sf-menu li.sfHover ul {
	left:			0;
	top:			3.3em; /* match top ul list item height */
	z-index:		99;
}
ul.sf-menu li:hover li ul, ul.sf-menu li.sfHover li ul { top:			-999em; }
ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul {
	left:			17em; /* match ul width */
	top:			0;
}
ul.sf-menu li li:hover li ul, ul.sf-menu li li.sfHover li ul { top:			-999em; }
ul.sf-menu li li li:hover ul, ul.sf-menu li li li.sfHover ul {
	left:			17em; /* match ul width */
	top:			0;
}
/*** SKIN ***/
.sf-menu {
	float:			left;
	/* margin-bottom:	1em; */
	margin: 8px 0 10px;
}
.sf-menu li { /* background:		#BDD2FF; */ }
#nav-wrapper .sf-menu li li {
	background:		#ffffff;
	border-bottom: 1px dashed #e6e3cf;
	width:200px;
	height:25px;
	padding:5px 0 10px;
}
#nav-wrapper .sf-menu li li:last-child { border-bottom:none; }
.sf-menu li li:last-child {
	border-bottom: none;
	padding-bottom:15px;
}
.sf-menu li li li { background:		#ffffff; }
#nav-wrapper .sf-menu li:hover, #nav-wrapper .sf-menu li.sfHover, #nav-wrapper .sf-menu a:focus, #nav-wrapper .sf-menu a:hover, #nav-wrapper .sf-menu a:active {
	background:	#ffffff;
	outline:0;
}
/*** arrows **/
.sf-menu a.sf-with-ul { /* padding-right: 	2.25em; */ min-width:		1px; /* trigger IE7 hasLayout so spans position accurately */ }
.sf-sub-indicator {
	position:		absolute;
	display:		block;
	right:			.75em;
	top:			1.05em; /* IE6 only */
	width:			10px;
	height:			10px;
	text-indent: 	-999em;
	overflow:		hidden;/*background:		url('http://www.bluemoonelise.net/wp-content/themes/animalhouse/images/arrows-ffffff.png') no-repeat -10px -100px;  8-bit indexed alpha png. IE6 gets solid image only */
}
a > .sf-sub-indicator {  /* give all except IE6 the correct values */
	top:			.8em;
	background-position: 0 -100px; /* use translucent arrow for modern browsers*/
}
/* apply hovers to modern browsers */
a:focus > .sf-sub-indicator, a:hover > .sf-sub-indicator, a:active > .sf-sub-indicator, li:hover > a > .sf-sub-indicator, li.sfHover > a > .sf-sub-indicator { background-position: -10px -100px; /* arrow hovers for modern browsers*/ }
/* point right for anchors in subs */
.sf-menu ul .sf-sub-indicator { background-position:  -10px 0; }
.sf-menu ul a > .sf-sub-indicator { background-position:  0 0; }
/* apply hovers to modern browsers */
.sf-menu ul a:focus > .sf-sub-indicator, .sf-menu ul a:hover > .sf-sub-indicator, .sf-menu ul a:active > .sf-sub-indicator, .sf-menu ul li:hover > a > .sf-sub-indicator, .sf-menu ul li.sfHover > a > .sf-sub-indicator { background-position: -10px 0; /* arrow hovers for modern browsers*/ }
/*** shadows for all but IE6 ***/
.sf-shadow ul {
	background:	url('http://www.bluemoonelise.net/wp-content/themes/animalhouse/images/shadow.png') no-repeat bottom right;
	padding: 0 px 9px 0;
	text-align:left;
	width:200px;
	-moz-border-radius-bottomleft: 17px;
	-moz-border-radius-topright: 17px;
	-webkit-border-top-right-radius: 17px;
	-webkit-border-bottom-left-radius: 17px;
}
.sf-shadow ul.sf-shadow-off { background: transparent; }
/*------------------------------------------------*/
/*	Sub Navigation 
/*------------------------------------------------*/
#sub-nav-wrapper nav {
	height:32px;
	background:url(http://www.bluemoonelise.net/wp-content/themes/animalhouse/images/bg-sub-nav.png) no-repeat;
	margin-top:15px;
	margin-bottom:15px;
}
/* Center Sub Navigation */
#sub-nav-wrapper .sf-menu {
	text-align: center;
	height:2em;
}
#sub-nav-wrapper .sf-menu li {
	display: inline-block;
	float: none;
}
#sub-nav-wrapper .sf-menu li a { display: inline-block; }
/* Style Sub Nav */
#sub-nav-wrapper .sf-menu { margin: 0 0; }
#sub-nav-wrapper .sf-menu a {
	font-family:Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
	font-size:14px;
	padding: .6em 1em;
	text-decoration:none;
	text-transform:uppercase;
}
#sub-nav-wrapper .sf-menu a { color:	#977f76; }
#sub-nav-wrapper .sf-menu ul li a {
	font-size:12px;
	color:#9D9D9D;
	text-shadow: none;
	filter: none;
}
#sub-nav-wrapper .sf-menu li:hover, #sub-nav-wrapper .sf-menu li.sfHover, #sub-nav-wrapper .sf-menu a:focus, #sub-nav-wrapper .sf-menu a:hover, #sub-nav-wrapper .sf-menu a:active {
	background:	#fff;
	outline:0;
}
#sub-nav-wrapper .sf-menu li:hover ul, #sub-nav-wrapper .sf-menu li.sfHover ul {
	left:			0;
	top:			2.6em; /* match top ul list item height */
	z-index:		99;
}
#sub-nav-wrapper .sf-menu li li {
	background:	#ffffff;
	border-bottom: 1px dashed #e6e3cf;
	width:200px;
	height:25px;
	padding-top:10px;
	padding-bottom:10px;
}
#sub-nav-wrapper .sf-menu li li:last-child { border-bottom: none!important; }
table { background: transparent; }
#nav-wrapper {
	margin:auto;
	background:url(http://www.bluemoonelise.net/wp-content/themes/animalhouse/images/bg-main-nav.png) no-repeat 50% 0;
	display:inline-block;
	text-align:center;
	width:100%;
	min-width:940px;
}
#nav-wrapper nav {
	height:60px;
	margin:auto;
	display: inline-block;
}

</style>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js?ver=3.4.1'></script>
<script type='text/javascript' src='http://www.bluemoonelise.net/wp-content/themes/animalhouse/js/jquery.fancybox-1.3.4.js?ver=3.4.1'></script><script type='text/javascript' src='http://www.bluemoonelise.net/wp-content/themes/animalhouse/js/superfish.js?ver=3.4.1'></script>
<script type='text/javascript' src='http://www.bluemoonelise.net/wp-content/themes/animalhouse/js/link_nudge.js?ver=3.4.1'></script>
</head>
<body class="home page page-id-8 page-template page-template-template-full-width-no_white-php windows firefox ff1">
<div align='center'> <img src='/jspServ/imagegetter.jsp?url=http%3A%2F%2Fwww.bluemoonelise.net%2Fimages%2Fbme_header.png' alt='Blue Moon Elise' usemap='#bme_header'/g ></div>
<map name="bme_header">
		<area shape="rect" coords="15,4,378,90" href="http://www.bluemoonelise.com" alt="BMe Front Page">
</map>
<br />
<!-- menu content start -->
<div id="nav-wrapper" class="container_12">
		<nav class="grid_12">
				<ul id="main-nav" class="sf-menu grid_12 clearfix">
						<li id="menu-item-19" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-19"><a href="https://cy987.infusionsoft.com/app/storeFront/showStoreFront">Herbal Body Care</a>
								<ul class="sub-menu">
										<li id="menu-item-56" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-56"><a href="https://cy987.infusionsoft.com/app/storeFront/showSubCategoryPage?subcategoryId=6">Bath Salts</a></li>
										<li id="menu-item-57" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-57"><a href="https://cy987.infusionsoft.com/app/storeFront/showSubCategoryPage?subcategoryId=8">Body Lotion</a></li>
										<li id="menu-item-58" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-58"><a href="https://cy987.infusionsoft.com/app/storeFront/showSubCategoryPage?subcategoryId=10">Body Mist</a></li>
										<li id="menu-item-59" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-59"><a href="https://cy987.infusionsoft.com/app/storeFront/showSubCategoryPage?subcategoryId=12">Body Oils</a></li>
										<li id="menu-item-66" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-66"><a href="https://cy987.infusionsoft.com/app/storeFront/showSubCategoryPage?subcategoryId=34">Clothing</a></li>
										<li id="menu-item-65" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-65"><a href="https://cy987.infusionsoft.com/app/storeFront/showSubCategoryPage?subcategoryId=24">Gift Certificates</a></li>
										<li id="menu-item-67" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-67"><a href="https://cy987.infusionsoft.com/app/storeFront/showCategoryPage?categoryId=4">Gift Crates</a></li>
										<li id="menu-item-60" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-60"><a href="https://cy987.infusionsoft.com/app/storeFront/showSubCategoryPage?subcategoryId=14">Lip Balm</a></li>
										<li id="menu-item-61" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-61"><a href="https://cy987.infusionsoft.com/app/storeFront/showSubCategoryPage?subcategoryId=16">Roll On’s</a></li>
										<li id="menu-item-62" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-62"><a href="https://cy987.infusionsoft.com/app/storeFront/showSubCategoryPage?subcategoryId=18">Room Spray</a></li>
										<li id="menu-item-64" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-64"><a href="https://cy987.infusionsoft.com/app/storeFront/showSubCategoryPage?subcategoryId=22">Salt Scrub</a></li>
										<li id="menu-item-63" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-63"><a href="https://cy987.infusionsoft.com/app/storeFront/showSubCategoryPage?subcategoryId=20">Soap</a></li>
								</ul>
						</li>
						<li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22"><a href="http://www.bluemoonelise.net/massage/">Massage</a></li>
						<li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27"><a href="http://www.bluemoonelise.net/yoga/">Yoga</a>
								<ul class="sub-menu">
										<li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28"><a href="http://www.bluemoonelise.net/yoga-q-a/">Yoga Q & A</a></li>
								</ul>
						</li>
						<li id="menu-item-33" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-33"><a href="http://www.bluemoonelise.net/events/">Events</a></li>
						<li id="menu-item-34" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-34"><a href="http://www.bluemoonelise.net/soap-making-classes/">Soap Making Classes</a></li>
						<li id="menu-item-75" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-75"><a>More</a>
								<ul class="sub-menu">
										<li id="menu-item-83" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-83"><a href="http://www.bluemoonelise.net/about-us/">About Us</a></li>
										<li id="menu-item-35" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-35"><a href="http://www.bluemoonelise.net/blog/">Blog</a></li>
										<li id="menu-item-105" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-105"><a href="http://www.bluemoonelise.net/contact-us/">Contact Us</a></li>
										<li id="menu-item-97" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-97"><a href="http://www.bluemoonelise.net/customer-service/">Customer Service</a></li>
										<li id="menu-item-101" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-101"><a href="http://www.bluemoonelise.net/sitemap/">Sitemap</a></li>
								</ul>
						</li>
				</ul>
		</nav>
</div>
<script type="text/javascript">
/*-----------------------------------------------------------------------------------*/
/*	Nav Link Nudge - http://davidwalsh.name/jquery-link-nudge
/*-----------------------------------------------------------------------------------*/	
	/* usage 1 */
	jQuery('.sub-menu li a').nudge();
	/* usage 2 */
	jQuery('.sub-menu li a').nudge({
		property: 'margin',
		direction: 'left',
		amount: 6,
		duration: 300
	});
</script> 

<!-- menu content end -->

</div>
<table cellpadding="0" cellspacing="0" border="0" align="center" width=800px >
		<tr>
				<td><table cellpadding="0" cellspacing="0" border="0" width="100%">
								<tr>
										<td class="headerbar" colspan="2"><img src="/cart/images/spacer.gif" height="27" width="1"></td>
								</tr>
								<tr>
										<td><table cellpadding="0" cellspacing="0" border="0" width="100%">
														<tr>
																<td valign="top" class="leftbackground" colspan="2"><table width="120" cellpadding="0" cellspacing="0" border="0">
																				<tr>
																						<td><table cellpadding="0" cellspacing="0" border="0" width="100%">
																										<tr>
																												<td class="leftside" colspan=2 nowrap><b>PRODUCT SEARCH:</b></td>
																										</tr>
																										<form action="/app/storeFront/searchForProducts" method="POST">
																												<input id="csrf_token" name="csrf_token" type="hidden" />
																												<tr>
																														<td class="leftside"><input class="search" id="productName" name="productName" size="15" type="text" /></td>
																														<td class="leftside"><input type="image" src="/cart/dispimg.jsp?affid=7&name=SearchGo"></td>
																												</tr>
																										</form>
																								</table></td>
																				</tr>
																				<tr>
																						<td class="leftsideshopby" nowrap>SHOP BY CATEGORY:</td>
																				</tr>
																				<tr>
																						<td height="20" class="leftlink"><a class="leftlink" href="/app/storeFront/handleStoreFrontLink?displayType=Category&id=1&displayName=Herbal Body Care">Herbal Body Care</a></td>
																				</tr>
																				<tr>
																						<td height="20" class="leftlink"><a class="leftlink" href="/app/storeFront/handleStoreFrontLink?displayType=Category&id=4&displayName=Gift Crates">Gift Crates</a></td>
																				</tr>
																		</table></td>
																<td valign="top" width="100%"><table width="100%" cellpadding="0" cellspacing="0" border="0">
																				<script type="text/javascript" src="https://cy987.infusionsoft.com/app/webTracking/getTrackingCode?trackingId=1d67a176a2b8bc3ec316c1f86863729a"></script>
																				<tr>
																						<td width="100%" >&nbsp;&nbsp; <a class="topnav" href="/app/storeFront/showStoreFront">Home</a></td>
																						<td align="right"><img src="/cart/dispimg.jsp?affid=7&name=ShoppingCart" border="0" vspace="2"></td>
																						<td class="cartitem" nowrap>&nbsp; <a href="/app/manageCart/showManageOrder" class="cartitem"> 0&nbsp;Item
																								&nbsp;() </a> &nbsp; </td>
																				</tr>
																				<tr>
																						<td width="100%" colspan="3"><script type="text/javascript" src="https://cy987.infusionsoft.com/app/webTracking/getTrackingCode?trackingId=1d67a176a2b8bc3ec316c1f86863729a"></script>
																								<table cellpadding="0" cellspacing="0" border="0">
																										<tr>
																												<td><img src="/cart/images/spacer.gif" height="20"></td>
																										</tr>
																										<tr>
																												<td><table cellpadding="0" cellspacing="0">
																																<tr>
																																		<td class="listingpadding"><table>
																																						<tr>
																																								<td class="productdivider"><a href="/app/storeFront/handleStoreFrontLink?displayType=Category&id=1&displayName=Herbal Body Care"><img border="0" src="/cart/cimg.jsp?t=c&i=1"></a></td>
																																						</tr>
																																						<tr>
																																								<td class="productlistinginfo"><a href="/app/storeFront/handleStoreFrontLink?displayType=Category&id=1&displayName=Herbal Body Care">Herbal Body Care</a></td>
																																						</tr>
																																				</table></td>
																																		<td class="listingpadding"><table>
																																						<tr>
																																								<td class="productdivider"><a href="/app/storeFront/handleStoreFrontLink?displayType=Category&id=4&displayName=Gift Crates"><img border="0" src="/cart/cimg.jsp?t=c&i=4"></a></td>
																																						</tr>
																																						<tr>
																																								<td class="productlistinginfo"><a href="/app/storeFront/handleStoreFrontLink?displayType=Category&id=4&displayName=Gift Crates">Gift Crates</a></td>
																																						</tr>
																																				</table></td>
																																</tr>
																														</table></td>
																										</tr>
																								</table></td>
																				</tr>
																				<tr>
																						<td width="100%" colspan="3"><script type="text/javascript" src="https://cy987.infusionsoft.com/app/webTracking/getTrackingCode?trackingId=1d67a176a2b8bc3ec316c1f86863729a"></script>
																								<table cellpadding="0" cellspacing="0" border="0">
																										<tr>
																												<td class="customHTML"><img src="/cart/images/skins/sand/sand_Products.jpg" /></td>
																										</tr>
																										<tr>
																												<td><img src="/cart/images/spacer.gif" height="20"></td>
																										</tr>
																										<tr>
																												<td><table cellpadding="0" cellspacing="0">
																																<tr> </tr>
																														</table></td>
																										</tr>
																								</table></td>
																				</tr>
																		</table></td>
														</tr>
												</table></td>
										<td class="rightside" width="1"><img src="/cart/images/spacer.gif" width="1"></td>
								</tr>
								<tr>
										<td width="772" class="footerbar" colspan="2"><img src="/cart/images/spacer.gif" height="27" width="1"></td>
								</tr>
						</table></td>
		</tr>
</table>
<div id="branding" style="text-align:right;display:block"><img border="0" src="/slices/branding/powered_white.jpg"></div>
<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery("td.leftlink").each(function() {
            var $this = jQuery(this);
            $this.css("background", $this.css("background-image") + " no-repeat 0px 0px");
        });
    });

</script> 
<script type="text/javascript" src="https://cy987.infusionsoft.com/app/webTracking/getTrackingCode?trackingId=1d67a176a2b8bc3ec316c1f86863729a"></script>
</body>
</html>

If you aren't using all those classes on the body tag then get rid of them. Al,so avoid using deprecated html such as align="center" and use css instead.

Check for errors at every step to make sure you have valid code.

[schwim]

Hi there and thanks again for your help. I've tried to add the code as you intended, but I'm still encountering an issue.

The first is the phantom "table { background: transparent; }" at the top of the page. Should I add a . to the front of this css element or should something else be done to it?

The only other thing I'm worried about is that the system doesn't really allow me access to the head, so I posted the doctype and subsequent to the css file, so you can see that some content got posted before the intended start of the html. Is there anything I can do to handle this better or is it a case of just do the best with what you have?

Thank you so much for all the help you've provided. The menu looks exactly as it should.

https://cy987.infusionsoft.com/app/s...showStoreFront

[ralph.m]

The first is the phantom "table { background: transparent; }" at the top of the page. Should I add a . to the front of this css element or should something else be done to it?

What can you access in the HTML? You have an errant

table {
            background: transparent;
        }

    </style>

between the closing </head> tag and opening <body> tag. There shouldn't be anything there.

[schwim]

Well, that's the confusing thing. It wasn't there originally and if I take out the new css and menu html, it disappears again. I can find one instance of this code in the css, but removing it doesn't remove it from the generated page.

#sub-nav-wrapper .sf-menu li li:last-child { border-bottom: none!important; }
table { background: transparent; }

I'm not sure how to get rid of it(short of removing the new code, which I really don't want to do ).

[ralph.m]

There's also some errant code at the top of the page, and a big gap above the doctype:

<script type="text/javascript" src="/js/sink_jq.jsp?b=1.25.7.26"></script>
<script type="text/javascript" src="/js/sink_js.jsp?b=1.25.7.26"></script>


    <style type="text/css">

        img.product-thumbnail {
            max-width: 150px;
            max-height: 150px;
            width: expression(this.width > 150 ? "150px" : true);
            height: expression(this.height > 150 ? "150px" : true);
        }

If you just look at the space you have to paste code into, what do you see? Perhaps post here what code you actually see when you are in a position to edit the code. It's not clear what conditions you are dealing with here. If you view the source code of the page, is this what you see when editing?

[schwim]

hi there,

I took all the bits out and started adding them one part at a time. I found the problem showed up when I added the </style> at the bottom of the css file. It seems that the site is injecting some of it's own css and ending the <style> tag when I did caused the problem. Moving </style> and the three jquery file calls to the top of the body header seemed to have resolved my issue. It all looks very neat.

Thank you very much for all of your assistance!

[ralph.m]

You do still have this at the top of the HTML, which may crash the site in some browsers:

<script type="text/javascript" src="/js/sink_jq.jsp?b=1.25.7.26"></script>
<script type="text/javascript" src="/js/sink_js.jsp?b=1.25.7.26"></script>


    <style type="text/css">

        img.product-thumbnail {
            max-width: 150px;
            max-height: 150px;
            width: expression(this.width > 150 ? "150px" : true);
            height: expression(this.height > 150 ? "150px" : true);
        }

Also, I get security warnings every time I view the page, probably because some of the links on your page are not http[COLOR="#FF0000"]s[/COLOR]://

It's probably better not to use full URLs if you don't need to.

[schwim]

The errant code is being sent by the system and I don't have the ability to move or remove it. It's not visible to me in any of the editors.

Also, I get security warnings every time I view the page, probably because some of the links on your page are not https://

It's probably better not to use full URLs if you don't need to.

Could you explain the warnings and potential resolution some more? I don't get errors on the page. As for Full URLs, the menu will be altered to use relative URLs for anything under infusionsoft but I have to keep the full URL's for all the links pointing back over to the bluemoonelise.net site, since they are two different sites. Are there other links I should be dealing with as well?

[ralph.m]

Hm, I can't see what on the page is causing the warning. Maybe someone else can see it. Here's a screen shot of what I get:

schwim.png

If you view the course code of your page (View > Source) you'll see the problem code at the top of the page.

[schwim]

I do see the mystery code in source, I just can't see the same code in any of the editors. It's outside of my access on the editing side.

Could the broken ssl certificate be because of the images and jquery files I'm linking in the css to the bluemoonelise.net and googlecode site?

[ralph.m]

Could the broken ssl certificate be because of the images and jquery files I'm linking in the css to the bluemoonelise.net and googlecode site?

I guess it must be that. Links to other pages on the web should be OK, but I guess when you are pulling content in, like images and other code, that causes the problem.