Fine-tuning a spry navigation bar

I'm changing a little navigation bars. Web design and Dreamweaver is very new to me, I don't know all the terminology. The width of my sidebar is good but the actual box that contains words like how to help our topic is not wide enough and worth to two lines by default. There is plenty of room on each side to expand it without having to change the width of the sidebar, but I know not where to do. I guess that's in the padding somewhere, but don't know where to look.

There is a detailed tutorial on customizing a menu bar Spry on my site at http://foundationphp.com/tutorials/sprymenu/customize1.php. It also explains how to change the width of the menu items.

Tags: Dreamweaver

Similar Questions

Problem with IE box put white behind the spry navigation bar

IE is also distort menu nav bar boxes in a different random order as well as to a white box behind the spry navigation bar.
All works fine in Chrome, Safari, and Firefox.
Does anyone know how to solve these problems?
The site is http://www.phonicsfaster.com
I would really appreciate help.
Thank you
FM

Do you want to say just do a div boxes style line as I want them to look in a row? What method would you use to make the color change and also enable it to have a direct link? In DW I usually use image swap behavior for a change on mouse over.

I'm so new to all of this. Need help spry navigation bar.

I tried to put last night, but I forgot to attach my file. I added a spry navigation bar, but only one shows the elements upwards, when I look in the code, it seems that all the items are listed, like at home, who we are, how to help, but they do not appear on the design mode or when I view it in the browser. Any ideas what I could have done wrong?

It seems to work fine for me. Did you change the code to all spry?

I have attached the file with the file in there. See what it looks like. If it looks worse, try to take a screenshot and attach it.

Nick

How can I get rid of the white space between my head and my spry navigation bar?

I have been struggling with a problem for the last 2 days and can't seem to work my way around it. I worked on a page in dreamweaver cs4 that seems to have a space between the header and my spry menu bar ONLY in Firefox. Google Chrome and Safari display it correctly. You could point me in the right direction to get rid of this space. Here is the page: http://www.margaritascafe.com/margaritas_layout.html
Here's my code and thank you in advance for your help:
< ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional / / IN" "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 "/ >"
< title > Untitled Document < /title >
< link href = "margaritastyles.css" rel = "stylesheet" type = "text/css" / > "
< script src = "Margaritas_temp_spry/SpryMenuBar.js" type = "text/javascript" > < / script > "
< script src = "Scripts/swfobject_modified.js" type = "text/javascript" > < / script > "
< link href = "Margaritas_temp_spry/SpryMenuBarHorizontal.css" rel = "stylesheet" type = "text/css" / > "
< / head >
< body >
< div id = 'wrapper' >
< div id = "header" >
< object classid = "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width = "1000" height = "250" id = 'FlashID' tabindex = "10" title = "Header of Marguerite 2 coffee" > "
< param name = "movie" value = "Flash_movies/Margaritas header 3.swf" / >
< param name = "quality" value = "high" / >
< param name = "wmode" value = "opaque" / >
< param name = "swfversion' value ="9.0.45.0"/ >
<!-this param tag prompts users with Flash Player 6.0 r65 or later to download the latest version of Flash Player. Delete it if you do not want users to display the prompt. ->
< param name = "expressinstall" value = "Scripts/expressInstall.swf" / > "
<!-next object tag is for non - IE browsers. Then he hide from IE using IECC. ->
<!-[if! IE] >->
< object type = "application/x-shockwave-flash" data = "Flash_movies/Margaritas header 3.swf" width = "1000" height = "250" >
<!-<! [endif]-->
< param name = "quality" value = "high" / >
< param name = "wmode" value = "opaque" / >
< param name = "swfversion' value ="9.0.45.0"/ >
< param name = "expressinstall" value = "Scripts/expressInstall.swf" / > "
<!-the browser displays the following alternative content for users of Flash Player 6.0 and higher. ->
< div >
< h4 > the content of this page requires a newer version of Adobe Flash Player. < / h4 >
" < p > < a href =" http://www.Adobe.com/go/getflashplayer_fr "> < img src = ' http://www.Adobe.com/images/shared/download_buttons/get_flash_player.gif "alt = 'Get Adobe Flash player' width = '112' height ="33"/ > < /a > < /p > "
< / div >
<!-[if! IE] >->
< / object >
<!-<! [endif]-->
< / object >
< / div >
< div id = "navigation" >
< ul id = "MenuBar1" class = "MenuBarHorizontal" >
< li > < a href = "#" > home < /a > < /li >
< li > < a href = "#" class = "MenuBarItemSubmenu" > < /a > Menus
< ul >
< li > < a href = "#" > lunch < /a > < /li >
< li > < a href = "#" > dinner < /a > < /li >
< li > < a href = "#" > Cocktail < /a > < /li >
< li > < a href = "#" > Take Out < /a > < /li >
< /ul >
< /li >
< li > < a href = "#" > Photos < /a > < /li >
< li > < a href = "#" class = "MenuBarItemSubmenu" > < /a > Catering
< ul >
< li > < a href = "#" > < /a > < /li > private Party
< /ul >
< /li >
< li > < a href = "#" > book < /a > < /li >
< li > < a href = "#" > Contact < /a > < /li >
< li > < a href = "#" > feedback < /a > < /li >
< li > < a href = "#" > Directions < /a > < /li >
< /ul >
< / div >
< div id = "maincontentlayout3" > the content of id "maincontentlayout3" goes here < / div >
< div id = "special" > < img src = "png-gif-jpg/Tuesday night features" width = "200" height = "70" alt = "Of Marguerite Tuesday Night Special" / > < img src = "png-gif-jpg/Wednesday features" width = "200" height = "70" alt = "Wednesday 2 for 1 special dinner to Margarita" / > < img src = "png-gif-jpg/Thursday features" width = "200" height = "70" alt = "ladies Thursday evening at the Café of Marguerite" / > < img src = "png-gif-jpg/Friday features" width = "200" height = "70" alt = "TGIF Happy Hour Friday at the Café Margarita"/ > < img src ="png-gif-jpg/Sunday features"width ="200"height ="70"alt ="Sunday Kids Eat Free at the Café of Marguerite!"/ > < / div >
< div id = "footer" > < img src = "png-gif-jpg/Margaritas Facebook logo.png" alt = "Facebook" width = "40" height = "25" align = "absmiddle" / > < img src = "png-gif-jpg/Margaritas Twitter logo.png" alt = "Logo of Twitter" width = "40" height = "25" align = "absmiddle" / > < img src = "png-gif-jpg/merchantcircle_mini.png" alt = "Logo of merchant circle" width = "63" height = "25" align = "absmiddle" / > < / div >
< / div >
< script type = "text/javascript" >
<!--
var MenuBar1 = new Spry.Widget.MenuBar ("MenuBar1", {imgDown: "Margaritas_temp_spry/SpryMenuBarDownHover.gif", imgRight:"Margaritas_temp_spry/SpryMenuBarRightHover.gif"});})
->
< /script >
< / body >
< / html >

