Spry width = auto
I cannot seem to figure out how to get my spry menu to go the
entire width of my page. I've tried auto, positioning and the exact
page with as a value and nothing will work.
Bullfrog
This is killing me. Any suggestions!
Thank you,
Try looking at the ul.MenuBarHorizontal and ul.MenuBarActive
in your SpryMenuBarHorizontal.css file. This is the overall width
of the menu. In my case I chose to use pixels instead of the ems
that it inserts with.
Then, you will probably need to adjust your widths for the
ul.MenuBarHorizontal li style entry. This is the width of the
individual list items (menu buttons).
It worked for me.
Hope this helps you.
nitefisher
Similar Messages
-
What browsers does this issue occur:
Internet Explorer 8 (both images above)
What version of Spry are using:
Spry 1.7 (SpryWidget.js - version 0.16 - Spry Pre-Release 1.7)
What is the url of your website or page in issue:
(still in Qual behind firewall. link won't work here.)
This screenshot clipping is side-by-side comparison of IE8 browser displaying the same spry navigation bar. Any ideas why IE 8 would render this differently?I can't replicate the problem on my IE either. The top is screenshot from other IE 8 machine
here's the css related to width:
.MenuBarLeftShrink {
float: left; /* shrink to content, as well as float the MenuBar */
width: auto;
.MenuBarRightShrink {
float: right; /* shrink to content, as well as float the MenuBar */
width: auto;
.MenuBarFixedLeft {
float: left;
width: 80em;
.MenuBarFixedCentered {
float: none;
width: 80em;
margin-left:auto;
margin-right:auto;
.MenuBarFullwidth {
float: left;
width: 100%;
.MenuBar .MenuItem .MenuItemLabel{
text-align:center;
font-weight: normal;
line-height:1.4em;
color:#ffffff;
/*background-color:#1d788e; /* affects: label area of non-rollover area, removing this and background image solved issue with disappearing arrows */
/*background-image:url(../../../../images/nav_bg_400x45.gif);*/ /* this got rid of arrow image */
padding: 8px 10px 8px 32px; /* .MenuBar .MenuItem has padding-right of 24px */
width: 100%; /* was 6em */
width:auto;
.SpryIsIE6 .MenuBar .MenuItem .MenuItemLabel{
width:1em; /* Equivalent to min-width in modern browsers */
.MenuBar .SubMenu .MenuItem .MenuItemLabel{
text-align:left;
line-height:1em;
background-color:#ffffff;
/* color should be TRP blue */
color:#00425f;
padding: 10px 63px 10px 30px; /* padding around sub-menu items. needs to be fairly big for finger target zones */
width: auto; /* was 7em */
/* container item */
#navigation { width:794px; margin-bottom: 13px; } -
Image width=auto height=auto problems in Internet Explorer
I thought I was having an issue with my MM_swapimage in Internet explorer but it appears to be my images scale.
I have my main large image that has a width=auto height=auto which does not appear in Internet Explorer only
the smaller "thumb" images of varying size have a height=40px width=auto so that the different sizes of thumb images look horizontaly uniform. how do I get the images to work without setting the exact scale for each image?once I removed the "auto" setting everything worked just fine, the images came in at the proper pixel size, and the thumb nail images where proportional in size seeing how I had a height set of 40 px the width took care of itself.
Any Ideas on where I can find a good tutorial on client login and password to access pages with their content? -
Enhancement requst: af:table height&width:auto (and more...)
Hello again!
Today is my day to deal with af:table :)))
Please, consider refactoring af:table to allow width&height:auto!!! And, please, please, please, allow something like
<af:table rowsHeight="x">
so the height is set to exactly display x rows (and set height automatically).
I'm really having hard time to explain to users that tables must(!!!) have fixed size – wasting space on UI when small amount of data is rendered... and user have to scroll down to see other content... huh! The customers....
(guys who agree, please add +1 post to this forum so dev's take it seriously – thanks!)
While I'm here, got another idea: enable setting af:inputText to multi-row input mode WHILE having height of single row (allowing automatic overflow by x and/or y axis). This is another example of UI space saving enhancement desperately needed...
Cheers,
PaKoI have the same issue. The only way I able to get a table resizing correctly is to have the table in the facet of either 'panelStretchLayout' or 'panelSplitter' directly. And I mean directly. Do not have it content in any other component.
If you contain the table with panelBox or paneGroupLayout, the resizing does not work.
For my requirement, I have to contain the table inside a panel box (for the nice looking header etc.) and it has to resize correctly.
I would really like ADF group to solve this issue too.
HTH,
--AJ -
Horizontal width - AUTO does not work in IE
----- sorry someone sent me a screen grab and my description
was wrong... I'll repost later, sorry!use the html page published by flash to isolate the issue to your embedding html.
-
I've set the width of a (position: absolute) container for a Spry menu so it's width (width: auto) will expand to hold the menu in a single row.
But sometimes it looks like this in CS3:
While in browsers it looks OK, like this:
Is it OK to set the width (or height, for that matter) of the container to auto or or do I have to set a fixed width?Please see the answer in the other forum.
Gramps -
Spry menubar not working correctly in IE9 - fixed width or padding or...?
Need help. My spry menu bar isn't all the way to the right when in compatibility mode in IE9. When not in compatibility mode it is even further from the right. Is there a way to make it so that it is all the way to the right on both compatibility and non-compatibility modes. Is there a better way than changing the padding or can I do a fixed width? www.superedgar.com
The spry code is below.
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
font-family: Arial, Helvetica, sans-serif;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1010;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: auto;
float: left;
white-space: nowrap;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #cccccc;
border-right-color: #cccccc;
border-bottom-color: #cccccc;
border-left-color: #cccccc;
background-image: url(../images/Menu%20Bars/metalsubmenubargray.gif);
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
margin: 0%;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
width: auto;
left: -1000em;
float: none;
white-space: nowrap;
background-image: url(../images/Menu%20Bars/metalsubmenubargray.gif);
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
cursor: auto;
left: auto;
background-image: url(../images/Menu%20Bars/metalsubmenubargray.gif);
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
float: none;
width: 14em;
background-image: url(../images/Menu%20Bars/metalsubmenubargray.gif);
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
margin: -5% 0 0 95%;
border-right-style: solid;
border-left-style: solid;
border-right-color: #999999;
border-left-color: #999999;
border-right-width: 2px;
border-left-width: 1px;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
left: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
position: absolute;
width: 14em;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
color: #392B68;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
padding-top: 8px;
padding-right: 29px;
padding-bottom: 7px;
padding-left: 30px;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
color: #392B68;
background-image: url(../images/Menu%20Bars/metalsubmenubargrayhover.gif);
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
color: #392B68;
width: auto;
float: none;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
background-position: 95% 50%;
color: #392B68;
width: auto;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
background-position: 95% 50%;
color: #FCFDFF;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
background-position: 95% 50%;
width: auto;
float: none;
color: #392B68;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
background-position: 95% 50%;
color: #FCFDFF;
width: auto;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
position: absolute;
z-index: 1010;
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f\loat: left;because of the interpretation of the different browsers, it is very difficult to get the correct outcome each time.
In your case, I would do exactly as you have done, that is apply an auto width to the menu item and then apply a padding to fill the rest. I then centre the menubar so that the difference is equally divided betweeen left and right.
Gramps -
Cell column width using spry horizontal menu
Hi
Trying to set the cell column width using DWCS5.5 Spry Horizontal menu.
view-source:http://www.roatan.ws/spry-menu-bob
I used help to get directions and I think I did it correctly but I do not know for sure.
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
background-color: #356A68;
float: none;
background-color:transparent;
height: auto;
width: auto;
Trying to clean up my site and get things working an looking right.
Any suggestions appreciated
bobSpry menus do not contain any table columns or cells. They are just lists <ul> <li> tags styled with CSS.
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 12px;
position: relative;
text-align: center;
cursor: pointer;
width: 8em; /**adjust top-menu width**/
float: left;
text-decoration: underline;
ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
font-size: 10px;
z-index: 1020;
cursor: default;
width: 8em; /**adjust sub-menu width**/
position: absolute;
left: -1000em;
background-color: #356A68;
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com/ -
Hi,
I have a question about the blind Effect, the effect works
superb but there is one little problem, the div block i use it on
is of an dynamic width, this means if the site is resized to an
smaller resolution the div moves with it. If i use the blind effect
on the div i can't resize it any more, the width has a fixed length
an will go out of the screen if the browser is resized.
Does anybody has an idea if this is changeable, or is it not
possible?
Regards.Hi UserXyX,
I'm guessing you can get around the problem by using an
onPostEffect observer and resetting the width of the element you
were blinding to "auto" or "". (example: ele.style.width = "auto";)
You can see an example that uses an effects observer here:
http://labs.adobe.com/technologies/spry/samples/effects/observers_sample.html
--== Kin ==-- -
How to make panel collection with auto width and height in popup dialog ?
Hi,
I have ony af:popup in that I have added af:dialog. And in this af:dialog I have added af:table which is surrounded by af:panelCollection.
Means my popup structure is like as below
af:popup
af:dialog
af:panelCollection
af:table
If I set resize="on" in af:dialog then I can able to resize my popup dialog but the panelCollection inside the af:dialog is not become auto adjusted.
I am able to make panelCollection width auto adjusted by using AFStretchWidh style class but not able to adjust its height.
Hope you can understand my problem and pls try to provide me its solution if you have already implemented this.
Regards,
DevDI believe you are using af:panelGroupLayout because there are some other components except af:panelCollection, so try this combination
<af:popup id="p1">
<af:dialog id="d2" resize="on" stretchChildren="first">
<af:panelStretchLayout id="psl2">
<f:facet name="bottom"/>
<f:facet name="center">
<af:panelCollection id="pc1">
<f:facet name="menus"/>
<f:facet name="toolbar"/>
<f:facet name="statusbar"/>
<af:table var="row" rowBandingInterval="0" id="t1">
<af:column sortable="false" headerText="col1" id="c1">
<af:outputText value="#{row.col1}" id="ot5"/>
</af:column>
<af:column sortable="false" headerText="col2" id="c3">
<af:outputText value="#{row.col2}" id="ot4"/>
</af:column>
<af:column sortable="false" headerText="col3" id="c2">
<af:outputText value="#{row.col3}" id="ot3"/>
</af:column>
<af:column sortable="false" headerText="col4" id="c4">
<af:outputText value="#{row.col4}" id="ot2"/>
</af:column>
<af:column sortable="false" headerText="col5" id="c5">
<af:outputText value="#{row.col5}" id="ot1"/>
</af:column>
</af:table>
</af:panelCollection>
</f:facet>
</af:panelStretchLayout>
</af:dialog>
</af:popup>Put only af:panelCollection in CENTER facet of af:panelStretchLayout and use other facets of af:panelStretchLayout for other components. -
Spry menu bar doesn't appear correctly in IE
Hi guys..
I created a spry menu bar in DW CS4. It looks fine in Firefox but in IE 8, the background image of the navigation bar appears white after allowing activecontrol to run. I didn't include any image for ul.MenuBarHorizontal a because I wanted to use the background image for the div containing the navigation bar.(Hope I didn't confuse you there).. I tried using the search box but couldn't find any solution to my problem. Here are my screen shots.
This is in firefox.
This is in IE 8 before allowing activex.
This is in IE 8 after allowing activex. (Part of the navigation bar is white)
Here's the code.Hope you can help me asap. Thanks!
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: center;
cursor: pointer;
width: 9em;
float: left;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 9em;
position: absolute;
left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 9em;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
left: auto;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border: 1px solid #CCC;
background-image: url(../images/single.jpg);
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
color: #000;
text-decoration: none;
padding-top: 1.05em;
padding-right: 0.75em;
padding-bottom: 1.05em;
padding-left: 0.75em;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
color: #FFF;
background-image: url(../images/single.jpg);
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
color: #FFF;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
background-image: url(../images/single.jpg);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
background-repeat: no-repeat;
background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF;/* HACK FOR IE: to stabilize appearance of menu items; the slash in
float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarHorizontal li.MenuBarItemIE
display:
inline;
f\loat: left;
background: #FFF;
I hope this helps.
Ben -
Spry Menu Bar css not compatible with IE7? or compatibility View on IE8?
Well i've made my website
. Swimmerbuddy.com
Problem:I used the spry menu bar on a div tag. I've got it working fine on several browser and so on.. but hmm. i noticed that IE7 and only on compatibility view of IE8 it does not work...
It seems like the drop down menus get cover by the main content underneath it..
I started of with dwt i made my self.This is the DWT and the css that controll the dwt and the spry menu bar.
PLZ HELP ME.. THANKS
THIS IS THE DWT THAT THE PAGE RUNS ON
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<link href="../CSS/main.css" rel="stylesheet" type="text/css" />
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<style type="text/css">
a:link {
color: #000;
text-decoration: none;
</style>
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
a:visited {
color: #000;
text-decoration: none;
a:hover {
text-decoration: none;
color: #000;
a:active {
text-decoration: none;
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="networkicons"><a href="http://www.facebook.com/?ref=logo#!/profile.php?id=100001554936595" target="_blank"><img src="../_images/facebook.png" alt="facebook.com" width="45" height="45" border="0" title="facebook.com"/></a><a href="http://www.myspace.com/swimmerbuddy" TARGET="_blank"> <img src="../_images/myspace.png" alt="myspace.com" width="44" height="45" border="0" title="myspace.com"/></a><a href="http://twitter.com/swimmerbuddy" TARGET="_blank"> <img src="../_images/twitter.png" alt="twitter.com" width="43" height="45" border="0" title="twitter.com"/></a><a href="http://www.youtube.com/swimmerbuddy1" TARGET="_blank"> <img src="../_images/youtube.png" alt="youtube.com" width="44" height="45" border="0" title="youtube.com"/></a></div>
<div id="buyNow1">
<p><a href="../order_now.html"><img src="../buynowbutton.png" alt="bt1" width="130" height="25" border="0" longdesc="Order Your Swimmer Buddy Today!!" /></a></p>
</div>
</div>
<div id="mainNav">
<ul id="mainNavcontent" class="MenuBarHorizontal">
<li><a href="../index.htm">Home</a> </li>
<li><a href="../swimmer.html">Swimmer Buddy</a></li>
<li><a href="../order_now.html">Order Now</a> </li>
<li><a href="#" class="MenuBarItemSubmenu">Gallery</a>
<ul>
<li><a href="../photo_gallery.html">Photos</a></li>
<li><a href="../video_gallery.html">Videos</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Zinger Products</a>
<ul>
<li><a href="http://www.winkyscoop.com/">Winky Scoop</a></li>
<li><a href="http://www.1800succeed.com/">Hypmovation</a></li>
<li><a href="http://www.1800succeed.org/">1800SUCCEED</a></li>
<li><a href="http://www.zingerproducts.com">Zinger Store</a></li>
</ul>
</li>
<li><a href="../about.html">About Us</a></li>
<li><a href="../contact.html">Contact Us</a></li>
</ul>
</div>
<!-- TemplateBeginEditable name="mainContent" -->
<div id="pageInfo">
<div id="info_page">
<p class="regionID">Region ID</p>
<hr class="breaklinePageInfo" />
<p class="breadcrum">> <a href="../index.htm">Breadcrum </a></p>
</div>
<div id="mainContent">
<div id="content">
<p>Main Content Goes her</p>
</div>
</div>
</div>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="buynow2" -->
<div id="buyNow2"><a href="../order_now.html"><img src="../buynowbutton.png" width="130" height="25" /></a></div>
<!-- TemplateEndEditable -->
<div id="footer">
<div id="footertext">
<p class="footertextclass">Copyright © 2010 SwimmerBuddy.com. All rights reserved. SwimmerBuddy.com is part of <a href="http://www.zingerproducts.com" class="footertextclass">Zinger Products</a>. Designated Trademarks and brands are the property of their respective owners. This page was last modified Setember 28,2010. Swimmer Buddy - Pattent Pending 2010</p>
</div>
<div id="footerlinks">
<p classs="footerlinkspacing"> <span class="footerlinkspacing"><a href="../Disclaimer.html">Disclaimer</a><a href="../terms.html"> Term of Service </a><a href="../contact.html">Contact Us</a></span>
</div>
</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("mainNavcontent", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
THIS IS THE MAIN.CSS
@charset "utf-8";
#networkicons {
height: 50px;
width: 200px;
margin-top: 160px;
margin-left: 15px;
position: absolute;
#wrapper {
width: 933px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
text-align: left;
position: relative;
#mainNav {
text-align: center;
position: relative;
margin-right: auto;
margin-left: auto;
width: 934px;
padding-bottom: 15px;
clear: both;
overflow: visible;
#navwrapper {
width: 935px;
margin-right: auto;
margin-left: auto;
#mainContent {
width: 910px;
padding-left: 10px;
padding-right: 10px;
position: relative;
padding-bottom: 20px;
padding-top: 20px;
#content {
width: 910px;
position: relative;
#wrapper #footer #footerlinks p .footerlinkspacing a {
margin-right: 20px;
#footer {
width: 930px;
background-color: #fff;
position: relative;
margin-top: 5px;
text-align: center;
color: #000;
padding-bottom: 10px;
margin-bottom: 15px;
#header {
width: 930px;
height: 209px;
background-image: url(../_images/header.jpg);
background-repeat: no-repeat;
#buyNow1 {
height: 25px;
width: 140px;
float: right;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-align: center;
background-repeat: no-repeat;
color: #666;
padding: 5px;
position: absolute;
top: 160px;
right: 150px;
.buyNow1 {
color: #666;
#wrapper #pageInfo #info_page .breadcrum {
color: #003;
#wrapper #pageInfo #info_page .breadcrum a {
color: #003;
html, body {
margin: 0px;
padding: 0px;
#buyNow2 {
height: 25px;
width: 130px;
float: right;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-align: center;
padding: 5px;
position: relative;
#wrapper #buyNow2 a img {
position: absolute;
top: -30px;
right: 50px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
#pageInfo {
width: 930px;
background-image: url(../_images/pageinfobackground.jpg);
background-repeat: repeat-x;
background-color:#FFF;
text-align: left;
padding-bottom: 15px;
margin-top: 18px;
position: relative;
overflow: visible;
visibility: visible;
#wrapper #mainNav #mainNavcontent {
position: absolute;
left: 0px;
width: 930px;
.regionID {
font-size: 2em;
font-weight: bold;
color: #FFC;
margin-top: 1em;
margin-bottom: 0em;
text-align: left;
margin-left: 5px;
.breaklinePageInfo {
margin-top: 0.5em;
color: #FAFEAB;
.breadcrum {
color: #003;
font-size: 1.1em;
font-weight: bold;
text-decoration: underline;
margin-top: -0.2em;
margin-left: 15px;
#breadcrum {
font-weight: bold;
color: #003;
#footertext {
width: 910px;
font-size: 0.6em;
padding-left: 10px;
padding-right: 10px;
margin-top: 10px;
#footerlinks {
width: 930px;
font-size: 0.7em;
font-weight: bold;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color: #000;
position: relative;
margin-top: 10px;
margin-bottom: 5px;
.footertextclass {
color: #000;
.footerlinkspacing {
margin-top: -0.5em;
color: black;
height: 10px;
font-style: normal;
line-height: normal;
font-variant: normal;
letter-spacing: normal;
p {
margin: 0px;
padding: 0px;
body {
text-align: center;
margin-top: 5px;
background-color: #073e78;
background-image: url(../_images/background.jpg);
background-repeat: repeat-x;
background-attachment: scroll;
font-size: 100%;
THIS IS THE dropdown menu.css
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0px;
padding: 0;
list-style-type: none;
font-size: 100%;
position: static;
text-align: center;
cursor: pointer;
width: 132.8px;
float: left;
overflow: visible;
visibility: visible;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 132.8px;
position: absolute;
left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 8.2em;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
left: auto;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border: #333;
color: #FFF;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #FFF;
padding: 0.5em 0.75em;
color: #333;
text-decoration: none;
background-image: url(../_images/bar-top.png);
background-repeat: no-repeat;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
color: #003;
background-image: url(../_images/bar-Bottom.png);
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
color: #003;
background-image: url(../_images/bar-Bottom.png);
background-position: bottom;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
background-image: url(../_images/bar-topsub.png);
background-repeat: no-repeat;
background-position: right top;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
background-image: url(../_images/bar-topsubhover.png);
background-repeat: no-repeat;
background-position: right bottom;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF;Thanks a lot for that tip. It does improve it by a whole lot.. i c what my mistake was.. however, something is still off
.. The Drop down menu is not behaving well...
As you may c by the picture, the drop down menu now moves to the right. and is not because of the object to its left, i've modified that. Zinger Products Drop Down Menu also does the same. -
Spry Rollover Menus Do not Retract or Hover
Here's my code and I will attach a screenshot:
<html>
<head>
<meta name="verify-v1" content="7UOb7pMZvRsNAeg3bRekSJNhH/EMwsI9CcQBQKDS/3I=" />
<title>Total Life Counseling Orlando Winter Park Clermont</title>
<meta name="KEYWORDS" content="Orlando Winter Park & Clermont family counseling individual group children teenagers adult Skype Online Phone Portuguese Espanol Spanish Portuguese">
<meta name="DESCRIPTION" content="Total Life Counseling Center offers a full range of individual, family, group, phone, online, Skype counseling and therapy services for children, teenagers, adolescents and adults in Orlando, Winter Park, Metro West, East Orlando and Clermont Florida using a relational non-judgmental and non-threatening approach. Total Life Center consists of competent masters level therapists, Espanol counselors, Portuguese Counselors, Licensed Mental Health Counselors, Business Coaches, Image Enhancement Coaches and Masters Level interns who provide counseling for emotional, mental, physical and spiritual care including marriage, the individual, the family, substance abuse and more. Our offices serve College Park, Dr. Phillips, Pine Castle, Conway, Windermere, Winter Garden, Ocoee, Oviedo, Longwood, Altamonte Springs, Casselberry, Lake Mary, Sanford, Deland, De Bary, Deltona, Daytona, New Smyrna, Cocoa, Titusville, Merritt Island, Kissimmee, St. Cloud, Celebration, Mt. Dora, the Villages and the tri-cities of Tavares, Eustis and Leesburg.">
<LINK REV="Made" HREF="http://www.totallifecounseling.com">
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<script src="javascript/special_functions.js" language="JavaScript" type="text/javascript"></script>
<link rel="stylesheet" type=text/css href="styles/stylesheet.css">
<script type="text/javascript" src="flashobject.js"></script>
<link rel="stylesheet" type="text/css" href="styles/anylink.css" />
<script type="text/javascript" src="javascript/anylink.js">
* AnyLink CSS Menu script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
</script>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
_uacct = "UA-1922062-1";
urchinTracker();
</script>
<meta name="Microsoft Theme" content="none">
<style type="text/css">
<!--
.style1 {color: #FF0000}
.style12 {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
.style17 {
color: #6CA7C2;
font-weight: bold;
-->
</style>
<style>
<!--
#blog-header h1 {
font-size: 24px;
text-align: left;
padding: 15px 20px 0 20px;
margin: 0;
background-image: url(http://www.blogblog.com/moto_son/topper.gif);
background-repeat: repeat-x;
background-position: top left;
#blog-title {
margin:0;
padding:10px 30px 5px;
font-size:200%;
line-height:1.2em;
div.Section1
{page:Section1;}
span.EmailStyle15
{font-family:"Arial","sans-serif";
color:#993366}
.__feedview__mainbody { margin-right: 0px }
#main {
margin:0;
padding:15px 20px;
.post {
margin:0 0 2em;
.post h3 {
margin:0 0 .25em;
line-height: 1.4em;
font-weight: bold;
font-size: 150%;
color:#8cdfff;
.style19 {color: #83B5CC}
.style23 {font-size: 18px}
.style25 {
font-size: 12pt;
font-family: Tahoma;
.style28 {font-size: 11px}
.style29 {
font-size: 10pt
.style22 { color: #77ADC6;
font-weight: bold;
.style31 {font-size: 12pt}
.style32 {
font-weight: bold;
font-family: Tahoma;
font-size: 14pt;
.style33 {color: #6CA7C2}
.style10 { font-size: 16pt;
font-weight: bold;
.style34 {font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
.style35 {font-size: 14pt}
.style36 {
font-size: 10pt;
font-family: Arial, Helvetica, sans-serif;
.style37 {font-family: Arial, Helvetica, sans-serif}
-->
</style>
<script src="../Scripts/AC_ActiveX.js" type="text/javascript"></script>
<script src="../Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
</head>
<body leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0" class="home-bg">
<div style="position: absolute; width: 100px; height: 100px; z-index: 2; left: -500; top: -500" id="layer2">
<img border="0" src="flash/images/image1.jpg" width="2" height="1"><img border="0" src="flash/images/image2.jpg" width="2" height="1"><img border="0" src="flash/images/image3.jpg" width="2" height="1"><img border="0" src="flash/images/image4.jpg" width="2" height="1"><img border="0" src="flash/images/top-right.jpg" width="2" height="1"></div>
<table width="106%" height="600" border="0" cellpadding="0" cellspacing="0" class="home-bg-l1">
<tr>
<td width="217" class="home-bg-l1"> </td>
<td width="893" valign="top"><table width="828" height="595" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="532" valign="top"><table width="828" height="540" border="0" cellpadding="0" cellspacing="0" class="home-cbg2">
<tr>
<td width="30" class="home-bg-l2"> </td>
<td width="768" valign="top"><table width="768" height="532" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="307" valign="top" class="home-t1">
<div style="position: absolute; width: 768; height: 24; z-index: 1; top: 25" id="layer1" align="right">
<div id="horizontalMenu">
<ul id="MenuBar3" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="contact_us.htm">Contact Us</a>
<ul>
<li><a href="#">Item 1.1</a></li>
<li><a href="#">Item 1.2</a></li>
<li><a href="#">Item 1.3</a></li>
</ul>
</li>
<li><a href="services.htm">Services</a></li>
<li><a class="MenuBarItemSubmenu" href="counselors.htm">Counselors</a>
<ul>
<li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
<ul>
<li><a href="#">Item 3.1.1</a></li>
<li><a href="#">Item 3.1.2</a></li>
</ul>
</li>
<li><a href="#">Item 3.2</a></li>
<li><a href="#">Item 3.3</a></li>
</ul>
</li>
<li><a href="http://www.totallifecounseling.com/shop" target="_blank">Products</a></li>
<li><a href="forms.htm">Forms</a></li>
<li><a href="#">Court Ordered</a></li>
<li><a href="camps.htm">Camps</a></li>
</ul>
</div>
<!-- End HorizontalMenu Scripting -->
<div id="header">
<script type="text/javascript">
//var fo = new FlashObject("flash/HorizontalMenu10.swf", "header", "768", "307", "6");
//fo.addParam("wmode", "transparent");
//fo.addParam("base", "flash");
//fo.write("header");
</script>
</div>
<!-- End Header Scripting -->
<!-- #EndLibraryItem --></td>
</tr>
<tr>
<td valign="top" class="home-c"><table width="768" height="235" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="11"> </td>
<td width="576" valign="top">
<table border="0" style="border-collapse: collapse" width="100%" id="table45" cellpadding="0" height="100%">
<tr>
<td width="176" valign="top" bgcolor="#F2F4F5">
<table width="100%" border="0" cellpadding="2" cellspacing="2" id="table46" style="border-collapse: collapse">
<tr>
<td height="31" bgcolor="#2A6180"><p align="center"><A href="http://totallifecounseling.blogspot.com/"><strong>Articles & Blogs</strong></A></p></td>
</tr>
<tr>
<td height="1328" valign="top" bgcolor="#FFFFFF">
<!-- BEGIN: Constant Contact Stylish Email Newsletter Form -->
<div align="center">
<div style="width:160; background-color: #ffffff;">
<p align="center" class="style12"></strong>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js?pub=xa-4a9ae1e727d21f0f"></script>
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 15,
interval: 6000,
width: 170,
height: 1326,
theme: {
shell: {
background: '#F2F4F5',
color: '#6CA7C2'
tweets: {
background: '#ffffff',
color: '#2a6180',
links: '#2a6180'
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: false,
timestamp: false,
avatars: false,
behavior: 'all'
}).render().setUser('TotalLife').start();
</script>
<a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=250&pub=xa-4a9ae1e727d21f0f"><img src="http://s7.addthis.com/static/btn/v2/lg-share-en.gif" width="125" height="16" alt="Bookmark and Share" style="border:0"/></a>
<form name="ccoptin" action="http://visitor.constantcontact.com/d.jsp" target="_blank" method="post" style="margin-bottom:3;">
<div align="center"><span class="style25"><font style="font-weight: bold; font-family:Georgia,'Times New Roman',Times,serif; font-size:12px; color:#006699;">Read E-Newsletter</font></span>
<input type="text" name="ea" size="20" value="" style="font-family:Verdana,Geneva,Arial,Helvetica,sans-serif; font-size:10px; border:1px solid #999999;">
<input type="submit" name="go" value="GO" class="submit" style="font-family:Verdana,Arial,Helvetica,sans-serif; font-size:10px;">
<input type="hidden" name="m" value="1101177120388">
<input type="hidden" name="p" value="oi">
</div>
</form>
</div>
</div>
<!-- END: Constant Contact Stylish Email Newsletter Form -->
<!-- BEGIN: SafeSubscribe -->
<!-- END: SafeSubscribe -->
<!-- BEGIN: Email Marketing you can trust -->
<!-- END: Email Marketing you can trust -->
<p align="center" class="messageBoxContent style19"><strong><A href="resources.htm" class="style1 style25 style31"><font color="#FF0000">Recommended Books, Vitamins & Resources</font></A></strong></p>
</td>
</tr>
</table>
<hr color="#2A6180" size="1"> </td>
<td width="2" valign="top"> </td>
<td width="435" align="center" valign="top" bgcolor="#F3F5F5" class="boxText3"><p align="center"><strong>Counseling in Orlando, Winter Park, East Orlando, Clermont Florida and Central Florida</strong>
<p>TLC offers a "full" range of Individual, Family, & Group Counseling services for Children, Teenagers, Adolescents, and Adults. Our skilled counselors are Relational, Approachable and Specialists providing therapy services in the Central Florida area including: Orlando, Winter Park, Metro West, East Orlando, and Clermont Florida.</p>
<p align="center"><strong><span class="style24"><span class="style32"><font color="#FF0000">Complimentary</font> <span class="style1">15 Minute Phone Consultation (407) 248-0030</span></span></p>
<script type="text/javascript">
AC_AX_RunContent( 'width','425','height','344','src','http://www.youtube.com/v/sPatyytF2Ws&hl=en&fs=1&autoplay=1','type','application/x-shockwav e-flash','allowscriptaccess','always','allowfullscreen','true','movie','http://www.youtube .com/v/sPatyytF2Ws&hl=en&fs=1&autoplay=1' ); //end AC code
</script><noscript><object width="425" height="344">
<param name="movie" value="http://www.youtube.com/v/sPatyytF2Ws&hl=en&fs=1&autoplay=1">
</param>
<param name="allowFullScreen" value="true">
</param>
<param name="allowscriptaccess" value="always">
</param>
<embed src="http://www.youtube.com/v/sPatyytF2Ws&hl=en&fs=1&autoplay=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed>
</object></noscript>
<p align="center" class="boxText2"><strong><a href="espanol.htm" title="Orlando, Winter Park, Altamonte, Lake Mary & South West Orlando" target="_blank"><a href="espanol.htm">Español Consejero</a> or <a href="portuguese.htm" target="_blank">Português Conselheiro</a></strong></p>
<p align="center"><span class="boxText3"><a href="testimonials.htm"><strong>Testimonial </strong></a></b>- "He is doing so well! We are continuing with the diet changes and vitamins and his attitude is so much better.
You were right - kids don't see you for very long We are so grateful for your help. We were in a bad place before we saw you and I am really amazed at the difference." </span></p>
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style">
<a href="http://www.addthis.com/bookmark.php?v=250&pub=xa-4a9b0aa77cca0416" class="addthis_button_compact">Share</a>
<span class="addthis_separator">|</span>
<a class="addthis_button_facebook"></a>
<a class="addthis_button_myspace"></a>
<a class="addthis_button_google"></a>
<a class="addthis_button_twitter"></a></div>
<div align="center">
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js?pub=xa-4a9b0aa77cca0416"></script>
<!-- AddThis Button END -->
</div>
<p><A href="camps.htm" target="_blank"><span class="style1"><blink>Channel 13 News</blink></span> interviews Jim West, president of Total Life Counseling on how our Orlando area Camps Helped a Student with Making Friends.</A></p>
<p align="left">Orlando Mental Health <a href="counselors.htm" target="_parent">Counselors</a> specializing in all areas of therapy. Call us today. We can help!
<HR>
<p align="left"><strong>Services:</strong> Total Life Counseling Center consists of Licensed Counselors, Masters Level Therapists, <a href="espanol.htm" title="Espanol Counseling Services in Orlando & Winter Park Florida" target="_blank"><strong>Espanol Counselors</strong></a>, <a href="portuguese.htm" target="_blank"><strong>Portuguese Counselors</strong></a>, Licensed Mental Health Counselors, <a href="corporate.htm" target="_blank"><strong>Business Coaches</strong></a>, <a href="image.htm" target="_blank"><strong>Image Enhancement Coaches</strong></a> who provide counseling for emotional, mental, physical and spiritual care including marriage, individual, family, substance abuse and more. TLC provides services for all ages in the Orlando Central Florida area and can handle almost any issue:<br>
<TABLE id="table49" width="100%" border="0">
<TBODY>
<TR>
<TD height="23" align="middle"><div align="left"><A href="adhd.htm" target="_parent">ADD or ADHD </A></div></TD>
<TD align="middle"><div align="left"><A href="marriage.htm" target="_parent">Marriage</A></div></TD>
<TD align="middle"><div align="left"><A href="sexualabuse.htm" target="_parent">Sexual Abuse</A></div></TD>
</TR>
<TR>
<TD height="22" align="middle"><div align="left"><A href="depression.htm" target="_parent">Depression</A></div></TD>
<TD align="middle"><div align="left"><A href="anger.htm" target="_parent">Anger Management</A></div></TD>
<TD align="middle"><div align="left"><A href="anxiety.htm" target="_parent">Anxiety</A></div></TD>
</TR>
<TR>
<TD height="39" align="middle"><div align="left"><A href="socialskillsgroups.htm" target="_parent">Social Skills Groups</A></div></TD>
<TD align="middle"><div align="left">Mood Disorders or Bi-Polar</div></TD>
<TD align="middle"><div align="left"><A href="selfharm.htm" target="_parent">Self-injurious Behavior</A></div></TD>
</TR>
<TR>
<TD height="23" align="middle"><div align="left"><A href="premarital.htm" target="_parent">Pre-marital</A></div></TD>
<TD align="middle"><div align="left">Eating Disorders</div></TD>
<TD align="middle"><div align="left">Women's Issues</div></TD>
</TR>
<TR>
<TD align="middle"><div align="left"><A href="odd.htm" target="_parent">Oppositional Defiance Disorder</A></div></TD>
<TD align="middle"><div align="left"><A href="selfharm.htm" target="_parent">Self-Mutilation or Self Harm</A></div></TD>
<TD align="middle"><div align="left"><a href="disabled.htm">Mentally Challenged</a></div></TD>
</TR>
<TR>
<TD height="23" align="middle"><div align="left"><A href="janie.htm" target="_parent">Codependency</A></div></TD>
<TD align="middle"><div align="left"><A href="coaching.htm" target="_parent">Career Assessment</A></div></TD>
<TD align="middle"><div align="left"><A href="deb.htm" target="_blank">Gender Identity</A></div></TD>
</TR>
<TR>
<TD height="55" align="middle"><div align="left"><a href="ptsd.htm">Post Traumatic Stress Disorder PTSD</a></div></TD>
<TD align="middle"><div align="left"><a href="multiple.htm" target="_parent">Multiple Personality or Dissociative Disorders</a></div></TD>
<TD align="middle"><div align="left"><A href="adhd.htm" target="_parent">Attention Deficit Hyperactivity Disorder</A></div></TD>
</TR>
<TR>
<TD height="39" align="middle"><div align="left"><A href="counselors.htm" target="_parent">Christian Counseling</A></div></TD>
<TD align="middle"><div align="left"><a href="skype.htm" target="_blank">Skype, Phone or Online Counseling</a></div></TD>
<TD align="middle"><div align="left"><A href="cyberbullying.htm" target="_parent">Cyberbullying</A></div></TD>
</TR>
<TR>
<TD height="29" align="middle"><div align="left"><A href="grief.htm" target="_parent">Loss</A></div></TD>
<TD align="middle"><div align="left"><a href="anxiety.htm" target="_parent">Stress Management</a></div></TD>
<TD align="middle"><div align="left"><A href="grief.htm" target="_parent">Grief</A></div></TD>
</TR>
<TR>
<TD height="37" align="middle"><div align="left"><A href="substance_abuse.htm" target="_parent">Substance Abuse & Addictions</A></div></TD>
<TD align="middle"><div align="left"><A href="sports.htm">Sports Psychology</A></div></TD>
<TD align="middle"><div align="left"><A href="sports.htm" target="_blank">Mental Toughness</A></div></TD>
</TR>
<TR>
<TD height="23" align="middle"><div align="left"><A href="sexualaddictions.htm" target="_parent">Sexual Addictions</A></div></TD>
<TD align="middle"><div align="left"><A href="groups.htm">Groups</A></div></TD>
<TD align="middle"><div align="left"><A href="parenting.htm" target="_parent">Parent Coaching</A></div></TD>
</TR>
<TR>
<TD align="middle"><div align="left">Family</div></TD>
<TD align="middle"><div align="left"><A href="divorce.htm">Divorce Recovery</A></div></TD>
<TD align="middle"><div align="left"><a href="premarital.htm" target="_parent">Pre-Marital</a></div></TD>
</TR>
<TR>
<TD align="middle"><div align="left"><a href="disabled.htm">Mentally Disabled</a></div></TD>
<TD align="middle"><div align="left"><a href="leadershipcoaching.htm">Leadership Coaching</a></div></TD>
<TD align="middle"><div align="left"><a href="selfharm.htm" target="_blank">Self Harm</a></div></TD>
</TR>
</TBODY>
</TABLE>
<HR><p>At Total Life Counseling we focus on more than just the “Mind;" we focus on the “Total” person. </p>
<p><U>Clients travel all over Florida, from the Bahamas and Georgia </U>as TLC has worked with patients' and their prescribers' to reduce their dependency on medication. Since 2003 85% of our patients were stabilized with FDA approved supplements and dietary adjustments.</p>
<p>Patients receive tremendous relief from their symptoms with less medication or in some cases without medication. </p>
<p>Orlando teen and adolescent life workshops and teen camps.</p>
<p><span class="style1"><a href="espanol.htm" title="Orlando, Winter Park, Altamonte, Lake Mary & South West Orlando" target="_blank"><strong>Se Habla Español</strong></a> <span class="style22">and</span> <a href="portuguese.htm" target="_blank"><strong>Portuguese (Portugues)</strong></a> <span class="style17">Counselors</span></span></p>
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style">
<a href="http://www.addthis.com/bookmark.php?v=250&pub=xa-4a9b0aa77cca0416" class="addthis_button_compact">Share</a>
<span class="addthis_separator">|</span>
<a class="addthis_button_facebook"></a>
<a class="addthis_button_myspace"></a>
<a class="addthis_button_google"></a>
<a class="addthis_button_twitter"></a></div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js?pub=xa-4a9b0aa77cca0416"></script>
<!-- AddThis Button END -->
<HR>
<H2>Our Mission Statement</H2>
<p>To provide the Hope, Healing and Support to Individuals, Couples, and Families in a Warm, Approachable Way.</p>
<h2>Our Vision Statement</h2>
<p>To Accelerate Healing with our Relational, Holistic, Experiential approach through Communication, Camps, Coaching, and Counseling.</p>
<HR><h2 class="boxText3 style35">Office Locations and Areas Served</h2>
<p align="left" class="style36">Total Life Counseling Center provides counseling, therapy, coaching, camps and career services for all of central Florida, including: Orlando, Winter Park, Maitland, College Park, Dr. Phillips, Pine Castle, Conway, Windermere, Winter Garden, Ocoee, Oviedo, Longwood, Altamonte Springs, Casselberry, Lake Mary, Sanford, Deland, De Bary, Deltona, Daytona, New Smyrna, Cocoa, Titusville, Merritt Island, Kissimmee, St. Cloud, Celebration, Mt. Dora, the Villages and the tri-cities of Tavares, Eustis and Leesburg. </p>
<p align="left" class="style36">Our counseling, therapy, camps, group, coaching and career services are conveniently located at:</p>
<p align="left" class="style36"><font face="Arial"><a href="http://www.mapquest.com/directions/main.adp?src=maps&1sb=revise&2l=ewk9MRVLeIOeBOayBAhxUA= =&2g=4r1UgrxqqQkErUUWTq9wZA==&2v=ADDRESS&2a=1507 S Hiawassee Rd&2c=Orlando&2s=FL&2z=32835-5718&2y=US&2pn=&2pl=&cat=&q=">1507 S. Hiawassee
Road, Suite 101, Orlando, FL 32835</a></font></p>
<p align="left" class="style36"><font face="Arial"><a href="http://www.mapquest.com/directions/main.adp?src=maps&1sb=revise&2l=QjNBshU7m2oAHEBWy833/w= =&2g=qrdtLjTZeC3HG9agi4ixtw==&2v=ADDRESS&2a=1850 Lee Rd&2c=Winter Park&2s=FL&2z=32789-2115&2y=US&2pn=&2pl=&cat=&q=">Lee
World-1850
Lee Road
Ste. #215, Winter Park, FL 32789</a></font></p>
<p align="left" class="style36"><a href="http://maps.google.com/maps?q=1850+N.+Alafaya+Trail+Building+1-B+Orlando,+FL+32826&oe=utf- 8&rls=org.mozilla:en-US:official&client=firefox-a&um=1&ie=UTF-8&split=0&gl=us&ei=syZJSpCoJ 4ii8QTjreGTDQ&sa=X&oi=geocode_result&ct=title&resnum=1" target="_parent" class="style37">1850 N. Alafaya Trail Building 1-A Orlando, FL 32826 Suite 1A</a></p>
<p align="left" class="style34"><span class="style29"><a href="http://maps.google.com/maps?client=safari&rls=en-us&q=7432+State+Road+50,+Groveland,+FL+34 736&oe=UTF-8&um=1&ie=UTF-8&split=0&gl=us&ei=dPWZSaKgNp6Dtwfel5CcCw&sa=X&oi=geocode_result& resnum=1&ct=title" target="_parent" class="style37">7432 State Road 50, Groveland, FL 34736</a></span></p>
<p class="style10"><b class="style32">Call us (407)
248-0030</b>
<!-- BEGIN: Constant Contact Stylish Email Newsletter Form -->
</p>
<DIV align="center">
<DIV>
<FORM name="ccoptin0" action="http://ui.constantcontact.com/d.jsp" method="post" target="_blank">
<strong><IMG alt="Email Newsletter icon, E-mail Newsletter icon, Email List icon, E-mail List icon" src="http://img.constantcontact.com/ui/images1/visitor/email1_trans.gif" border="0"> Read our e-Newsletter
<INPUT name="ea0">
<INPUT type="submit" value="GO" name="go0">
<INPUT type="hidden" value="1101177120388" name="m0">
<INPUT type="hidden" value="oi" name="p0">
</strong>
</FORM>
</DIV>
</DIV>
<!-- END: Constant Contact Stylish Email Newsletter Form -->
<!-- BEGIN: SafeSubscribe --> <DIV align="center"><strong><A href="http://www.constantcontact.com/safesubscribe.jsp" target="_blank"><IMG height="14" alt="" src="http://img.constantcontact.com/ui/images1/safe_subscribe_logo.gif" width="168" vspace="5" border="0"></A></strong></DIV></td>
</tr>
</table> </td>
<td width="1"></td>
<td width="165" valign="top"> <table border="0" style="border-collapse: collapse" width="96%" id="table" cellpadding="2" cellspacing="2">
<tr>
<td height="32" bgcolor="#2A6180"><p align="center"><A href="consultation.htm"><strong>Upcoming Seminars</strong></A></p></td>
</tr>
<tr>
<td valign="top" bgcolor="#FFFFFF"><p align="center" class="style12"><strong><a href="http://www.youtube.com/TotalLifeMedia" target="_blank"><span class="style23"><img src="images/Youtube.jpg" alt="Total Life Counseling Center You Tube Videos" width="97" height="41" border="0" align="top"></span></a></strong></p>
<p align="center"><a href="http://www.facebook.com/pages/Total-Life-Counseling-Center/174661783281?ref=mf" target="_blank"><img src="images/Facebook.jpg" alt="Total Life Counseling Centers Facebook Fan Club" width="120" height="52" border="0"></a>
<p align="center" class="style12"><a href="4hourparenting.htm" target="_blank"><strong>4 Hour Court Ordered Divorce Parenting Class-Helping Your Children Through the Transition of Divorce</strong>, Court Referrals Accepted, Saturdays, 9a-1p. <a href="maps.htm"><strong>Total Life Counseling Center</strong></a></p>
<p align="center" class="style12"><a href="parenting.htm" target="_blank"><strong>4 Hour Parenting Class-Parenting with Purpose</strong></a>, Saturdays, 9a-1p. <a href="maps.htm"><strong>Total Life Counseling Center</strong></a></p>
<p align="center" class="style12"><a href="angermanagement.htm" target="_parent"><strong>8 Hour Anger Management Class</strong></a> Court Referrals Accepted, Saturday, 9a-5:30p, <a href="maps.htm"><strong>Total Life Counseling Center</strong></a></p>
<p align="center" class="style12"><span class="style17"><a href="marriage.htm" target="_parent">Couples Cafe </a></span><a href="marriage.htm"><span class="style17">"Enjoying Our Differences" </span></a><a href="Documents/Marriage Couples Cafe.pdf" target="_parent"><strong>Northland Church Natures Table </strong></a>Longwood, FL, TBA, 6:30p-8:30p<BR>
<BR>
<strong>Teen Talk about Obesity, Video Game Addiction, & Hooking Up</strong> - January 26th, 12p-1p, <a href="http://www.810weus.com/" target="_blank"><strong>The Linnda Durre Show 810 AM</strong></a> - James West, MA, LMHC</p>
<p align="center"><span class="style12 style28"><strong>The Hook Up Mentality</strong><BR>
Feb 4th from 9:30a-10:30a, East Ridge Middle School, <a href="james.htm" target="_blank">Jim West, MA, LMHC, NCC</a></span></p>
<p align="center"><span class="style12 style28"><strong>Social Networking & Internet Safety</strong><BR>
Feb 19th from 9:40a-11a, <a href="http://www.thefirstacademy.org" target="_blank">The First Academy</a>. <a href="james.htm" target="_blank">Jim West, MA, LMHC, NCC</a></span></p>
<p align="center"><span class="style12 style28"><strong>Top 10 Technology Relationship Kilers</strong><BR>
May 14th from 9a-12p, RSVP at (407) 281-7000, <a href="http://www.psysolutions.com/facilities/universitybehavioralcenter/" target="_blank">University Behavioral Center</a>. <a href="james.htm" target="_blank">Jim West, MA, LMHC, NCC</a> & <a href="janie.htm" target="_blank">Janie Lacy, MS</a></span></p>
<p align="center" class="style12"><strong>Professional Communicators Available for <a href="corporate.htm" target="_blank">Corporations,</a><a href="consultation.htm" target="_blank"> Colleges, Schools or Local Organizations on a Variety of Topics.</a></strong></p>
<p align="center"><span class="style12"><a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=250&pub=xa-4a9ae1e727d21f0f"><img src="http://s7.addthis.com/static/btn/v2/lg-share-en.gif" width="125" height="16" alt="Bookmark and Share" style="border:0"/></a></span></p>
<HR color="#2a6180" SIZE="1">
<TABLE id="table47" cellSpacing="2" cellPadding="2" width="99%" border="0">
<TBODY>
<TR>
<TD height="120" bgColor="#ffffff"><p align="center"><strong><a href="Documents/Staff Brochure.pdf" target="_blank">TLC Brochure</a></strong></p>
<p align="center"><strong><A href="http://www.adobe.com/products/acrobat/readstep2.html"><IMG height="31" alt="Get Adobe Reader logo" hspace="3" src="images/get_adobe_reader.gif" width="88" vspace="3" border="0"></A></strong></p></TD>
</TR>
</TBODY>
</TABLE>
<p align="center"><strong><A href="http://www.cfchristianchamber.com">Member of the Central Florida Christian Chamber of Commerce</A></strong></p>
<!-- google_ad_client = "pub-7929094220693135"; //Home Page, 120x240, created 12/4/07 google_ad_slot = "9273104889"; google_ad_width = 120; google_ad_height = 240; //--> </td>
</tr>
</table></td>
<td width="15"> </td>
</tr>
</table></td>
</tr>
</table></td>
<td width="30" class="home-bg-r1"> </td>
</tr>
</table></td>
</tr>
<tr>
<td height="90" valign="top" class="home-b1"><table width="828" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="30" height="90"> </td>
<td width="90"> </td>
<td align="center" valign="top">
<!--COPYRIGHT info BEGIN-->
<div class='copyright'>Copyright © 2006. Total Life Counseling Center. All rights reserved.<BR>
<br>
Main Office: 1507 S. Hiawassee Road #101, Orlando FL 32835 Satellite Locations: Clermont, Winter Park, East Orando Florida<br>
</div>
<!--COPYRIGHT info END-->
<!--BOTTOM OF PAGE LINKS BEGIN-->
<div class='bottomLinks'>
<DIV><A href="index.html" target="_blank">Home Page</A> | <A href="contact_us.htm" target="_blank">Contact</A> | <A href="maps.htm" target="_blank">Office Locations</A> |<A href="forms.htm"> FAQ</A> <A href="resources.htm">Links</A> <a href="employment.htm"><span class="style33">EMPLOYMENT</span></a></DIV>
</div>
<!--BOTTOM OF PAGE LINKS END--></td>
<td width="90"> </td>
<td width="30"> </td>
</tr>
</table></td>
</tr>
</table></td>
<td width="147" class="home-bg-r2"> </td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
<script type="text/javascript">
<!--
var MenuBar3 = new Spry.Widget.MenuBar("MenuBar3", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>Can you tell me where the error is in my HTML? Also how do I give you my JS script?
Here's my CSS:
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
background-color: #214D65;
top: 0px;
bottom: 10px;
border-top-color: #2B6180;
border-right-color: #2B6180;
border-bottom-color: #2B6180;
border-left-color: #2B6180;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #2B6180;
font-style: normal;
border-top-color: #2B6180;
border-right-color: #2B6180;
border-bottom-color: #2B6180;
border-left-color: #2B6180;
z-index: -1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 8.05em;
float: left;
background-color: #235E80;
top: -15px;
border-top-color: #A4B5BF;
border-right-color: #A4B5BF;
border-bottom-color: #A4B5BF;
border-left-color: #A4B5BF;
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
right: -8px;
color: #FFFFFF;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 10em;
position: absolute;
left: 0px;
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
background-color: #2B6180;
border-top-color: #2B6180;
border-right-color: #2B6180;
border-bottom-color: #2B6180;
border-left-color: #2B6180;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
border-top-width: 10px;
border-right-width: 10px;
border-bottom-width: 10px;
border-left-width: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
background-color: #2B6180;
border-top-color: #2B6180;
border-right-color: #2B6180;
border-bottom-color: #2B6180;
border-left-color: #2B6180;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 10em;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
background-color: #285B78;
border-top-color: #2B6180;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
margin: -5% 0 0 95%;
top: auto;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border: 1px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #2B6180;
padding: 0.5em 0.75em;
color: #FFFFFF;
text-decoration: none;
border-top-color: #587788;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
background-color: #2E698B;
color: #285D78;
background-repeat: no-repeat;
background-image: none;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
background-color: #2A6180;
color: #205775;
background-repeat: no-repeat;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
background-repeat: no-repeat;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
background-repeat: no-repeat;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
background-repeat: no-repeat;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
background-repeat: no-repeat;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
position: absolute;
z-index: 1010;
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF; -
Question: My spry menu bar is not displaying correctly in Dreamweaver
Hello,
I am new to Dreamweaver CS5, so coding isn't my area of expertise. My problem with my spry menu bar is that it does not display the tabs on the menu bar correctly. When I try to apply new changes to the CSS of the horizontal menu bar, half of the tabs will change and the other half will not. Also, I am unable to drag and move the menu bar itself around, a function that I was once able to do before. At times, only one tab of the menu bar will display itself, without any of the other tabs as well.
I have a hunch that my problems stem from some coding errors in the SpryMenuBarHorizontal.css, and possibly in the SpryMenuBar.js. On the CSS Styles panel, my SpryMenuBarHorizontal.CSS list reads as follows:
I also have a hunch that something about this line-up is also incorrect, but I don't exactly know what the problem is.
Here is what my coding for my SpryMenuBarHorizontal.css looks like right now:
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
text-align: center;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 8em;
float: left;
left: 10;
top: 10;
height: 10;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 8.2em;
position: absolute;
left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 8.2em;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
left: auto;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border: 1px solid #CCC;
text-align: left;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #000;
padding: 0.5em 0.75em;
color: #FFF;
text-decoration: none;
font-family: Futura;
float: none;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
background-color: #C00;
color: #FFF;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
background-color: #C00;
color: #FFF;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
text-align: center;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarHorizontal li.MenuBarItemIE
display: block;
f\loat: left;
background: #FFF;
And here is what my SpryMenuBar.js coding looks like right now too:
SpryMenuBar.js
This file handles the JavaScript for Spry Menu Bar. You should have no need
to edit this file. Some highlights of the MenuBar object is that timers are
used to keep submenus from showing up until the user has hovered over the parent
menu item for some time, as well as a timer for when they leave a submenu to keep
showing that submenu until the timer fires.
(function() { // BeginSpryComponent
if (typeof Spry == "undefined") window.Spry = {}; if (!Spry.Widget) Spry.Widget = {};
Spry.BrowserSniff = function()
var b = navigator.appName.toString();
var up = navigator.platform.toString();
var ua = navigator.userAgent.toString();
this.mozilla = this.ie = this.opera = this.safari = false;
var re_opera = /Opera.([0-9\.]*)/i;
var re_msie = /MSIE.([0-9\.]*)/i;
var re_gecko = /gecko/i;
var re_safari = /(applewebkit|safari)\/([\d\.]*)/i;
var r = false;
if ( (r = ua.match(re_opera))) {
this.opera = true;
this.version = parseFloat(r[1]);
} else if ( (r = ua.match(re_msie))) {
this.ie = true;
this.version = parseFloat(r[1]);
} else if ( (r = ua.match(re_safari))) {
this.safari = true;
this.version = parseFloat(r[2]);
} else if (ua.match(re_gecko)) {
var re_gecko_version = /rv:\s*([0-9\.]+)/i;
r = ua.match(re_gecko_version);
this.mozilla = true;
this.version = parseFloat(r[1]);
this.windows = this.mac = this.linux = false;
this.Platform = ua.match(/windows/i) ? "windows" :
(ua.match(/linux/i) ? "linux" :
(ua.match(/mac/i) ? "mac" :
ua.match(/unix/i)? "unix" : "unknown"));
this[this.Platform] = true;
this.v = this.version;
if (this.safari && this.mac && this.mozilla) {
this.mozilla = false;
Spry.is = new Spry.BrowserSniff();
// Constructor for Menu Bar
// element should be an ID of an unordered list (<ul> tag)
// preloadImage1 and preloadImage2 are images for the rollover state of a menu
Spry.Widget.MenuBar = function(element, opts)
this.init(element, opts);
Spry.Widget.MenuBar.prototype.init = function(element, opts)
this.element = this.getElement(element);
// represents the current (sub)menu we are operating on
this.currMenu = null;
this.showDelay = 250;
this.hideDelay = 600;
if(typeof document.getElementById == 'undefined' || (navigator.vendor == 'Apple Computer, Inc.' && typeof window.XMLHttpRequest == 'undefined') || (Spry.is.ie && typeof document.uniqueID == 'undefined'))
// bail on older unsupported browsers
return;
// Fix IE6 CSS images flicker
if (Spry.is.ie && Spry.is.version < 7){
try {
document.execCommand("BackgroundImageCache", false, true);
} catch(err) {}
this.upKeyCode = Spry.Widget.MenuBar.KEY_UP;
this.downKeyCode = Spry.Widget.MenuBar.KEY_DOWN;
this.leftKeyCode = Spry.Widget.MenuBar.KEY_LEFT;
this.rightKeyCode = Spry.Widget.MenuBar.KEY_RIGHT;
this.escKeyCode = Spry.Widget.MenuBar.KEY_ESC;
this.hoverClass = 'MenuBarItemHover';
this.subHoverClass = 'MenuBarItemSubmenuHover';
this.subVisibleClass ='MenuBarSubmenuVisible';
this.hasSubClass = 'MenuBarItemSubmenu';
this.activeClass = 'MenuBarActive';
this.isieClass = 'MenuBarItemIE';
this.verticalClass = 'MenuBarVertical';
this.horizontalClass = 'MenuBarHorizontal';
this.enableKeyboardNavigation = true;
this.hasFocus = false;
// load hover images now
if(opts)
for(var k in opts)
if (typeof this[k] == 'undefined')
var rollover = new Image;
rollover.src = opts[k];
Spry.Widget.MenuBar.setOptions(this, opts);
// safari doesn't support tabindex
if (Spry.is.safari)
this.enableKeyboardNavigation = false;
if(this.element)
this.currMenu = this.element;
var items = this.element.getElementsByTagName('li');
for(var i=0; i<items.length; i++)
if (i > 0 && this.enableKeyboardNavigation)
items[i].getElementsByTagName('a')[0].tabIndex='-1';
this.initialize(items[i], element);
if(Spry.is.ie)
this.addClassName(items[i], this.isieClass);
items[i].style.position = "static";
if (this.enableKeyboardNavigation)
var self = this;
this.addEventListener(document, 'keydown', function(e){self.keyDown(e); }, false);
if(Spry.is.ie)
if(this.hasClassName(this.element, this.verticalClass))
this.element.style.position = "relative";
var linkitems = this.element.getElementsByTagName('a');
for(var i=0; i<linkitems.length; i++)
linkitems[i].style.position = "relative";
Spry.Widget.MenuBar.KEY_ESC = 27;
Spry.Widget.MenuBar.KEY_UP = 38;
Spry.Widget.MenuBar.KEY_DOWN = 40;
Spry.Widget.MenuBar.KEY_LEFT = 37;
Spry.Widget.MenuBar.KEY_RIGHT = 39;
Spry.Widget.MenuBar.prototype.getElement = function(ele)
if (ele && typeof ele == "string")
return document.getElementById(ele);
return ele;
Spry.Widget.MenuBar.prototype.hasClassName = function(ele, className)
if (!ele || !className || !ele.className || ele.className.search(new RegExp("\\b" + className + "\\b")) == -1)
return false;
return true;
Spry.Widget.MenuBar.prototype.addClassName = function(ele, className)
if (!ele || !className || this.hasClassName(ele, className))
return;
ele.className += (ele.className ? " " : "") + className;
Spry.Widget.MenuBar.prototype.removeClassName = function(ele, className)
if (!ele || !className || !this.hasClassName(ele, className))
return;
ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
// addEventListener for Menu Bar
// attach an event to a tag without creating obtrusive HTML code
Spry.Widget.MenuBar.prototype.addEventListener = function(element, eventType, handler, capture)
try
if (element.addEventListener)
element.addEventListener(eventType, handler, capture);
else if (element.attachEvent)
element.attachEvent('on' + eventType, handler);
catch (e) {}
// createIframeLayer for Menu Bar
// creates an IFRAME underneath a menu so that it will show above form controls and ActiveX
Spry.Widget.MenuBar.prototype.createIframeLayer = function(menu)
var layer = document.createElement('iframe');
layer.tabIndex = '-1';
layer.src = 'javascript:""';
layer.frameBorder = '0';
layer.scrolling = 'no';
menu.parentNode.appendChild(layer);
layer.style.left = menu.offsetLeft + 'px';
layer.style.top = menu.offsetTop + 'px';
layer.style.width = menu.offsetWidth + 'px';
layer.style.height = menu.offsetHeight + 'px';
// removeIframeLayer for Menu Bar
// removes an IFRAME underneath a menu to reveal any form controls and ActiveX
Spry.Widget.MenuBar.prototype.removeIframeLayer = function(menu)
var layers = ((menu == this.element) ? menu : menu.parentNode).getElementsByTagName('iframe');
while(layers.length > 0)
layers[0].parentNode.removeChild(layers[0]);
// clearMenus for Menu Bar
// root is the top level unordered list (<ul> tag)
Spry.Widget.MenuBar.prototype.clearMenus = function(root)
var menus = root.getElementsByTagName('ul');
for(var i=0; i<menus.length; i++)
this.hideSubmenu(menus[i]);
this.removeClassName(this.element, this.activeClass);
// bubbledTextEvent for Menu Bar
// identify bubbled up text events in Safari so we can ignore them
Spry.Widget.MenuBar.prototype.bubbledTextEvent = function()
return Spry.is.safari && (event.target == event.relatedTarget.parentNode || (event.eventPhase == 3 && event.target.parentNode == event.relatedTarget));
// showSubmenu for Menu Bar
// set the proper CSS class on this menu to show it
Spry.Widget.MenuBar.prototype.showSubmenu = function(menu)
if(this.currMenu)
this.clearMenus(this.currMenu);
this.currMenu = null;
if(menu)
this.addClassName(menu, this.subVisibleClass);
if(typeof document.all != 'undefined' && !Spry.is.opera && navigator.vendor != 'KDE')
if(!this.hasClassName(this.element, this.horizontalClass) || menu.parentNode.parentNode != this.element)
menu.style.top = menu.parentNode.offsetTop + 'px';
if(Spry.is.ie && Spry.is.version < 7)
this.createIframeLayer(menu);
this.addClassName(this.element, this.activeClass);
// hideSubmenu for Menu Bar
// remove the proper CSS class on this menu to hide it
Spry.Widget.MenuBar.prototype.hideSubmenu = function(menu)
if(menu)
this.removeClassName(menu, this.subVisibleClass);
if(typeof document.all != 'undefined' && !Spry.is.opera && navigator.vendor != 'KDE')
menu.style.top = '';
menu.style.left = '';
if(Spry.is.ie && Spry.is.version < 7)
this.removeIframeLayer(menu);
// initialize for Menu Bar
// create event listeners for the Menu Bar widget so we can properly
// show and hide submenus
Spry.Widget.MenuBar.prototype.initialize = function(listitem, element)
var opentime, closetime;
var link = listitem.getElementsByTagName('a')[0];
var submenus = listitem.getElementsByTagName('ul');
var menu = (submenus.length > 0 ? submenus[0] : null);
if(menu)
this.addClassName(link, this.hasSubClass);
if(!Spry.is.ie)
// define a simple function that comes standard in IE to determine
// if a node is within another node
listitem.contains = function(testNode)
// this refers to the list item
if(testNode == null)
return false;
if(testNode == this)
return true;
else
return this.contains(testNode.parentNode);
// need to save this for scope further down
var self = this;
this.addEventListener(listitem, 'mouseover', function(e){self.mouseOver(listitem, e);}, false);
this.addEventListener(listitem, 'mouseout', function(e){if (self.enableKeyboardNavigation) self.clearSelection(); self.mouseOut(listitem, e);}, false);
if (this.enableKeyboardNavigation)
this.addEventListener(link, 'blur', function(e){self.onBlur(listitem);}, false);
this.addEventListener(link, 'focus', function(e){self.keyFocus(listitem, e);}, false);
Spry.Widget.MenuBar.prototype.keyFocus = function (listitem, e)
this.lastOpen = listitem.getElementsByTagName('a')[0];
this.addClassName(this.lastOpen, listitem.getElementsByTagName('ul').length > 0 ? this.subHoverClass : this.hoverClass);
this.hasFocus = true;
Spry.Widget.MenuBar.prototype.onBlur = function (listitem)
this.clearSelection(listitem);
Spry.Widget.MenuBar.prototype.clearSelection = function(el){
//search any intersection with the current open element
if (!this.lastOpen)
return;
if (el)
el = el.getElementsByTagName('a')[0];
// check children
var item = this.lastOpen;
while (item != this.element)
var tmp = el;
while (tmp != this.element)
if (tmp == item)
return;
try{
tmp = tmp.parentNode;
}catch(err){break;}
item = item.parentNode;
var item = this.lastOpen;
while (item != this.element)
this.hideSubmenu(item.parentNode);
var link = item.getElementsByTagName('a')[0];
this.removeClassName(link, this.hoverClass);
this.removeClassName(link, this.subHoverClass);
item = item.parentNode;
this.lastOpen = false;
Spry.Widget.MenuBar.prototype.keyDown = function (e)
if (!this.hasFocus)
return;
if (!this.lastOpen)
this.hasFocus = false;
return;
var e = e|| event;
var listitem = this.lastOpen.parentNode;
var link = this.lastOpen;
var submenus = listitem.getElementsByTagName('ul');
var menu = (submenus.length > 0 ? submenus[0] : null);
var hasSubMenu = (menu) ? true : false;
var opts = [listitem, menu, null, this.getSibling(listitem, 'previousSibling'), this.getSibling(listitem, 'nextSibling')];
if (!opts[3])
opts[2] = (listitem.parentNode.parentNode.nodeName.toLowerCase() == 'li')?listitem.parentNode.parentNode:null;
var found = 0;
switch (e.keyCode){
case this.upKeyCode:
found = this.getElementForKey(opts, 'y', 1);
break;
case this.downKeyCode:
found = this.getElementForKey(opts, 'y', -1);
break;
case this.leftKeyCode:
found = this.getElementForKey(opts, 'x', 1);
break;
case this.rightKeyCode:
found = this.getElementForKey(opts, 'x', -1);
break;
case this.escKeyCode:
case 9:
this.clearSelection();
this.hasFocus = false;
default: return;
switch (found)
case 0: return;
case 1:
//subopts
this.mouseOver(listitem, e);
break;
case 2:
//parent
this.mouseOut(opts[2], e);
break;
case 3:
case 4:
// left - right
this.removeClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
break;
var link = opts[found].getElementsByTagName('a')[0];
if (opts[found].nodeName.toLowerCase() == 'ul')
opts[found] = opts[found].getElementsByTagName('li')[0];
this.addClassName(link, opts[found].getElementsByTagName('ul').length > 0 ? this.subHoverClass : this.hoverClass);
this.lastOpen = link;
opts[found].getElementsByTagName('a')[0].focus();
//stop further event handling by the browser
return Spry.Widget.MenuBar.stopPropagation(e);
Spry.Widget.MenuBar.prototype.mouseOver = function (listitem, e)
var link = listitem.getElementsByTagName('a')[0];
var submenus = listitem.getElementsByTagName('ul');
var menu = (submenus.length > 0 ? submenus[0] : null);
var hasSubMenu = (menu) ? true : false;
if (this.enableKeyboardNavigation)
this.clearSelection(listitem);
if(this.bubbledTextEvent())
// ignore bubbled text events
return;
if (listitem.closetime)
clearTimeout(listitem.closetime);
if(this.currMenu == listitem)
this.currMenu = null;
// move the focus too
if (this.hasFocus)
link.focus();
// show menu highlighting
this.addClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
this.lastOpen = link;
if(menu && !this.hasClassName(menu, this.subHoverClass))
var self = this;
listitem.opentime = window.setTimeout(function(){self.showSubmenu(menu);}, this.showDelay);
Spry.Widget.MenuBar.prototype.mouseOut = function (listitem, e)
var link = listitem.getElementsByTagName('a')[0];
var submenus = listitem.getElementsByTagName('ul');
var menu = (submenus.length > 0 ? submenus[0] : null);
var hasSubMenu = (menu) ? true : false;
if(this.bubbledTextEvent())
// ignore bubbled text events
return;
var related = (typeof e.relatedTarget != 'undefined' ? e.relatedTarget : e.toElement);
if(!listitem.contains(related))
if (listitem.opentime)
clearTimeout(listitem.opentime);
this.currMenu = listitem;
// remove menu highlighting
this.removeClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
if(menu)
var self = this;
listitem.closetime = window.setTimeout(function(){self.hideSubmenu(menu);}, this.hideDelay);
if (this.hasFocus)
link.blur();
Spry.Widget.MenuBar.prototype.getSibling = function(element, sibling)
var child = element[sibling];
while (child && child.nodeName.toLowerCase() !='li')
child = child[sibling];
return child;
Spry.Widget.MenuBar.prototype.getElementForKey = function(els, prop, dir)
var found = 0;
var rect = Spry.Widget.MenuBar.getPosition;
var ref = rect(els[found]);
var hideSubmenu = false;
//make the subelement visible to compute the position
if (els[1] && !this.hasClassName(els[1], this.MenuBarSubmenuVisible))
els[1].style.visibility = 'hidden';
this.showSubmenu(els[1]);
hideSubmenu = true;
var isVert = this.hasClassName(this.element, this.verticalClass);
var hasParent = els[0].parentNode.parentNode.nodeName.toLowerCase() == 'li' ? true : false;
for (var i = 1; i < els.length; i++){
//when navigating on the y axis in vertical menus, ignore children and parents
if(prop=='y' && isVert && (i==1 || i==2))
continue;
//when navigationg on the x axis in the FIRST LEVEL of horizontal menus, ignore children and parents
if(prop=='x' && !isVert && !hasParent && (i==1 || i==2))
continue;
if (els[i])
var tmp = rect(els[i]);
if ( (dir * tmp[prop]) < (dir * ref[prop]))
ref = tmp;
found = i;
// hide back the submenu
if (els[1] && hideSubmenu){
this.hideSubmenu(els[1]);
els[1].style.visibility = '';
return found;
Spry.Widget.MenuBar.camelize = function(str)
if (str.indexOf('-') == -1){
return str;
var oStringList = str.split('-');
var isFirstEntry = true;
var camelizedString = '';
for(var i=0; i < oStringList.length; i++)
if(oStringList[i].length>0)
if(isFirstEntry)
camelizedString = oStringList[i];
isFirstEntry = false;
else
var s = oStringList[i];
camelizedString += s.charAt(0).toUpperCase() + s.substring(1);
return camelizedString;
Spry.Widget.MenuBar.getStyleProp = function(element, prop)
var value;
try
if (element.style)
value = element.style[Spry.Widget.MenuBar.camelize(prop)];
if (!value)
if (document.defaultView && document.defaultView.getComputedStyle)
var css = document.defaultView.getComputedStyle(element, null);
value = css ? css.getPropertyValue(prop) : null;
else if (element.currentStyle)
value = element.currentStyle[Spry.Widget.MenuBar.camelize(prop)];
catch (e) {}
return value == 'auto' ? null : value;
Spry.Widget.MenuBar.getIntProp = function(element, prop)
var a = parseInt(Spry.Widget.MenuBar.getStyleProp(element, prop),10);
if (isNaN(a))
return 0;
return a;
Spry.Widget.MenuBar.getPosition = function(el, doc)
doc = doc || document;
if (typeof(el) == 'string') {
el = doc.getElementById(el);
if (!el) {
return false;
if (el.parentNode === null || Spry.Widget.MenuBar.getStyleProp(el, 'display') == 'none') {
//element must be visible to have a box
return false;
var ret = {x:0, y:0};
var parent = null;
var box;
if (el.getBoundingClientRect) { // IE
box = el.getBoundingClientRect();
var scrollTop = doc.documentElement.scrollTop || doc.body.scrollTop;
var scrollLeft = doc.documentElement.scrollLeft || doc.body.scrollLeft;
ret.x = box.left + scrollLeft;
ret.y = box.top + scrollTop;
} else if (doc.getBoxObjectFor) { // gecko
box = doc.getBoxObjectFor(el);
ret.x = box.x;
ret.y = box.y;
} else { // safari/opera
ret.x = el.offsetLeft;
ret.y = el.offsetTop;
parent = el.offsetParent;
if (parent != el) {
while (parent) {
ret.x += parent.offsetLeft;
ret.y += parent.offsetTop;
parent = parent.offsetParent;
// opera & (safari absolute) incorrectly account for body offsetTop
if (Spry.is.opera || Spry.is.safari && Spry.Widget.MenuBar.getStyleProp(el, 'position') == 'absolute')
ret.y -= doc.body.offsetTop;
if (el.parentNode)
parent = el.parentNode;
else
parent = null;
if (parent.nodeName){
var cas = parent.nodeName.toUpperCase();
while (parent && cas != 'BODY' && cas != 'HTML') {
cas = parent.nodeName.toUpperCase();
ret.x -= parent.scrollLeft;
ret.y -= parent.scrollTop;
if (parent.parentNode)
parent = parent.parentNode;
else
parent = null;
return ret;
Spry.Widget.MenuBar.stopPropagation = function(ev)
if (ev.stopPropagation)
ev.stopPropagation();
else
ev.cancelBubble = true;
if (ev.preventDefault)
ev.preventDefault();
else
ev.returnValue = false;
Spry.Widget.MenuBar.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
if (!optionsObj)
return;
for (var optionName in optionsObj)
if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
continue;
obj[optionName] = optionsObj[optionName];
})(); // EndSpryComponent
If anyone could possibly steer me on the right direction with this, I'd be very grateful! I've been struggling with this for about a month now and I feel like I may have only made the situation worse.
I'm not sure if I have to keep making a new spry assets folder in my website or not or if I have to drag and drop the spry assets into the root folder. I have restarted my website over at least a dozen times by now. I have tried changing folders, dragging and dropping various spry assets folders everywhere and I have also uninstalled and reinstalled my copy of Dreamweaver CS5 in the hopes of getting my spry horizontal menu bar to act normal. I am completely new at Dreamweaver and I really, really need some help with this.
Thanks!I haven't been able to get my site posted up yet. Here is a link to it anyway:andrearosales.com
I will be working on connecting my files up to my server. At the moment, here are some screen shots of some messages that I am getting when I am saving my file.
I'm not sure what to make of these messages. I tried to put a new spry horizontal menu bar on my main page, and when it appeared, it displayed as a spry vertical menu bar.
Here is a picture of what it looks like:
I"m going to refer to the links that were suggested to me though. I'm not sure if pictures of the code will help to solve my problem. I'm going to try again to connect my files to my server though. -
My verticle Spry menu will not work in Internet Explorer
I know a lot of people have posted about similar issues, and I've researched multiple "solutions" on multiple forums for something that will work, but nothing has solved the problem so far.
Here is a link to the prototype homepage: http://www.abrasivesales.com/indexnew.html
Everything looks great on my mac when opened in Firefox or Safari, however when opened on Internet Explorer on a PC, the menu ceases to be verticle, instead extending horizontally past the end of the screen. Also, the menu items adopt a white background color, and none of the submenu items will appear when their parent menu item is rolled over.
PLEASE HELP....this issue has kept me from launching the site for a week now, and my superiors are wondering why this problem is taking me longer than it did to build the homepage in the first place, so I'd love to look like less of an idiot.
I assuming this is a CSS issue, so I've posted my CSS code below:
@charset "UTF-8";
/* SpryMenuBarVertical.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, a fixed width box with no margin or padding */
ul.MenuBarVertical
margin: 0;
padding: ;
list-style-type: none;
font-size: 12px;
cursor: default;
font-weight: bold;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
left: 0px;
top: 0px;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this container and are same fixed width as parent */
ul.MenuBarVertical li
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 150px;
margin: 0;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarVertical ul
margin: 0 0 0 100%;
padding: 0;
list-style-type: none;
font-size: 100%;
position: absolute;
z-index: 1020;
cursor: default;
left: -1000em;
top: 0;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarVertical ul.MenuBarSubmenuVisible
left: 0;
width: 165px;
/* Menu item containers are same fixed width as parent */
ul.MenuBarVertical ul li
width: auto;
#masterContainer #container #sidebar #sideNav2 li ul li {
top: -400px;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Outermost menu container has borders on all sides */
ul.MenuBarVertical
border: 0
/* Submenu containers have borders on all sides */
ul.MenuBarVertical ul
border: 0
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarVertical a
display: block;
cursor: pointer;
padding: 2px 3px;
color: #333;
text-decoration: none;
font-family: "Comic Sans MS", cursive;
font-size: 13.5px;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
background-color: #33C;
color: #FFF;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
background-color: #1A6AF4;
color: #FFF;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenu
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarVertical iframe
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarVertical li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF;
#masterContainer #container #sidebar #sideNav2 {
#masterContainer #container #sidebar li ul li {
background-color: #F4EC9A;
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarVertical li.MenuBarItemIE
display: inline;
float: left;I solved one of my own problems. It turns out I still had a setting for width set to "auto" instead of a pixel amount. So now my menu displays normally and my submenus are no longer invisible.
One one tab, "Products", I set the top at -430px, which internet explorer seems to ignore. I'm so close! I'll search for the answer but any help is greatly appreciated.
Maybe you are looking for
-
Dear Gurus, VA05 will display list of open sale orders. If I am not wrong, VA05 might be using some info-structures to update the same. I want to know which info structure is used to updated this. For a particular customer, VA05 doesn't display open
-
How do I get my iPhoto 4 images and albums into iPhoto5?
Thought for sure I would find a FAQ listing for this but can't find it anywhere. I copied all my albums and images from CD back up into iPhoto5. But when I log out and log in and open iPhoto5 none of my old images and albums are there. I do see impor
-
PDF files opening in Quicktime 7.1.3
Since the upgrade to QT 7.1.3, I get the infamous Quicktime question mark on websites that have Quicktime content playing in the background and when I attempt to download PDF files, the system insists on opening them in QT...is anyone experiencing th
-
External Authentication in OAM 11g
Hi All, I need to implement External Authentication (Entrust TruePass) integrate with Oracle Access Manager. Entrust Truepass is always create base64 encrypted HTTP header. Now how can we decrypt the base64 encrypted HTTP Header and read the user DN
-
My homepage keeps changing without my permission, it changes often which worries me.
Every now and then my homepage changes to first something along the lines that Safe Search is on.. and now it changed to seek.mk, this worries me as I do not feel I have any viruses. I'm asking why it does that and if I should be worried.