Spry menu bar and collapsible panels
by Sinead Egan
on
Mar 11, 2009 at 4:40:22 pm
Hey,
Totally new to web design, however I have developed a page which works perfect in Mozilla, Chrome, Safari...but not internet explorer. I believe this is quiet common but don't have a clue where to start with fixing it...
Any help? Thanks
Re: Spry menu bar and collapsible panels by Richard Williams on Mar 12, 2009 at 4:44:49 pm
you have made MANY MANY changes to the sprymenubarhorizontal and verticel css which are all playing havoc with your layout in IE. Mt advice is to reset your spry assets folder by clicking on site, spry updater, update menubars as there are too many things here to list whats gone wrong, it would be better to start over.
Re: Spry menu bar and collapsible panels by Sinead Egan on Mar 12, 2009 at 4:52:01 pm
Ok, start over the entire site or just with the spry horizontal and vertical css?? Will this include having to redo all my links etc? do i reset these in my dwt? Sorry aobut all the questions.....
Thanks
Re: Spry menu bar and collapsible panels by Richard Williams on Mar 12, 2009 at 8:14:21 pm
no.. just update your folder the way i said and it will all work fine, but the colours in the srpy will return to grey and blue. Nothing else on your page will need editing or links changing
Re: Spry menu bar and collapsible panels by Sinead Egan on Mar 12, 2009 at 11:15:32 pm
Richard thanks for all your help and really sorry to be sounding so stupid but how do you reset the spry css? Can't figure it out...under site on the main toolbar on Adobe Dreamweaver CS3 the options I am given are:new site, manage site, locate site, reports, check site wide and adcanced options....
Do you mean in the file tool bar to the right??? Sorry now i really am a beginner!!
Re: Spry menu bar and collapsible panels by Sinead Egan on Mar 15, 2009 at 1:34:56 pm
Just done that and now everything has gone totally out of sync, vertical menu bar in the centre of screen, this is the css for the vertical now: @charset "UTF-8";
/* SpryMenuBarVertical.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/* The outermost container of the Menu Bar, a fixed width box with no margin or padding */
ul.MenuBarVertical
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: 8em;
}
/* 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
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 8em;
}
/* 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: -5% 0 0 95%;
padding: 0;
list-style-type: none;
font-size: 100%;
position: absolute;
z-index: 1020;
cursor: default;
width: 8.2em;
left: auto;
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;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarVertical ul li
{
width: 8.2em;
}
/* Outermost menu container has borders on all sides */
ul.MenuBarVertical
{
border: 1px solid #CCC;
}
/* Submenu containers have borders on all sides */
ul.MenuBarVertical ul
{
border: 1px solid #CCC;
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarVertical a
{
display: block;
cursor: pointer;
background-color: #EEE;
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.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: #33C;
color: #FFF;
}
/* 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%;
}
/* 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;
float: left;
background: #FFF;
}
}
Don't want to mess with it too much incase i distort it again, but how will i get the menu bar to the left of sceen?
Thanks again for all your help...