CSS:

#navigation {margin-top:-3px ;}}

Nancy O.
ALT-Web Design & Publishing
Web | Graphics | Print | Media specialists
http://ALT-Web.com/
http://Twitter.com/ALTWEB

Update Spry Navigation bar across several models?

Hello guys and girls
what im doing
I have a dynamic site that is not under tension at the moment and I need to use multple models and the spry does not update in the models
I need spry to update through all 4 models there are many pages runnig out of them, but the spry is going to be the same in all 4
is there a way to update a model and it will update the rest with one line of code added or another way
Help, please
Tegan

Use a server-side include your navigation bar instead. Then, simply update the include file, and it is fixed for all pages.

How to reflect the link in the navigation bar Spry?

I created a new site www.ocamocam.com , but only the navigation bar links work namely photos.html. I changed the links in the file, index.dwt and they now appear ok in the code pane. contact.html, index.html and links.html do not work. The links are not correct in the html pages that don't work of course and I can't change them there. How can I get the spry navigation bar to reflect the correct links?

steelguitarist wrote:

First of all, I created an index.html page, then saved as index.dwt. Then I created a new index.html and saved, Overwrite original index.html. I then created more child html pages and saved, so when I update the index.dwt and child pages, the child html files don't update automatically on the local site after saving all. Are they not supposed to? The idex.dwt is located in the models folder and files of the child are in the root folder.

As a first step, you create any specific page name, it is a 'model' page you're working on (i.e. If you choose to use a model construction). Once you have the pieces in place where you need it on the template page you then save as a template - file > save as template.

This creates a models folder in your root folder inside the site, you should have a file named Template.dwt NOT index.dwt

Then, you would then create a page of the child from the Template.dwt page and save it as index.html folder in the root of your site. You continue to make child pages from the page Template.dwt.

So, if you want to make changes to the child pages that you open the Template.dwt page, make the changes and any changes must be updated in the pages of the child if you follow the procedure correctly.

DW CS3 behaviors navigation bar
I try to get two navigation bars, a distinction for the page you. The url is: www.lotusvalleydesigns.com/meixnerconstruction/home.html

