Help with a Spry Menu Bar
I'm having trouble with a Spry Menu Bar not displaying
correctly in Internet Explorer, while it displays fine in every
other browser I have available. I've done some searching on these
boards, but the queries I've found with the same type of problem
each has a knowledgeable person editing the code for the
poster...and I can't seem to make heads or tails of it.
So, below is my link. What you'll see if viewed in Explorer
is that the "Clinics" listing and the "Services & Specialties"
listing are each on the same horizontal line, rather than vertical
like the rest of the menu. If anyone can help me in correcting this
problem, I'd be very appreciative.
Thanks in advance.
http://www.chambershospital.com/temp/about.html
Hello,
You might try removing all of the <div> tags you
inserted in the menu.
This can happen if you select text in design view and use the
"align" icons
in the properties window instead of using CSS to align
things.
For example:
<li>
<div align="left"><<****REMOVE THIS
<a href="clinics.html"
class="MenuBarItemSubmenu">Clinics</a>
<ul>
<li><a href="clinic.html">Chambers
Clinic</a></li>
<li><a href="clinic7.html">Scenic 7
Clinic</a></li>
</ul>
</div><<*** REMOVE THIS
</li>
So it looks like this:
<li><a href="clinics.html"
class="MenuBarItemSubmenu">Clinics</a>
<ul>
<li><a href="clinic.html">Chambers
Clinic</a></li>
<li><a href="clinic7.html">Scenic 7
Clinic</a></li>
</ul>
</li>
Repeat for all the other <div align="left"> and
</div> tags in the menu.
Take care,
Tim
"Zim74" <[email protected]> wrote in message
news:fv4vc0$r0t$[email protected]..
> I'm having trouble with a Spry Menu Bar not displaying
correctly in
> Internet
> Explorer, while it displays fine in every other browser
I have available.
> I've
> done some searching on these boards, but the queries
I've found with the
> same
> type of problem each has a knowledgeable person editing
the code for the
> poster...and I can't seem to make heads or tails of it.
>
> So, below is my link. What you'll see if viewed in
Explorer is that the
> "Clinics" listing and the "Services & Specialties"
listing are each on the
> same
> horizontal line, rather than vertical like the rest of
the menu. If
> anyone can
> help me in correcting this problem, I'd be very
appreciative.
>
> Thanks in advance.
>
>
http://www.chambershospital.com/temp/about.html
>
>
Similar Messages
-
Help with vertical spry menu bar submenu displaying incorrectly!
I’m new to Dreamweaver and am learning as I go. I am having a problem with the vertical spry menu bar submenu in the Live View. When I scroll over the spry menu bar option that has a submenu, the submenu appears in the upper right hand corner of my screen. (My menu bar is going down the left hand side.) However, when I preview it in Internet Explorer it looks fine after I allow the Java Script to run or the Active X controls, which my browser usually automatically blocks. (The browser just displays a small message along the top and I click on it to allow it.) To get it to do this much, I had to play around with the CSS for the spry menu bar a little bit.
Before, when I clicked on the Live View option, a small message ran along the top in Dreamweaver saying it couldn’t find the Flash Plugin and asked me to download the most recent FlashPlayer, which I did twice. It continued to say that and then I just closed that message that kept popping up, but I think that has something to do with the problem. I then researched that problem in the Spry Framework Help and Dreamweaver Help, but couldn’t find a solution that worked. (Someone had posted a link for downloading the Flash Player for Netscape Navigator, but that didn’t seem to do anything.)
Please also note that I am using one of Dreamweaver’s pre-built layouts. I don’t know if that makes a difference with this problem.
How do I fix this problem so that it displays correctly in the LiveView? And will the message that I get on my browser about allowing blocked content appear on other people’s computer when they open my website?IE is a big problem child among browsers. Don't use it as your default browser.
For best results, build your site to display & perform well in the web standards browsers like Firefox, Chrome, Safari & Opera. If it works in one, it should work pretty much the same in all of them.
After you're satisfied with how your site looks in the good browsers, then test in IE. If needed, add hacks or conditional comments to make IE behave. There are many web sites that discuss known bugs in IE and how to work around them.
Lastly, the active X nag screens only appear locally. Once deployed on the remote server, you won't see them.
For better answers to your layout questions, we need to see your page. Can you post a URL?
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb -
***I need help with my SPRY MENU BAR***
Hi everyone,
I have installed a Horizontal and Vertical Spry Menu Bar.
It looks great, but I can not figure this out.
When I click on any of the links on the bars,
my text jumps to the righ
Can someone please tell me how I can make
the text to stop jumping.
My test page is located at the link below:
http://www.tonyasdynamicdesigns.com/gregs-pages/index.html
Thank you so much for your help,
TonyaI know that the problem is in my main-css.css because
when I deleted this css code, the text jumping stopped.
I can not figure out how to fix my main-css.css style.
Can you please help me?
Below is part of my css code
that is causing the problem.
body {
background-color: #000000;
background-repeat: repeat;
background-image: url(.../gregs-images/bg.jpg);
background-position: center;
background-attachment: fixed;
#container {
width: 965px;
fixed-width: 965px;
background-color: #1f1f1f;
margin-right: auto;
margin-left: auto;
font-size: 12px;
color: #afafaf;
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
text-decoration: none;
border: 2px solid #1f1f1f;
margin-bottom: 30px;
margin-top: 30px;
background-image: url();
background-repeat: repeat;
#shadow {
width: 968px;
background-image: url(.../images/vertical-website-background-shadow.png);
background-repeat: repeat-y;
margin-right: auto;
margin-left: auto;
#bottomShadow {
margin-right: auto;
margin-left: auto;
width: 968px;
background-repeat: no-repeat;
background-image: url(.../images/bottom-website-background-shadow.png);
height: 54px;
#header {
height: 272px;
background-image: url(../gregs-images/smokehouse-studios-banner.png);
width: 965px;
#footer {
height: 381px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
clear: both;
#navigation {
width: 900px;
fixed-width: 900px;
background-color: #1f1f1f;
display: in-line;
position: fixed;
overflow: hidden;
#content {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #afafaf;
background-repeat: repeat;
background-image: url(.../gregs-images/grey-gradient-bg.png);
background-color: #1f1f1f;
text-align: left;
width: 965px; -
Dreamweaver Help | Working with the Spry Menu Bar widget
This question was posted in response to the following article: http://helpx.adobe.com/dreamweaver/using/spry-menu-bar-widget.html
Adobe has discontinued further Spry development.
http://blogs.adobe.com/dreamweaver/2012/08/update-on-adobe-spry-framework-availability.htm l
You can continue using Spry but if mobile & tablets are your concern, I would use a different menu system.
Project Seven's Commercial Extensions:
http://www.projectseven.com/products/templates/pagepacks/adaptations/index.htm
http://www.projectseven.com/products/menusystems/index.htm
Or roll your own with jQuery plug-ins:
http://webdesign.tutsplus.com/tutorials/site-elements/big-menus-small-screens-responsive-m ulti-level-navigation/
https://github.com/mattkersley/Responsive-Menu
http://speckyboy.com/2012/08/29/10-responsive-navigation-solutions-and-tutorials/
Nancy O. -
Problems with my spry menu bar, need help
i made a spry menu bar, and it works on my computers at my house and my computers at school, but on other computers the home page menu bar is in the middle of the page (not on the left side) and on the other pages the menu bar submenus dont go out to the side of that button, its hard to explain but the "designs" button has a sub menu that is supposed to go out to the side of it but it goes out to the side at the top!.. please look at it for me...?
www.branchoutadvertising.com
Lindai made a spry menu bar, and it works on my computers at my house and my computers at school, but on other computers the home page menu bar is in the middle of the page (not on the left side) and on the other pages the menu bar submenus dont go out to the side of that button, its hard to explain but the "designs" button has a sub menu that is supposed to go out to the side of it but it goes out to the side at the top!.. please look at it for me...?
www.branchoutadvertising.com
Linda -
IE problems with vertical spry menu bar
hi,
first of all: I'm aware that this problem has been discussed
before. but nothing I've found so far has really helped me.
the problem is that my vertical spry menu bar doesn't work
properly with the internet explorer. I've (clumsily) repositioned
the submenu bars, but that didn't seem to be the main problem.
I'm using dreamweaver cs3 on a mac and have checked for
safari and firefox, in which everything works fine. I'd be very
grateful if someone could have a look at
www.philipbirau.com/portfolio.htm.
unfortunatly, I have neither the skills nor the money for
'professional' webdesign, so any hint will be appreciated. if you
need more information, please let me know.
thanks!
philiphi,
first of all: I'm aware that this problem has been discussed
before. but nothing I've found so far has really helped me.
the problem is that my vertical spry menu bar doesn't work
properly with the internet explorer. I've (clumsily) repositioned
the submenu bars, but that didn't seem to be the main problem.
I'm using dreamweaver cs3 on a mac and have checked for
safari and firefox, in which everything works fine. I'd be very
grateful if someone could have a look at
www.philipbirau.com/portfolio.htm.
unfortunatly, I have neither the skills nor the money for
'professional' webdesign, so any hint will be appreciated. if you
need more information, please let me know.
thanks!
philip -
Problems with Vertical Spry menu bar in Internet Explora
Hi I'm new to Dreamweaver,
I having trouble with a new site I'm making in CS4. A problem with a vertical menu bar, in IE. Can anyone help?
1. The text is left aligned and should be centered.
2. The menu bar has moved left
3. My paragraph text has moved up the page and aligned itself to the to the menu bar.
Website address: http://www.greenwyse.co.uk/
I'm finding dreamweaver a bit clunky, reading the 'Missing Manual' but still very frustrating. Any one have any idea's/
cheers
myquirkSorry, but your CSS is has been mangled beyound recognition.
The solution is to start with an untouched style sheet. Then add or modify the CSS testing in your browsers as you make the changes.
Have a look at the following where I have positioned the menu. All that is now required is the styling for font and the hover event.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet">
<style>
body {width: 960px; margin: auto;}
.article {clear: both; margin: 20px;}
/* SPRY MENUBAR */
ul.MenuBarVertical {width: 29em; margin: auto; border: none;}
ul.MenuBarVertical li {width: 29em; text-align: center;}
ul.MenuBarVertical a {background-color: transparent;}
</style>
</head>
<body>
<h1><img src="http://www.greenwyse.co.uk/greenwyse natural products/green_wyse_logo.png" width="200" height="136" alt="Green Wyse Natural Body Care Products" longdesc="greenwyse natural products/green_wyse_natural_body_care_products.png" /></h1>
<ul id="MenuBar1" class="MenuBarVertical">
<li><a href="index.html">100% Natural</a></li>
<li><a href="greenwyse natural products/about dawn Ireland.html">Handmade</a></li>
<li><a href="greenwyse natural products/Hand-Made-Natural-Bodycare.html">Eco Friendly</a> </li>
<li><a href="greenwyse natural products/green wyse body care products.html">Luxurious Body Care</a> </li>
</ul>
<div class="article">
<p>Working through a top-down, bottom-up approach, the vitality of conceptual synergies is of supreme importance to focus on improvement, not cost. Motivating participants and capturing their expectations, through the adoption of a proactive stance, the astute manager can adopt a position at the vanguard. Building flexibility through spreading knowledge and self-organization, by moving executive focus from lag financial indicators to more actionable lead indicators, the new golden rule gives enormous power to those individuals and units.</p>
<p>Organizations capable of double-loop learning, empowerment of all personnel, not just key operatives, measure the process, not the people. In a collaborative, forward-thinking venture brought together through the merging of like minds. The balanced scorecard, like the executive dashboard, is an essential tool in order to build a shared view of what can be improved, the vitality of conceptual synergies is of supreme importance. While those at the coal face don't have sufficient view of the overall goals.</p>
</div>
<!-- I prefer to keep the JS at the bottom of my document -->
<script src="SpryAssets/SpryMenuBar.js"></script>
<script>
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
Gramps -
I posted this in the general forum, but thought I'd repost
here since this is more specific to Spry.
I'm having issues in IE (6 & 7...surprise, surprise) with
my vertical spry menu. It displays exactly the way I want it when I
use Opera. I think it has to do with the whitespace:nowrap on the
2nd level menu items, but I really don't know. I want the 2nd level
menu to be different width than the 3rd level, so I have both
levels set to auto width with nowrap.
This is how it looks in IE 7:
Menu
in IE
This is how it looks in Opera (correct):
Menu
in Opera
Attached is my CSS as well. Let me know if you need the HTML,
too.
Thank you for helping!
quote:
@charset "UTF-8";
/* SpryMenuBarVertical.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, 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: auto;
left: -1000em;
top: 0;
white-space: nowrap;
/* 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: auto;
white-space: nowrap;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* 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;
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;
/* 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;IE is a big problem child among browsers. Don't use it as your default browser.
For best results, build your site to display & perform well in the web standards browsers like Firefox, Chrome, Safari & Opera. If it works in one, it should work pretty much the same in all of them.
After you're satisfied with how your site looks in the good browsers, then test in IE. If needed, add hacks or conditional comments to make IE behave. There are many web sites that discuss known bugs in IE and how to work around them.
Lastly, the active X nag screens only appear locally. Once deployed on the remote server, you won't see them.
For better answers to your layout questions, we need to see your page. Can you post a URL?
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb -
Help with my moving menu bar in my webpage
Hello,
First of all I am completley new to webdesign and have no clue what I am doing so you will probably see me posting alot in the upcomming weeks. Im trying to create a wepbage for our youthministry at church. The webpage is www.ccifuel.com. My first question is about the navigation menu on it. It seems to move from one place to another when the web browser expands and I would like it to stay in a fixed position over the image. How do I do that? My last question is that im trying to creat a form to collect email addresses to start a newsletter in the box labeled "Join our mailing list!" but when I try to enter a spry validation text field it says, "You cannot insert this widget into an editable region..." and so on. Any idea how to make that area locked so i can insert a form there or would there be a better way to do this? thanks for all the help in advance!First of all I am completley new to webdesign and have no clue what I am doing so you will probably see me posting alot in the upcomming weeks.
In that case, you really should work your way through some tutorials first. These aren't hard and they'll give you basic skills to work with X/HTML & CSS.
Start here:
HTML & CSS Tutorials - http://w3schools.com/
My first question is about the navigation menu on it. It seems to move from one place to another when the web browser expands and I would like it to stay in a fixed position over the image.
Why do APDivs move?
http://forums.adobe.com/message/2181263#2181263
Your best course of action is to build your HTML content so that it flows naturally from top of page to bottom. Then use CSS default positioning (which is no positioning at all) along with floats, margins and padding to align elements on page.
From Tables to CSS Web Design Part 1 -
http://www.adobe.com/devnet/dreamweaver/articles/table_to_css_pt1.html
From Tables to CSS Web Design Part 2 -
http://www.adobe.com/devnet/dreamweaver/articles/table_to_css_pt2.html
Best of luck,
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com -
Menu bar not displaying inline with logo (Spry menu troubles - Extra Credit!)
Coding Brothers and Sisters!
Hope you all are well - would anyone please assist me to display inline the logo and menu bar at the following page?
http://gratefulcreative.com/Andre_Madiz/index.html
Superbonus, Adobe All-star points for help with my Spry Menu Bar, which is not showing submenus. I get an error message saying the following:
This document contains Javascript code for a widget that no longer exists. If you don't remove the code, the browser might display Javascript errors when loading the page. Would you like Dreamweaver to find all the
instances of the code for you?
Widget: var Menu Bar 1 = New.Spry.Widget.MenuBar ("MenuBar1"; {imgdown:"SpryAssets/SpryMenuBarDownHover.gif",imgRight:"SpryAssets/SpryMenuBarRightHover .gif"});
Thank you as always!
Ken D
Creative Director
Grateful Creative
www.gratefulcreative.comUse CSS floats. Posted here with inline styles for expediency. Ideally, you should set-up some re-usable classes for floats & clearing in your external style sheet.
<div style="float:left; width:250px">
<a href="http://www.andremadizmma.com"><img src="images/Bulldog_logo3.png" border="0"></a>
</div>
More on Floats:
http://css.maxdesign.com.au/floatutorial/
(='.'=)
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/ -
Hi I need help with verticle spry menu bar drop down menu. When I test locally it's working fine but when I upload the drop down menu isn't working I've spent days to fix it but couldn't can anyone help me it's driving mad!!!!!
Thanks.Hi Ken,
I hope this will help.
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
.ALLCAPITAL { font: normal 14px/normal Tahoma, Geneva, sans-serif;
text-transform: uppercase;
color: #CCC;
font-weight: bold;
.ALLCAPITAL { color: #900;
.ALLCAPITAL { font-family: Arial, Helvetica, sans-serif;
.blue1 {color: #000;
font: normal 16px/normal Tahoma, Geneva, sans-serif;
.blue1 { color: #2E1502;
font-size: 14px;
font-style: italic;
.darkblue { color: #677E98;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 14px;
.john11white { color: #FFF;
font: normal 12px/normal Tahoma, Geneva, sans-serif;
text-transform: none;
.lightblue { color: #6D7E98;
.newrule { color: #84A1C2;
text-align: justify;
font: bold normal 16px/normal Tahoma, Geneva, sans-serif;
text-transform: none;
font-size: 16px;
font-family: Tahoma, Geneva, sans-serif;
body,td,th {
font: normal 12px Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000;
.Navbarbrown2012 { font-family: Tahoma, Geneva, sans-serif;
ul.MenuBarHorizontal { margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
.SIZE16 {
font-size: 16px;
.ALLCAPITAL .john11white .lightblue .john11white .john11white .john11white {
font: normal 10px/normal Arial, Helvetica, sans-serif;
text-transform: uppercase;
color: #677E9F;
/* 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: inherit;
cursor: pointer;
width: 14em;
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: 14em;
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: 170px;
text-align: left;
/* 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;
text-align: center;
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: #000;
padding: 0.5em 0.75em;
color: #FFF;
text-decoration: none;
font-weight: normal;
text-align: inherit;
width: 14em;
/* 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: #CCC;
color: #FFF;
width: 14em;
text-align: inherit;
/* 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%;
width: 14em;
text-align: inherit;
/* 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);
ul.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f\loat: inherit;
background: #FFF;
/* 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: #999;
color: #FFF;
width: 14em;
text-align: inherit;
.whiteletterenglish {
font: normal 14px/normal Arial, Helvetica, sans-serif;
color: #FFF;
.TAHOMANEW div {
font-weight: normal;
.CENTRE {
text-align: center;
.B { color: #09F;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
font-size: 14px;
.BLACKFONT { font: bold normal 12px/normal Tahoma, Geneva, sans-serif;
text-transform: none;
color: #000;
font-weight: bold;
.BRIBOLD {color: #FFF;
font-family: Arial, Helvetica, sans-serif;
.Newwaybigletter { font: normal 18px Arial, Helvetica, sans-serif;
text-transform: uppercase;
color: #677E98;
font-style: italic;
.TA2012 { font-family: Tahoma, Geneva, sans-serif;
color: #000;
font-weight: normal;
.TAHOMABROWN {
font-family: Arial, Helvetica, sans-serif;
color: #333;
.Titl4eabus24 {
font: bold 16px Tahoma, Geneva, sans-serif;
color: #677E98;
text-align: justify;
font-weight: normal;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
.bbstudy {
font-weight: normal;
font-family: Tahoma, Geneva, sans-serif;
color: #000;
font-size: 10px;
font-style: normal;
.bc { font-family: Tahoma, Geneva, sans-serif;
color: #000;
font-weight: normal;
.blackfont { color: #000;
font-size: 12px;
.blackfont2 {color: #000;
font-size: 12px;
.blue2 {color: #000;
font: normal 16px/normal Tahoma, Geneva, sans-serif;
.blue2 {color: #000;
font-size: 12px;
.bluenew2 { color: #3F75FF;
.bluenice {
color: #000;
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
.brown { color: #06F;
font-size: 10px;
.churchaddresswhite { font: normal 12px/normal Tahoma, Geneva, sans-serif;
color: #FFF;
font-family: Tahoma, Geneva, sans-serif;
.dccaddress201121111 {font: normal 12px Tahoma, Geneva, sans-serif;
color: #000;
.dccaddress201121111 {color: #FFF;
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
.dccaddress2011212 {
color: #FFF;
font: normal 12px Tahoma, Geneva, sans-serif;
font-family: Tahoma, Geneva, sans-serif;
.dccaddress20113 {color: #666;
font-family: Tahoma, Geneva, sans-serif;
.englishfontnew { color: #FFF;
font: bold 10px Tahoma, Geneva, sans-serif;
font-size: 14px;
font-weight: normal;
font-family: Tahoma, Geneva, sans-serif;
.gray2 {color: #333;
.gray2 { color: #666;
font-weight: normal;
.gray2 {
font-family: Tahoma, Geneva, sans-serif;
font-style: normal;
.newenglishtext { font: bold normal 12px/normal Tahoma, Geneva, sans-serif;
color: #000;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
.newindextitleseng1 {font: normal 14px Tahoma, Geneva, sans-serif;
text-transform: capitalize;
color: #FFF;
font-size: 12px;
.newindextitleseng1 {
color: #333;
font-family: Tahoma, Geneva, sans-serif;
.newtext1 { color: #FFF;
font: normal 14px Tahoma, Geneva, sans-serif;
font-size: 12px;
.nonboldariel1 {
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
color: #000;
font-style: normal;
.nonboldariel2 {
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
color: #000;
font-style: normal;
.orange { color: #FE9900;
font-weight: bold;
font-style: italic;
.red { color: #F00;
.s16 { font-size: 16px;
font-weight: normal;
color: #583F2C;
font-family: Tahoma, Geneva, sans-serif;
.sermtitle01-04-12 {
font-weight: normal;
font-size: 12px;
font-style: normal;
.t { font-family: Tahoma, Geneva, sans-serif;
color: #000;
font-weight: bold;
.tahoma21 {color: #CCC;
.whitetitle {
color: #000;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-style: normal;
font-size: 12px;
.whitetitle1 {
color: #000;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 12px;
font-style: normal;
.englishfont strong {
color: #FFF;
font-weight: normal;
.black {
font-style: normal;
.SIZE16 {
font-style: normal;
.Articles {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #000;
.newtext11 {
color: #FFF;
font: normal 14px Tahoma, Geneva, sans-serif;
font-size: 12px;
.tahoma31 {text-align: justify;
.tahoma31 {font: normal 14px/normal Tahoma, Geneva, sans-serif;
color: #600;
font-family: Tahoma, Geneva, sans-serif;
.tahoma31 blockquote p {
font-size: 12px;
color: #333;
.blackfont1 {color: #000;
font-size: 12px;
.bluenice1 {
color: #000;
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
.nonboldariel11 {
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
color: #000;
font-style: normal;
.nonboldariel21 {
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
color: #000;
font-style: normal;
.welcome14 { font-size: 14px;
text-align: center;
.whitetitle2 {
color: #000;
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
font-size: 12px;
.whitetitle11 {
color: #000;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 12px;
font-style: normal;
a:link {
text-decoration: none;
color: #333;
a:visited {
text-decoration: none;
a:hover {
text-decoration: none;
a:active {
text-decoration: none;
font-family: Tahoma, Geneva, sans-serif;
.arielnew {
font-family: Arial, Helvetica, sans-serif; -
CS4 Help with spry menu bar. Want Top Centered and Subs left-justified.
Hi there, using DW8 mostly, but have the trial version of CS4
for the spry menu bar. WinXP.
Can someone help me with the spry menu bar on this page? I'd
like the main menu to be centered, as it looks better for
appearance, and the sub menus to be left-justified.
http://www.manmeetswoman.com/example4.html
But I can't seem to do that, if I make the main menu
centered, it seems to override the submenus even if I make a class
just for the submenu to be left-justified.
Am I doing something wrong or is this not possible?
And the menu bar looks horrific in IE6. I assume it looks ok
in IE7 and above. Can someone help me with a code just for IE6 for
this?audio90 wrote:
Not quite what I was looking for. I'm wanting the top menu to be grouped together and to the right and the submenu boxes to all a single square box, not just with backgrounds extending only the length of the word. Also, your menu bar doesn't display properly in IE6 either.
1) You should be able to achieve a square box for your submenu items by fixing the widths of all of your submenu items to something larger than the content of your widest submenu <li> tag. This should be achievable with a single change of setting in the following CSS rule.
ul.MenuBarHorizontal ul li {
width:???em;
Set your width using em units, so that the box shrinks and grows with the size of the text when the latter is changed by the user.
2) Getting your top menu items to group together to the right may be more difficult as the entire menu bar is built on an HTML list structure with left-floated <li> tags. If it is possible, then you should begin your experimentation with the following CSS rule
ul.MenuBarHorizontal li {
float:right;
Change the float property from left to right, as I have indicated.
My suspicion, however, is that many subsequent adjustments will have to be made. So, back up your current CSS file before you begin.
Roddy -
Help with spry menu bar in liquid layout
I need help getting a spry menu bar with a 6-item list to stay in place in a liquid layout. Trying to get it horizontally under the header image. I am new to web design (new to html and code: reading books, searching web, and doing tutorials for many hours now), using CS4, working on a mac. You can view my trial page on cc-tn.com. I would appreciate any help offered!
Problem stems from the fact that your page is looking for files contained on your local hard drive instead of the web site.
<script src="file:///Macintosh HD/Users/Allison/CC Web/Templates/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="file:///Macintosh HD/Users/Allison/CC Web/Templates/SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
In addition, the links to PDF files are pointing to your local hard drive.
p><a href="file:///Macintosh HD/Users/Allison/CC Web/Documents/Foundations_one-page_green.pdf">Foundations</a> is a grammar-stage program for students K4 through sixth grade. Parents attend morning classes with their children as trained tutors model the tools of learning facts from a variety of interesting subjects. Students also participate in science and fine arts projects and practice public speaking each week.</p>
<p><a href="file:///Macintosh HD/Users/Allison/CC Web/Documents/Essentials-One-page.pdf">Essentials</a> is a dialectic-stage program for students in third through sixth grade. Trained tutors model the dialectic tools of learning in English grammar, writing, and math drills. Emphasis is placed on the development of writing skills that will enable students to become effective communicators through the written word. Classes meet in the afternoon following lunch.</p>
<p><a href="file:///Macintosh HD/Users/Allison/CC Web/Documents/Challenge_one-page.pdf">Challenge A & B</a> are dialectic-stage programs for seventh and eighth graders. Emphasis is placed on group discussion as students become more independent learners. Students focus on logic and debate.</p>
Did you define a local site folder in DW before you began this project? Without this critical first step, DW cannot correctly manage assets for you.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb -
Problem with Spry Menu Bar 2.0 (1.0) re - CSS
Hello:
I am having some difficulty with a Spry Menu Bar (horizontal) 2.0 (1.0) that I have created. Initially I thought the problem was with regard to rendering issues on IE 6.0, however the problem seems to be more general than that and I have come to believe that it has to do with the CSS created by the Widget Browser and modified once imported into the webpage. Hence I have elected to post my issue here rather than on the spry page.
I have relied on the tutorial provided by David Powers (Bayside.css) and in addition other documentation regarding the Spry menu bar UI. The problem appeared to be one of IE 6 rendering the page with a gap that is created when the drop down menus appear, thus pushing down any divs that appear below the page.
However, through a painstaking process of trial and error my problem now seems to be that when I export the CSS generated by the widget browser to an external style sheet (the general style sheet governing the whole site), it conflicts with other CSS styles regarding links etc. The end result is that all the padding, background colours, background images, and text colours are lost. So long as the CSS remains within the head this doesn't happen.
My thinking is that this must have to do with issues of specificity, inheritence, etc.
The site can be viewed at the following URL: http://www.aclco.org/testing/index.html. In its current form all CSS related to the menu bar is found in the head of each page. (see CSS below).
My question is can I establish a separate style sheet for the horizontal menu bar and have those styles applied specifically (and only) to the menu bar. My only other alternative is to work through the remainder of the general style sheet and work through any issues of specificity/inheritance -- which may be the "best" practice, but it risks causing other "cascading" [sic] problems elsewhere.
Any advice or suggestions or directed reading (that would point to a solution) that could be offered would be greatly appreciated.
Steve Webster
The CSS governing the horizontal menu bar is as follows: (currently the following CSS is embedded in the head of the web page)
<style type="text/css">
/* -- Begins Spry Menu Widget 2.0 (1.0) Horizontal menu bar Custom styles -- */
/* BeginOAWidget_Instance_2141544: #MenuBar */
/* Settable values for skinning a Basic menu via presets. If presets are not sufficient, most skinning should be done in
these rules, with the exception of the images used for down or right pointing arrows, which are in the file SpryMenuBasic.css
These assume the following widget classes for menu layout (set in a preset)
.MenuBar - Applies to all menubars - default is horizontal bar, all submenus are vertical - 2nd level subs and beyond are pull-right.
.MenuBarVertical - vertical main bar; all submenus are pull-right.
You can also pass in extra classnames to set your desired top level menu bar layout. Normally, these are set by using a preset.
They only apply to horizontal menu bars:
MenuBarLeftShrink - The menu bar will be horizontally 'shrinkwrapped' to be just large enough to hold its items, and left aligned
MenuBarRightShrink - Just like MenuBarLeftShrink, but right aligned
MenuBarFixedLeft - Fixed at a specified width set in the rule '.MenuBarFixedLeft', and left aligned.
MenuBarFixedCentered - - Fixed at a specified width set in the rule '.MenuBarFixedCentered',
and centered in its parent container.
MenuBarFullwidth - Grows to fill its parent container width.
In general, all rules specified in this file are prefixed by #MenuBar so they only apply to instances of the widget inserted along
with the rules. This permits use of multiple MenuBarBasic widgets on the same page with different layouts. Because of IE6 limitations,
there are a few rules where this was not possible. Those rules are so noted in comments.
#MenuBar {
background-color:transparent;
font-family: Arial, Helvetica, sans-serif; /* Specify fonts on on MenuBar and subMenu MenuItemContainer, so MenuItemContainer,
MenuItem, and MenuItemLabel
at a given level all use same definition for ems.
Note that this means the size is also inherited to child submenus,
so use caution in using relative sizes other than
100% on submenu fonts. */
font-weight: normal;
font-size: 17px;
font-style: normal;
padding:0;
/* Caution: because ID+class selectors do not work properly in IE6, but we want to restrict these rules to just this
widget instance, we have used string-concatenated classnames for our selectors for the layout type of the menubar
in this section. These have very low specificity, so be careful not to accidentally override them. */
.MenuBar br { /* using just a class so it has same specificity as the ".MenuBarFixedCentered br" rule bleow */
display:none;
.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;
.MenuBarFixedCentered br {
clear:both;
display:block;
.MenuBarFixedCentered .SubMenu br {
display:none;
.MenuBarFullwidth {
float: left;
width: 100%;
/* Top level menubar items - these actually apply to all items, and get overridden for 1st or successive level submenus */
#MenuBar .MenuItemContainer {
padding: 0px 0px 0px 0px;
margin: 0; /* Zero out margin on the item containers. The MenuItem is the active hover area.
For most items, we have to do top or bottom padding or borders only on the MenuItem
or a child so we keep the entire submenu tiled with items.
Setting this to 0 avoids "dead spots" for hovering. */
#MenuBar .MenuItem {
padding: 10px 10px 10px 4px;
background-color:#000088;
background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Navigation%20Bar%20Segm ent-Dark.png);
background-repeat:repeat-x;
#MenuBar .MenuItemFirst {
border-style: none none none none;
#MenuBar .MenuItemLast {
border-style: none none none none;
#MenuBar .MenuItem .MenuItemLabel{
text-align:center;
line-height:1.4em;
color:#ffffff;
background-color:transparent;
padding: 0px 18px 0px 5px;
width: 10em;
width:auto;
.SpryIsIE6 #MenuBar .MenuItem .MenuItemLabel{
width:1em; /* Equivalent to min-width in modern browsers */
/* First level submenu items */
#MenuBar .SubMenu .MenuItem {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 15px;
font-style: normal;
background-color:#000088;
padding:0px 2px 0px 0px;
border-width:0px;
border-color: #cccccc #cccccc #cccccc #cccccc;
/* Border styles are overriden by first and last items */
border-style: solid solid none solid;
#MenuBar .SubMenu .MenuItemFirst {
border-style: none;
padding: 0px;
#MenuBar .SubMenu .MenuItemFirst .MenuItemLabel{
padding-top: 0px;
#MenuBar .SubMenu .MenuItemLast {
border-style: none none none none;
#MenuBar .SubMenu .MenuItemLast .MenuItemLabel{
padding-bottom: 10px;
#MenuBar .SubMenu .MenuItem .MenuItemLabel{
text-align:left;
line-height:1em;
background-color:transparent;
color:#ffffff;
padding: 10px 10px 10px 10px;
width: 240px;
/* Hover states for containers, items and labels */
#MenuBar .MenuItemHover {
background-color: #2E35A3;
background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Navigation%20Bar%20Segm ent%20Light2.png);
background-repeat:repeat-x;
#MenuBar .MenuItemWithSubMenu.MenuItemHover .MenuItemLabel{
background-color: transparent; /* consider exposing this prop separately*/
color: #ffffff;
#MenuBar .MenuItemHover .MenuItemLabel{
background-color: transparent;
color: #ffffff;
#MenuBar .SubMenu .MenuItemHover {
background-color:#2E35A3;
#MenuBar .SubMenu .MenuItemHover .MenuItemLabel{
background-color: transparent;
color: #ffffff;
/* Submenu properties -- First level of submenus */
#MenuBar .SubMenuVisible {
background-color: transparent;
min-width:0%; /* This keeps the menu from being skinnier than the parent MenuItemContainer - nice to have but not available on ie6 */
border-style: none none none none;
#MenuBar.MenuBar .SubMenuVisible {/* For Horizontal menubar only */
top: 100%; /* 100% is at the bottom of parent menuItemContainer */
left:0px; /* 'left' may need tuning depending upon borders or padding applied to menubar MenuItemContainer or MenuItem,
and your personal taste.
0px will left align the dropdown with the content area of the MenuItemContainer. Assuming you keep the margins 0
on MenuItemContainer and MenuItem on the parent
menubar, making this equal the sum of the MenuItemContainer & MenuItem padding-left will align
the dropdown with the left of the menu item label.*/
z-index:10;
#MenuBar.MenuBarVertical .SubMenuVisible {
top: 0px;
left:100%;
min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse */
/* Submenu properties -- Second level submenu and beyond - these are visible descendents of .MenuLevel1 */
#MenuBar .MenuLevel1 .SubMenuVisible {
background-color: transparent;
min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse*/
top: 0px; /* If desired, you can move this down a smidge to separate top item''s submenu from menubar -
that is really only needed for submenu on first item of MenuLevel1, or you can make it negative to make submenu more
vertically 'centered' on its invoking item */
left:100%; /* If you want to shift the submenu left to partially cover its invoking item, you can add a margin-left with a
negative value to this rule. Alternatively, if you use fixed-width items, you can change this left value
to use px or ems to get the offset you want. */
/* IE6 rules - you can delete these if you do not want to support IE6 */
/* A note about multiple classes in IE6.
* Some of the rules above use multiple class names on an element for selection, such as "hover" (MenuItemHover) and "has a subMenu" (MenuItemWithSubMenu),
* giving the selector '.MenuItemWithSubMenu.MenuItemHover'.
* Unfortunately IE6 does not support using mutiple classnames in a selector for an element. For a selector such as '.foo.bar.baz', IE6 ignores
* all but the final classname (here, '.baz'), and sets the specificity accordingly, counting just one of those classs as significant. To get around this
* problem, we use the plugin in SpryMenuBarIEWorkaroundsPlugin.js to generate compound classnames for IE6, such as 'MenuItemWithSubMenuHover'.
* Since there are a lot of these needed, the plugin does not generate the extra classes for modern browsers, and we use the CSS2 style mutltiple class
* syntax for that. Since IE6 both applies rules where
* it should not, and gets the specificity wrong too, we have to order rules carefully, so the rule misapplied in IE6 can be overridden.
* So, we put the multiple class rule first. IE6 will mistakenly apply this rule. We follow this with the single-class rule that it would
* mistakenly override, making sure the misinterpreted IE6 specificity is the same as the single-class selector, so the latter wins.
* We then create a copy of the multiple class rule, adding a '.SpryIsIE6' class as context, and making sure the specificity for
* the selector is high enough to beat the single-class rule in the "both classes match" case. We place the IE6 rule at the end of the
* css style block to make it easy to delete if you want to drop IE6 support.
* If you decide you do not need IE6 support, you can get rid of these, as well as the inclusion of the SpryMenuBarIEWorkaroundsPlugin.js script.
* The 'SpryIsIE6' class is placed on the HTML element by the script in SpryMenuBarIEWorkaroundsPlugin.js if the browser is Internet Explorer 6. This avoids the necessity of IE conditional comments for these rules.
.SpryIsIE6 #MenuBar .MenuBarView .MenuItemWithSubMenuHover .MenuItemLabel /* IE6 selector */{
background-color: transparent; /* consider exposing this prop separately*/
color: #ffffff;
.SpryIsIE6 #MenuBar .MenuBarView .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel/* IE6 selector */{
background-color: transparent; /* consider exposing this prop separately*/
color: #ffffff;
.SpryIsIE6 #MenuBar .SubMenu .SubMenu /* IE6 selector */{
margin-left: -0px; /* Compensates for at least part of an IE6 "double padding" version of the "double margin" bug */
/* EndOAWidget_Instance_2141544 */
/* Ends Spry Menu Bar Widget 2.0 (1.0) Horizontal Menu Custom styles */
</style>
The CSS governing the site generally is reproduced below: (my belief is that it is the a:link, a:visited, a:hover, a:active styles that may be in conflict).
@charset "utf-8";
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
min-height: 0; /* This is necessary to overcome the "haslayout" bug that is found in Windows 7 in conjuction with IE8. For More information see: URL -- http://reference.sitepoint.com/css/haslayout.html */
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align:center; /* This allows for the centering of the container and overcomes a bug inherent in IE 5 */
color: #000000;
list-style-image: none;
background-color: #FCFCFC;
h1,h2,h3,h4,h5,h6 {
color:#000066;
a:link {
color: #151A96;
text-decoration: underline;
a:visited {
text-decoration: underline;
color: #1B8DCD;
a:hover {
text-decoration: none;
color: #F30A0A;
a:active {
text-decoration: underline;
color: #151A96;
#container {
width: 960px;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
text-align: left; /* this overrides the text-align: center on the body element. */
background-image:
url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Website%20Midsection%20_960.png);
background-repeat: repeat-y;
#header {
padding: 0; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
width:960px;
height:332px;
background-image:
url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Website%20Header_960.png);
background-repeat:no-repeat;
#header h1 {
margin-right: 0px; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
display:none;
#header img {
display: none;
#Main_nav_contents {
padding: 0;
margin-top: 0px;
height: 39px;
width: 950px;
padding-top: 275px;
padding-left: 39px;
z-index: 3;
#MenuBarVertical {
margin-bottom: 50px;
padding-top: 50px;
padding-bottom:200px;
padding-left: 15px;
padding-right: 15px;
.mainContent_left {
margin: 0;/* the right margin on this div element creates the column down the right side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
padding-left:30px;
padding-right:20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
width: 600px;
float: left;
.sidebar_right {
float: right; /* since this element is floated, a width must be given */
width: 270px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
margin-top: 30px;
margin-left:0;
margin-right:10px;
font-size:90%;
.mainContent_right {
margin-left: 10px;
padding-left:30px;
padding-right:20px;
width: 600px;
float: right;
.sidebar_left {
float: left; /* since this element is floated, a width must be given */
width: 270px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
margin-top: 30px;
margin-left:30px;
margin-right:0;
overflow: hidden;
font-size:90%;
.main_content_centered {
width: 650px;
margin-left: 155px;
.main_content_centered_header {
margin-left: 75px;
.sidebar_textbox {
margin: 0px;
width: 260px;
padding: 2px;
.sidebar_textbox_header {
width:255px;
height:58px;
background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Portrait%20Textbox%20He ader.png);
.sidebar_textbox_background_middle {
width: 255px;
padding-top: 12px;
padding-bottom: 10px;
background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Portrait%20Textbox%20Mi ddle.png);
background-repeat: repeat-y;
.sidebar_textbox_content {
/* The width and padding are set as follows to accomodate quirks in browser rendering and to ensure that text is contained within the background of the text box */
width: 230px;
padding-left: 20px;
padding-right: 40px;
.sidebar_textbox_footer {
width:255px;
height:64px;
background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Portrait%20Textbox%20Foo ter.png);
#issues_menu a:link {
color: #151A96;
text-decoration: none;
font-weight:bold;
#issues_menu a:visited {
color: #151A96;
font-weight:bold;
text-decoration: none;
#issues_menu a:hover {
color: #F30A0A;
font-weight:bold;
font-style: oblique;
text-decoration: none;
#issues_menu a:active {
color: #151A96;
font-weight:bold;
text-decoration: none;
#archives {
padding-top: 15px;
padding-right: 15px;
padding-bottom: 20px;
padding-left: 0px;
.landscape_textbox {
width: 500px;
margin-right: 0px;
margin-left: 30px;
padding-top:35px;
padding-bottom: 25px;
font-style: normal;
font-weight: normal;
.landscape_textbox_hdr {
width:500px;
height:38px;
margin:auto;
padding:0;
background-image:
url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Landscape%20Textbox%20Header.png);
.landscape_textbox_middle {
width:auto;
margin:auto;
padding-top: 12px;
padding-bottom: 12px;
background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/landscapte%20Textbox%20 Middle.png);
background-repeat:repeat-y;
.landscape_textbox_content {
width:450px;
padding:25px;
.landscape_textbox_ftr {
width:500px;
height:44px;
margin:auto;
padding:0;
background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Landscape%20Textbox%20F ooter.png);
#footer {
padding: 0; /* this padding matches the left alignment of the elements in the divs that appear above it. */
width: 960px;
height: 222px;
background-image:
url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Website%20Footer%20_960.png);
background-repeat:no-repeat;
#footer p {
margin: 0px; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding:0px; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
text-align:center;
margin-left: 50px;
margin-right: 50px;
padding: 10px;
font-size: small;
#footer h5 {
text-align:center;
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
.dropcap {
display: block;
float: left;
line-height: 80%;
font-size: 250%;
font-weight: bolder;
color: #000066;
padding: .03em .1em 0 0;
.red_arrows {
list-style-position: outside;
list-style-image: url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Arrow%20Large.png);
.blue_bullets {
list-style-position: outside;
list-style-image: url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Bullet%20Medium%20Full.png);
.attention {
color: #F30A0A;
font-size:x-large;
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
font-weight:900;
.attention_small {
color: #F30A0A;
font-size:large;
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
font-weight:900;
.table {
table-layout:fixed;
.blue {
color: #00F;
#container .mainContent_left p .blue {
color: #0303A0;Hello Martin:
Thanks for your input. However I am not certain we have resolved this issue adequately, or understand the principles governing the css as regards this spry menu framework 2.0 (1.0).
For example, the menu only works in IE 6.0 if the css remains in the head. I agree with your original post that it shouldn't make any difference whether the css is posted in the head or in a separate style sheet (so long as specificity issues are addressed). Both should work -- and yet it doesn't.
If the CSS is placed in the separate style sheet governing the total site, it doesn't work for 6.0. If placed at the top of the style sheet, conflicts of specificity prevent the menu from rendering properly in any of the browsers causing the rules for general links to govern the menu. This has been verified using a cross browser testing. If the styles are placed at the bottom of the style sheet to help them take precedence, they work in all the browsers except for IE 6.
The website I am building needs to support IE 6 for a variety of reasons, and because it is catering to the non-profit community and to low income persons, I am mindful of even small differences in page weight.
So for me, at least, the issue remains baffling.
I appreciate your input, but also would appreciate the input from others, and especially Adobe Community Professionals and employees. The spry framework in this regard is not well documented. I am not certain if this is exclusively a CSS problem, if it might also be complicated by the architecture of the spry framework, or if indeed other variables are at play.
I would be my hope that in resolving the problem, other users of the this particular spry framework might also benefit.
Thanks,
Steve. -
Added a spry menu bar and site works in firefox but not in chrome or IE. Please help
Hello,
I'm a photographer by trade and have only picked up enough web design knowledge in order to build a website that isn't distracting to my photographs and is simple to update and mantain. Please breakdown any answers to my questions in very simple terms.
To start off here is a link to my site for reference. www.cechternach.com
1. My Biggest problem right now is that my site works in firefox but appears as a blank white page in chrome and in IE it only shows my background color.
I'm assuming that this has something to do with the spry menu bar I added. The galleries, banner, and footer were all part of a previous version of this website that didn't use the menu bar. I actually used png's exported from an illustrator as buttons. I've been wrestling with this menu bar for a few days now. I had an issue with the menubar forcing down the gallery below it. that was fixed by changing a position value from relative to absolute in the menubar css. Then I couldn't see the submenu over the galleries. I think I fixed that with a wmode change but I"m not sure if I did that right. I believe i needed to change that in the object and embed part of the code. One spot for certain browsers and the other spot for other browsers. I was a little confused on this because i also read that i needed to change the wmode in the javascript file in dreamweaver cs4 which is what i'm using. Whatever wmode I changed it seemed to work in firefox. The submenu background was showing up transparent but i fixed that in the menubar css.
2. I would like the submenu's to have a semi transparent blurred background effect. Is this possible with a spry menu bar?
3. How do I center my text in the submenu?
4. My menu bar buttons should be the same font as my name in my banner. It looks fine on my computer that has that font loaded but on other computers I was testing the site on the menubar buttons show up as a default font. How can i fix this?
5. Is there any way to get rid of the grey lines that show up around my slideshow pro galleries and menu bar buttons when they are clicked?
The last four questions aren't as important as the first one. I may be upsetting the flow of the forum as well. Please let me know if I'm not following procedure with any of my questions. Feel free to point out any other problems you see with my page. I'm trying to learn this as I go. Thanks in advance.Spry widgets, which includes the SpryMenuBar, in their original state do not pose any problem in any browser!
Widgets contain two parts
JavaScript which drives the widget
CSS which styles the widget to individual tastes
The most common reason for a widget to misbehave especially in IE is because the inexperienced web developer has upset the delicate balance of the CSS. I say delicate, because in the original, great care has been taken by the Spry team to ensure cross browser compatibility.
There are other reasons why a whole page can misbehave. In these cases, the culprit should be sought outside of the Spry framework.
When trouble shooting, I would first of all comment out all of the Spry Spry parts and test the page in IE. If it does work after that, then yes come back here and we will have a look at the SpryMenuBarHorizontal.css for you.
If it doesn't work after disabling Spry, then have a look at the coding and the CSS for your page and fix that.
I hope this helps.
Ben
Maybe you are looking for
-
More than one Bank a/c during MIRO.
Hi The vendor is having more than one bank accounts. By default during MIRO the system is taking a particular account all times. I want the system to warn me that more than one Bank a/c is available for the vendor. How to set this? Thanks Ramprakash.
-
ITunes 12 artwork missing but really missing
As you can see here. The file has artwork attached but it's not showing up in iTunes. It's sporadiac which albums appear not to have the artwork and these albums will also not transfer the music file with artwork to my iPhone. I'm obsessive with tagg
-
How do I connect a Playstation 2 to my Mac Pro?
-
Powerbook 1400 cs pc card slot + battery
they don't work! i need help
-
I am trying to change the order of one of my audiobooks (media kind: audiobook), but the ID tags are greyed out. I can't change tags for almost all my audiobooks. Music files OK. Files are all read/write. Repaired disc perms. OS 10.9.4. ITunes 11.4