Skip navigation
Currently Being Moderated

Spry menu bar changed since I tried to split cells in a table! Help!

Sep 12, 2012 7:22 PM

Tags: #spry #menu #bar #problems #cells #splitting

I am VERY new to web design, so I apologize in advance for being ignorant.  I am trying to learn!

I had inserted a spry menu bar that looked fine and even tested fine!

I subsequently tried to split a section of my table in the web page in order to have 3 columns of centered text.  The first time I did this, the spry menu bar became vertical even though it is listed as horizontal.  I looked up a forum answer, copied the code from the suggestion, and that seemed to fix the problem (although I still don't know what EXACTLY happened)

I tried to split the table again (I had undone everything prior to this), only this time, the spry menu bar is located outside the page in the left hand corner where my background (I have a wrapper) is.  I tried opening another page where I already had a nice spry menu bar, and it did the same thing!! This makes me think it is the CSS sheet for the menu bar that was modified somehow when I split the table.  I'm pasting the CSS here below, so if anyone sees any issues that might cause this problem, please let me know!! I have been working for the most part in design view, and haven't really modified the code other than to put a wrapper in and a facebook like button, which I've now lost in the slitting cells catastrophe.  Thanks in advance!!!

 

 

@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-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding: 0;
list-style-type: none;
font-size: 12pt;
cursor: default;
width: 60%;
float: left;
}
/* 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: 12pt;
position: relative;
text-align: left;
cursor: pointer;
width: auto;
float: left;
background-color: #99CC66;
}
/* 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: auto;
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: auto;
}
/* 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;
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
display: block;
cursor: pointer;
background-color: #99CC66;
padding: 0.5em 0.75em;
color: #333;
text-decoration: 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: #336600;
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: #33C;
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%;
}
/* 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;
}
/* 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;
}
}

 
Replies
  • Currently Being Moderated
    Sep 13, 2012 6:24 AM   in reply to lbbaiamonte1011

    Welxome -

     

    Seeing your CSS is no help with seeing what's wrong with your table structure which is HTML code..

     

    If you want assistance quickly and accurately, please upload you test files to your webspace and post a link for us.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 13, 2012 6:59 AM   in reply to lbbaiamonte1011

    lbbaiamonte1011 wrote:

     

    {
      display: inline;
      f\loat: left;
      background: #FFF;
    }
    }

     

    If the CSS you posted is copied and pasted from the actual file, the \ in the word "float" above will definitely cause layout issues.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 13, 2012 8:15 AM   in reply to Jon Fritz II

    Jon Fritz II wrote:

     

    If the CSS you posted is copied and pasted from the actual file, the \ in the word "float" above will definitely cause layout issues.

     

    No, it won't. It's a  hack for a specific version of Internet Explorer, as explained in the comment immediately above that part of the style sheet.

     

    Moreover, the selector for that rule looks like this: ul.MenuBarHorizontal li.MenuBarItemIE. Notice the class name (.MenuBarItemIE). It's added dynamically by the Spry JavaScript to Internet Explorer only.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 13, 2012 8:37 AM   in reply to David_Powers

    David_Powers wrote:

     

    Jon Fritz II wrote:

     

    If the CSS you posted is copied and pasted from the actual file, the \ in the word "float" above will definitely cause layout issues.

     

    No, it won't. It's a  hack for a specific version of Internet Explorer, as explained in the comment immediately above that part of the style sheet.

     

    Moreover, the selector for that rule looks like this: ul.MenuBarHorizontal li.MenuBarItemIE. Notice the class name (.MenuBarItemIE). It's added dynamically by the Spry JavaScript to Internet Explorer only.

     

    BAH!

     

    I think I'm going to stop trying to help until after my coffee.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 13, 2012 9:11 AM   in reply to Jon Fritz II

    Jon Fritz II wrote:

     

    I think I'm going to stop trying to help until after my coffee.

    Make one for me while you're at it. White, no sugar, please.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 13, 2012 10:23 AM   in reply to lbbaiamonte1011

    Thanks -

     

    What is your specifix problem?

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 13, 2012 1:18 PM   in reply to lbbaiamonte1011

    Don't use tables for layouts.  Tables are for presenting tabular data only.   Modern web is all about CSS layouts which are efficient and easy to change later if you decide to re-style your site.

     

    DW comes with several pre-built CSS layouts you can use right away.

     

    Go to File > New > Blank > HTML page > Layout.  Select 3-column, fixed with header & footer.

     

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 13, 2012 1:53 PM   in reply to lbbaiamonte1011

    I actually was working off of a template from Dreamweaver!

    Must be a very old version of DW.  Table layouts haven't appeared in DW for several years.

     

    So, do I need to start over?

    Highly recommended, yes.  You can get CSS Layouts below:

    http://www.adobe.com/devnet/dreamweaver/articles/introducing_new_css_l ayouts.html

     

     

    Nancy O.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points