What I want is for the navigation bar of stay red for the page that you are on the spry navigation bar. In the lower navigation bar, I want to keep it yellow for the page you.

Any help is appreciated.

Thank you!
No doubt you'll have something like this-

Home page| Security |<>
href = "services.html" > Our Services | Our team |
Contact us |
Links
----------------------------------------^^^^^^^
(don't know why it's there - I'll delete it)

So that-

Home page|
ID = 'security' > Security | Our
Services | Our team |<>
href = "contact.html" id = "contact" > contact us | "
ID = 'links' > links

You can use a style sheet to the head of a special page like this-

(on the Security page)

or it-

(on the links page)

Did fall a penny?

--
Murray - ICQ 71997575
Adobe Community Expert
(If you * MUST * write me, don't don't LAUGH when you do!)
==================
http://www.projectseven.com/go - DW FAQs, tutorials & resources
http://www.dwfaq.com - DW FAQs, tutorials & resources
==================

"new dreamweaver" wrote in message
News:gqed5s$1EA$1@forums. Macromedia.com...
> Thank you. Unfortunately, I still have a hard time with this work.
> Here
> is the div I to the navigation at the bottom:

> id = "footer" >
> Homepage| Security | Our Services | Our team | Contact
> We |
> Links
>
>
> Please help.
>
> If you need the URL again is:
> www.lotusvalleydesigns.com/meixnerconstruction/home.html
>
> Thank you.
>

Problems with the horizontal navigation bar Spry in IE

Considering that the page is perfect (at least all I like) implemented in all other browsers, IE converts the spry horizontal navigation bar in vertical position. Not very practical, and I spent day (really) try to find a solution. Even contacted Microsoft here in Norway, but they are their usual me useful (i.e. not very).
A solution is of course to use a flash homepage and tell visitors to get a decent browser (as in NOT IE), but that might be a little off.
Would be best to find a way around the problem.
The page is here: http://www.writeone.net/Futaba/newFutaba.html
Any suggestions or solutions?
See you soon,.
James

Spry menus have integrated many hacks for IE. When you make radical changes of styles of Spry menus without understanding what it does, it is inevitable that something will break somewhere in the chain.

Please read these links:

Menus Spry 10 commandments

http://www.dwcourse.com/Dreamweaver/ten-commandments-Spry-menubars.php

Fixing of the Menus Spry 1.6.1

http://www.Projectseven.com/testing/Adobe-bugs/Spry-menus/

Nancy O.

Spry menu navigation bar

My web site is built with about 20 pages. Last thing to do is to make a spry for pages navigation menu bar. I already have the navigation bar for the index page. I would like the same menu bar on all pages. How can I add it to all the pages so that if I want to make a change to one of the links that I did do once on the index page and all other pages will be updated. Thanks for your help.

If you want to change something in your SpryMenuBar only once, and then changed it automatically in all other pages as well, I suggest that you create a Web site template for your site. Open your INDEX page and save it as a template (file - save as template - or something like that; Sorry on my computer, everything is in German). Choose the name of your site in the list and give it a name (for example the model). Press "Save".

Now, decide which parts of this site are the same for all other sites (for example, header, navigation (bar menus spry), footer,...) and create an editable region if necessary (when the content varies from one site to another). Save the document.

Unfortunately, you then need to create all your sites again... but it is a question of "copy / paste" and do you only once so it is still worthwhile.

Open an existing (DOC 1) document and create a new page (DOC 2) at the same time (create a file - new - model Page - choose your site in the list of the Center, then the appropriate model in the right-hand box-). Copy the contents of the DOC 1 in the editable area of the DOC 2, DOC 1 nearby and keep DOC 2. Do it with all your documents.

In the future, you will need to make the changes in the model only file (for areas that are the same in all documents) and they will be automatically changed in all the other 20 pages as well.

Spry navigation menu bar

Hello
I have a model downloaded from a Web site, that I am editing in dreamweaver. Because menus are already created, I tried to add a spry navigation menu to one of them. Now, I placed the cursor where I need the navigation menu, I chose, insert > spry > bar menus spry now I get a message "dreamweaver does not insert a menu bar in a list.please insert it somewhere else"
I think that the problem lies in the menu bar that is already created? are there ways I can create the navigation bar on the same menu that is already created, because it is very convinient as it is already made.please help.
Thank you
Ayaz,

I'd say you're better to remove the old menu and replace it entirely with the new Spry Menu :-)

I think it would be too difficult to try to integrate the two - unless you are very familiar with CSS and Spry.

--

Nadia

Adobe® Expert community: Dreamweaver

http://Twitter.com/nadiap

--------------------------------------------------

Unique templates CSS | Tutorials | SEO articles

http://www.DreamweaverResources.com

--------------------------------------------------

Book: Ultimate CSS reference

http://www.SitePoint.com/launch/005dfd4/3/133

The Spry menu bar navigation

I am using the Spry menu bar and have several menu on my home page items that have incorporated under them. For example, I have an element of menu 'navigate' on the home page, and the slot 'Browse' 'saw inventory"and"wish list ". I want users to be able to access the sub through the menu item "Browse" items but does not allow users to open "Browse."
I would like suggestions.
Thank you
Iain

Just put a # where otherwise the URL would go as a
```
Browse
```
GRAMPS

Problem with the 2.0 (1.0) Spry menu bar re - CSS

Hello:
I'm having some trouble with a Spry (horizontal) 2.0 (1.0) menu bar I created. Initially, I thought the problem was in what concerns the problems of rendering on IE 6.0, but the problem seems to be more general than that, and I came to believe that this has to do with the CSS created by the browser Widget and changed once imported in the Web page. That's why I chose to post my question here rather than on the spry page.
I leaned on the tutorial provided by David Powers (Bayside.css) and in addition any other documentation regarding the Spry UI bar menu. The problem appeared as one of the 6 IE rendered page with a gap that is created when the menus appear, so push down the divs that appear below the page.
However, through a laborious process of trial and error, my problem now seems to be that when I export the CSS generated by the browser widget to an external style sheet (the style sheet General governing the whole of the site), he comes into conflict with other CSS styles for links etc. The end result is that all the padding, background colors, background images, and colors of text are lost. As long as the CSS is in the head that this does not happen.
My thought is that this must have to do with the problems of specificity, inheritance, etc.
The site is available at the following ADDRESS: http://www.aclco.org/testing/index.html. In its current form, all the CSS associated with the menu bar is located at the head of each page. (see CSS below).
My question is I can set up a separate style sheet for the menu bar horizontally and have these styles applied specifically (and only) in the menu bar my only alternative is to work through the rest of the General style sheet and the work by problems of specificity/inheritance - that may be the "best" practice , but it may create another 'cascading' [sic] problems elsewhere.
Advice or suggestions or directed readings (which would point to a solution) that could be offered would be greatly appreciated.
Steve Webster
The horizontal CSS governing the menu bar is as follows: (currently the following CSS is embedded in the web page's head)
< style type = "text/css" >
/ * - Start styles horizontal Spry Menu Widget 2.0 (1.0) menu bar-* /.

/ * BeginOAWidget_Instance_2141544: #MenuBar * /.
/ * Values for skinning a basic through presets menu. If the default settings are not sufficient, most count should be done in
These rules, except for the images used to down or to the right pointing arrows, located in the SpryMenuBasic.css file

They take the following classes of widget for layout of menu (located in a "Preset")
. MenuBar - applies to all menu bars - default is a horizontal bar, all submenus are vertical - level 2 subs and beyond are drop down to the right.
. MenuBarVertical - vertical main bar; All submenus are drop down to the right.

You can also pass in extra classnames to set your desired top-level menu bar layout. Normally, they are defined by using a predefined setting.
They apply only to the horizontal menu bars:
MenuBarLeftShrink - the menu bar will be horizontally "shrinkwrapped" be just big enough to hold his items and left-aligned
MenuBarRightShrink - as MenuBarLeftShrink, but right-aligned
MenuBarFixedLeft - set to a specified width defined in rule "." MenuBarFixedLeft', and left-aligned.
MenuBarFixedCentered - Fixed to a specified width defined in rule "." MenuBarFixedCentered',.
and centered in its parent container.
MenuBarFullwidth - expands to fill the width of the parent container.

In general, all the rules specified in this file are prefixed by #MenuBar so that they don't apply to instances of the widget inserted along
with the rules. This allows use of multiple MenuBarBasic widgets on the same page with different layouts. Due to limitations in IE6.
There are a few rules where this was not possible. These rules are so noted in the comments.

*/
{#MenuBar}
background-color: transparent;
do-family: Arial, Helvetica, without serif. / * Specify the fonts on the bar menu and submenu MenuItemContainer, so MenuItemContainer.
MenuItem and MenuItemLabel
at a given level all use the same definition for ems.
Note that this means that the size is also inherited from the submenus of the child,
so be careful when using other than relative sizes
100% on the fonts submenu. */
make-weight: normal;
font size: 17px;
make-style: normal;
padding: 0;

}
/ * ATTENTION: because ID + class selectors do not work correctly in IE6, but we want to restrict these rules to all this
instance of widget, we used the concatenated string classnames to our selectors for the type of layout of the menu bar
in this section. These have very low specificity, so be careful not to overstep accidentally. */
. MenuBar br {/ * using only a class, so there same specificity that the "."} MenuBarFixedCentered br' rule bleow * /.
display: none;
}
. {MenuBarLeftShrink}
float: left; / * shrink the content, but also to float the menu bar * /.
Width: auto;
}
. {MenuBarRightShrink}
float: right; / * shrink the content, but also to float the menu bar * /.
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 bar small objects - these actually apply to all items and get substituted for the submenus level 1st or successive * /.
#MenuBar. {MenuItemContainer}
padding: 0px 0px 0px 0px;
margin: 0;     / * Zero margin on the containers of items. The MenuItem is the active area of hover.
For most elements, we have padding top or bottom or border only on MenuItem
or a child so we keep all tiled submenu with elements.
Definition of this 0 avoids the "dead zones" to hover. */
}
#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 no none;
}
#MenuBar. {MenuItemLast}
border-style: none none no 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 of submenu items * /.
#MenuBar. Submenu. {}, MenuItem
do-family: Arial, Helvetica, without serif.
make-weight: bold;
font size: 15px;
make-style: normal;
background-color: #000088;
padding: 0px 2px 0px 0px;
border-width: 0px;
border color: #cccccc #cccccc #cccccc #cccccc.
/ * Border styles are replaced by first and last items * /.
border-style: solid solid no solid;
}
#MenuBar. Submenu. {MenuItemFirst}
border-style: none;
padding: 0px;
}
#MenuBar. Submenu. MenuItemFirst. {MenuItemLabel}
padding-top: 0px;
}
#MenuBar. Submenu. {MenuItemLast}
border-style: none none no 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, objects 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; / * expose this propeller 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;
}
/ * The submenu - first-level submenus properties * /.
#MenuBar. {SubMenuVisible}
background-color: transparent;
min-width: 0%; / * This prevents the menu being lean that the parent MenuItemContainer - but not available on ie6 nice to have * /.
border-style: none none no none;
}
#MenuBar.MenuBar. SubMenuVisible {/ * menu bar horizontally for only * /}
top: 100%;    / * 100% is at the bottom of menuItemContainer parent * /.
left: 0px; / * "left" may need tuning according to borders or padding applied to the bar MenuItemContainer or MenuItem,.
and your personal taste.
0px align left drop-down list with the content of the MenuItemContainer area. Assuming you keep the margins 0
on MenuItemContainer and on the parent MenuItem
menu bar, which in fact equals the sum of padding-left MenuItemContainer & MenuItem align
the drop-down menu to 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 the width of the parent MenuItemContainer - elements will avoid total collapse * /.
}
/ * The sous-menu--deuxieme submenu level properties and beyond - are visible to descendants. MenuLevel1 * /.
#MenuBar. MenuLevel1. {SubMenuVisible}
background-color: transparent;
min-width: 0px; / * Do not neeed to match the width of the parent MenuItemContainer - elements will avoid total collapse * /.
Top: 0px;    / * If you want, you can move this down a smidge to separate the top item "submenu s of menubar.
It is really necessary only for the submenu on the first point of MenuLevel1, or you can make it negative to make the submenu
vertically 'centered' about his call to * /.
left: 100%; / * If you want to move the submenu on the left to partially cover the point of his call, you can add a margin to the left with a
negative value to this rule. Alternatively, if you use the elements of fixed width, you can change this value on the left
to use px or ems to get the desired offset. */
}
/ * IE6 rules - you can remove these if you do not want to support IE6 * /.
/ * Note about several classes in IE6.
Some rules above use several class names to an element of selection, such as "hover" (MenuItemHover) and 'a a submenu' (MenuItemWithSubMenu).
* give the selector '. MenuItemWithSubMenu.MenuItemHover'.
* Unfortunately, IE6 does not support using mutiple classnames in a selector for an element. For a selector like '. foo.bar.baz', IE6 does not take into account
* all but the final classname (here, ".baz") and defines the specificity in consequence, with only one of these classs as significant. To work around this problem
* problem, we use the plugin in SpryMenuBarIEWorkaroundsPlugin.js to generate classnames for IE6, such as "MenuItemWithSubMenuHover".
* Given that many of these necessary, the plugin does not generate additional classes for modern browsers, and we use the copies of CSS2 style class
* syntax for that. Since IE6, both apply the rules where the
* It should not and gets the specificity wrong too, we have rules of order carefully, then misapplied rule in IE6 can be overridden.
* So we put first the multiple class rule. IE6 wrongly apply this rule. We follow this with the single class rule that it would be
* replace by mistake, by ensuring that the specificity of IE6 interpreted as is the same as the unique class selector, so the latter wins.
* We then create a copy of the rule of multiple class, adding a "." SpryIsIE6' in the context of the class and to ensure that the specificity
* the selector is high enough to beat the rule of single class in the case of "match of these two classes. We place the rule of IE6 at the end of the
* block of css styling to make it easy to remove if you want to drop support for IE6.
* 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 need of IE conditional comments to these rules.
*/
. SpryIsIE6 #MenuBar. MenuBarView. MenuItemWithSubMenuHover. MenuItemLabel / * selector IE6 * /}
background-color: transparent; / * expose this propeller separately * /.
color: #ffffff;
}
. SpryIsIE6 #MenuBar. MenuBarView. Submenu. MenuItemWithSubMenuHover. MenuItemLabel / * selector IE6 * /}
background-color: transparent; / * expose this propeller separately * /.
color: #ffffff;
}
. SpryIsIE6 #MenuBar. Submenu. Submenu / * selector IE6 * /}
left margin:-0px; / * Offset at least part of a version of 'double upholstery' bug IE6 'double margin "* /.
}

/ * EndOAWidget_Instance_2141544 * /.
/ * End Spry Menu Bar Widget 2.0 (1.0) Horizontal Menu Custom styles * /.

< / style >
The CSS for the site in general is reproduced below: (my belief is that it is a: link, a: visited, a: hover, a: active styles that may be in conflict).
@charset "utf-8";

{body
Police: 100% Verdana, Arial, Helvetica, without serif.
min-height: 0; / * this is necessary to overcome the "haslayout" bug found in Windows 7 in conjunction with IE8. For more information see: URL - http://reference.sitepoint.com/css/haslayout.html * /
margin: 0; / * It is advisable to zero, the margin and the filling of the body to hold element has a different default browser * /.
padding: 0;
text-align: center; / * This allows the centering of the container and overcomes an inherent bug in IE 5 * /.
Color: #000000;
list-style-image: none;
background-color: #FCFCFC;

}
H1, h2, h3, h4, h5, h6 {}
color: #000066;
}
a: link {}
color: #151A 96.
text-decoration: underline;
}
a: visited {}
text-decoration: underline;
color: #1B8DCD;
}
a: hover {}
text-decoration: none;
color: #F30A0A;
}
a: active {}
text-decoration: underline;
color: #151A 96.
}
#container {}
Width: 960px;
margin: 0 auto; / * margins (in conjunction with a width) auto Center the page * /.
text-align: left; / * This setting 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 filling is the alignment to the left of the items in the div that appear below. If an image is used in the #header instead of text, you can remove the padding. */

Width: 960px;
height: 332px;
background-image:
URL (.. / ACLCO%20Graphics%20-%20Web%20site%20Parts/Website%20Header_960.png);
background-repeat: repeat no.;
}

#header h1 {}

margin-right: 0px; / * zero setting of the margin of the last element in the #header div tag will prevent the collapse of margin - inexplicable space between divs. If the div has a border around it, this isn't necessary, which also allows to avoid the collapse of margin * /.
padding: 0; / * padding instead of margin will allow you to keep the edges of the div element * /.
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; / on this div element right margin creates the column on the right side of the page - no matter how content div the sidebar1″ contains, the space of the columns will remain. You can remove this line if you want the #mainContent div text to fill the space of #sidebar1 when the content of #sidebar1 is complete. */
padding-left: 30px;
padding-right: 20px; / * Remember that the fill is space inside the box of div and margin is the space outside the div box * /.
Width: 600px;
float: left;
}

{.sidebar_right}
float: right; / * because this element is floating, it takes a width * /.
Width: 270px; / actual width of this div, in browsers comply with the standards, or the standard mode of Internet Explorer includes the padding and border in addition to width * /.
top of the margin: 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; / * because this element is floating, it takes a width * /.
Width: 270px; / actual width of this div, in browsers comply with the standards, or the standard mode of Internet Explorer includes the padding and border in addition to width * /.
top of the margin: 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 filling are fixed as follows to reflect the quirks in the rendering of the browser while ensuring that the text is contained in 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: #151A 96.
text-decoration: none;
make-weight: bold;

}

#issues_menu a: visited {}
color: #151A 96.
make-weight: bold;
text-decoration: none;
}
#issues_menu a: hover {}
color: #F30A0A;
make-weight: bold;
make-style: oblique;
text-decoration: none;

}
#issues_menu a: active {}
color: #151A 96.
make-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;
make-style: normal;
make-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 filling is the alignment to the left of the items in the div that appear above him. */
Width: 960px;
height: 222px;
background-image:
URL (.. / ACLCO%20Graphics%20-%20Web%20site%20Parts/Website%20Footer%20_960.png);
background-repeat: repeat no.;

}
#footer p {}
margin: 0px; / * zero setting the margins of the first element in the footer will avoid the possibility of the collapse of the margin - a space between the div tags * /.
padding: 0px; / * padding on that element will create space, just as it would the margin, free margin collapse question * /.
text-align: center;
margin-left: 50px;
right margin: 50px;
padding: 10px;
font size: small;
}

#footer h5 {}
text-align: center;
}
.fltrt {/ * this class can be used to float right to the item in your page.} The floating element must precede the element it should be next to the page. */
float: right;
left margin: 8px;
}
.fltlft {/ * this class can be used to float an element on your page to the left * /}
float: left;
right margin: 8px;
}
.clearfloat {/ * this class must be placed on an element div or break and should be the last item before closing a container should completely contain a float * /}
Clear: both;
height: 0;
font size: 1px;
line-height: 0px;
}

{.dropcap}
display: block;
float: left;
line-height: 80%;
font size: 250%;
make-weight: bolder;
color: #000066;
Padding: .1em .03em 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;
do-family: Georgia, "Times New Roman", Times, serif;
make-style: italic;
Police-weight: 900;
}

{.attention_small}
color: #F30A0A;
font size: large;
do-family: Georgia, "Times New Roman", Times, serif;
make-style: italic;
Police-weight: 900;
}
.table {}
table-layout: fixed;

}
. Blue {}
Color: #00F;
}
#container .mainContent_left p .blue {}
color: #0303A 0;
}

Hello Steve

Well, I checked your page in IE6 and it seems to work fine for me except that here seemes to be a little space between
items that may be due to lack of support of .png? In other words, if there is a little transparency on the edge of the chart? Maybe it's more a shot in the water on my part!

Now my suggestion to you would be to mark this thread as closed/replied and after again with just the link to the page and your question. Short is sweet.

Martin

Spry menu bar: problems in IE and Firefox

Hello! This is my first time writing the forum. I tried to fix this site and I'm about to break! I found a lot of help just brwosing here in the past and I hope that somone can point me in the right direction.

I have validated successfully the site using the W3C CSS Validator thinking which might help, but no go. (In fact, everything what was spoil the vertical alignment of elements of menu in Safari, Chrome and other browsers in which the menu used to work properly). I tested on the latest version of Firefox for Mac and testing for IE using the Adobe browser lab.

Here's what happens:

The menu is completely useless in all versions of Internet Explorer.

In Firefox the menu seems to work fine except the menu under flash items then disappear a site navigation very frustrating.

Here is the site: http://oregapet.com/

And here's my sections

@charset "UTF-8";
ul.MenuBarHorizontal {
          margin: 0;
          list-style-type: none;
          font-size: 80%;
          cursor: default;
          width:auto;
          font-family: Verdana, Geneva, sans-serif;
           [disabled]font: 11px;


          padding-top: 4px;
          font-weight: bold;
          padding-bottom: 2em;
}
ul.MenuBarActive {
          z-index: 1000;
}
ul.MenuBarHorizontal li {
          margin: 0;
          font-size: 100%;
          position: relative;
          text-align: left;
          cursor: auto;
          width: auto;
          float: left;
          background-color: #AAA;
          color: #FFF;
          padding-top: 0.3em;
          padding-right: 3.5em;
          padding-bottom: 0.3em;
          padding-left: 1em;
          min-height: 22px;
}
ul.MenuBarHorizontal ul {
          margin: 0;
          list-style-type: none;
          font-size: 90%;
          z-index: 1020;
          cursor: default;
          width: 0px;
          position: absolute;
          left: -1000em;
}
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible {
          left: auto;
}
ul.MenuBarHorizontal ul li {
          width: 15em;
          margin-left: -12px;
           [disabled]color: #FFF;


}
ul.MenuBarHorizontal ul ul {
          position: absolute;
          margin: -5% 0 0 95%;
}
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible {
          left: auto;
          top: 0px;
}
ul.MenuBarHorizontal ul {
          border: 0;
}
ul.MenuBarHorizontal a {
          display: block;
          cursor: pointer;
          background-color: #AAA;
          padding: 0.3em 0 0 0;
          color: #FFF;
          text-decoration: none;
}
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus {
          background-color: #AAA;
          color: #FFF;
}
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible {
          background-color: #AAA;
          color: #FFF;
}
ul.MenuBarHorizontal a.MenuBarItemSubmenu {
          background-repeat: no-repeat;
          background-position: 95% 50%;
          padding-top: 10px;
}
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover {
          background-repeat: no-repeat;
          background-position: 95% 50%;
          text-decoration: none;
}
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover {
          background-repeat: no-repeat;
          background-position: 95% 50%;
}
ul.MenuBarHorizontal iframe {
          position: absolute;
          z-index: 1010;
           [disabled]opacity:0.1;


           [disabled]filter:alpha(opacity=1);
  For IE8 and earlier 
}
 @media screen, projection {
ul.MenuBarHorizontal li.MenuBarItemIE {
          display: inline;
          f\loat: left;
          background: #FFF;
}
}

Thank you very much!

GRAMPS! Thank you very much. I really, really appreciate your help. In addition to your suggestion I changed all other instances of z-index that relate to the menu bar. I put them all to 10000 (more than the z-index of 1002 on the fadeslideshow.js). Now it works like a charm and is no longer hides behind the fadeslideshow. Yay!

Thanks to Nancy O. for his suggestion as well. For anyone having problems woth Spry Menu bar in IE and Firefox especialy: The Spry Menu Bar 2.0 version works much better than the previous version.

Melody

Spry Nav Bar
I have problems with my spry nav bar. Find works in IE7 but in Firefox, it's all crazy. Y at - it an easy solution to this? Thanks for any help.
Hello

Leave it to IE to make actually broken code. Firefox is standards
compatible browser.

Looks like something was stuck in the middle of one of the rules,
who changed the position of the bubble absolute link... He just made
crazy :-)
There are a few other things, too.

First of all, the mistake of collage. Change this:

UL. MenuBarVertical a: hover, ul. MenuBarVertical a: focus
{
background-color: #FFFFFF;
color: #FFF;
position: absolute;

background-image:
; text-align: left;
border-bottom-color: #ffffff;
border-right-color: #ffffff;
border-bottom-color: #ffffff;
border-left-color: #ffffff;
}

To do this:

UL. MenuBarVertical a: hover, ul. MenuBarVertical a: focus
{
background-color: #FFFFFF;
color: #FFF;
}

Can change this:

UL. MenuBarVertical
{
border: 1px solid #ffffff;
overflow: visible;
visibility: inherit;
z-index: auto;
white-space: normal;
Display: table-row;
}

To do this:

UL. MenuBarVertical
{
border: 1px solid #ffffff;
overflow: visible;
}

Then this:

UL. MenuBarVertical li
{
margin: 0;
padding: 0;
list-style-type: none;
do-size: 100%;
position: inherit;
text-align: left;
cursor: pointer;
Width: 9è;
background-color: #CFE0DA;
vertical-align: left;
}

To do this:

UL. MenuBarVertical li
{
margin: 0;
padding: 0;
list-style-type: none;
do-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
Width: 9è;
background-color: #CFE0DA;
vertical-align: left;
}

Take care
Tim

"Ema10" wrote in message
News:fu3k3h$QKO$1@forums. Macromedia.com...
> You can visit the Web site at www.hannahs.com. Check out the spry NAV
> bar
> in Firefox, I'm not sure how to describe it, I think it could
> be in
> hover, but the navigation bar does not work. It looks good and works
> fine
> In IE7. Thanks for your help
>

Whenever I type a search term in the navigation bar, firefox redirects me to a page of Web iis 7 blue screen

I tried resetting and reinstalling firefox. I also deleted my history of research completely. I also installed malware bytes to scan and remove potential malware. I currently have norton 360 and it found nothing. The search bar in the top right works fine. It is only when I try to enter a search term in the navigation bar it redirects me. Thanks in advance for your help.

Looks like you have a third-party program that has been on your search engine, home page, or the value default new tab page. Fortunately, this can be solved easily:
1. At the top of the Firefox window, click the Firefox (Tools menu in Windows XP), and then click Add-ons. Open the tab of the Add-ons Manager.
2. In the tab of the Add-ons Manager, select the Extensions Panel.
3. Select the toolbar you want to delete.
4. Click on the button Delete.
5. Click "Restart now" if it appears. Your tabs will be saved and restored after the restart.
After restarting Firefox, install the Reset search tool. This will remove the rest of the traces of this program to your Firefox.

For more information, please read delete a toolbar that has supported your Firefox or the home page search.

This corrects the problem? Let us know!

Fine-tuning a spry navigation bar

Similar Questions

Maybe you are looking for