PDA

View Full Version : Spry BG Color Problem - Correct in Adobe BL/Preview in browser, not uploaded


dbepp
06-24-2011, 07:28 PM
I have having an issue with getting the black background to display in my Horizontal Spry Menu Bar.. It appears just fine in Adobe Browser Labs and the Preview in Dreamweaver.. But when I uploaded it, the black disappeared. Though it does display for the sub-menus..

I've included the CSS below and you can see the problem at www.onlytrimax.com/test_index.html (http://www.onlytrimax.com/test_index.html)

Please Help!


ul.MenuBarHorizontal ul
{
border: 1px solid #CCC;
}

ul.MenuBarHorizontal a
{
display: block;
cursor: pointer;
background-color: #000;
color: #FFF;
text-decoration: none;
text-align: center;
margin-top: 2px;
margin-bottom: 2px;
padding-top: 0.5em;
padding-right: .75em;
padding-bottom: 0.5em;
padding-left: .75em;
}

ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
background-color: #000;
color: #09F;
}

ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
background-color: #000;
color: #09F;
}

edbr
06-25-2011, 01:23 AM
ul.MenuBarHorizontal a {
color: #FFFFFF;
cursor: pointer;
display: inherit;
padding-bottom: 0.5em;
padding-left: 0.75em;
padding-right: 0.75em;
padding-top: 0.5em;
text-decoration: none;
}

theres your problem

dbepp
06-27-2011, 07:50 PM
ul.MenuBarHorizontal a {
color: #FFFFFF;
cursor: pointer;
display: inherit;
padding-bottom: 0.5em;
padding-left: 0.75em;
padding-right: 0.75em;
padding-top: 0.5em;
text-decoration: none;
}

theres your problem

I apologize, but I'm still not sure where the problem lies. Do I need to change some of the properties in my CSS to your post above? I tried doing so and it didn't work..
Thanks again for your help!

DWcourse
06-27-2011, 11:03 PM
I think he's pointing out that the CSS you posted is not what we're seeing on your link. Did you upload you're SpryMenuBarHorizontal.css file after you made changes?

dbepp
06-28-2011, 08:43 PM
I see what you mean now, thanks. Now I have been able to change the background color, the box width will not extend the full 900px. It appears as if each box expands to the 180px when I hover over, but not in its "normal" state. I've uploaded the revised files to www.onlytrimax.com/test_index.html (http://www.onlytrimax.com/test_index.html)
The SpryMenuBarHorizontal.css is below. Any Ideas?

/************************************************** *****************************

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: left;
cursor: pointer;
width: 180px;
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: 180px;
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: 180px;
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
{
position: absolute;
margin: -5% 0 0 95%;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
left: auto;
top: 0;
}

/************************************************** *****************************

DESIGN INFORMATION: describes color scheme, borders, fonts

************************************************** *****************************/

/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
{
border: 1px solid #CCC;
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
display: block;
cursor: pointer;
background-color: #000;
color: #FFF;
text-decoration: none;
text-align: center;
margin-top: 2px;
margin-bottom: 2px;
padding-top: 0.5em;
padding-right: 0.75em;
padding-bottom: 0.5em;
padding-left: 0.75em;
}
/* 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: #000;
color: #09F;
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
background-color: #000;
color: #09F;
}

/************************************************** *****************************

SUBMENU INDICATION: styles if there is a submenu under a given menu item

************************************************** *****************************/

/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}

dbepp
06-28-2011, 08:58 PM
I think he's pointing out that the CSS you posted is not what we're seeing on your link. Did you upload you're SpryMenuBarHorizontal.css file after you made changes?

I uploaded the SpryMenuBarHorizontal.css file after the changes where made (I'm pretty sure).. I'm working hard trying to learn but I could have made a mistake somewhere!! The link above is to my first site.. hopefully many more to come.
I definitely appreciate the help.

Should I make a new post for the new issue? I'm not sure of forum etiquette

DWcourse
06-29-2011, 04:49 AM
Well, on the page you linked to this rule has the items set to 175px. Did you upload the revised style sheet?

ul.MenuBarHorizontal li {
color: #FFFFFF;
cursor: pointer;
float: left;
font-size: 100%;
height: 32px;
list-style-type: none;
position: relative;
visibility: visible;
width: 175px;
}

dbepp
06-29-2011, 03:47 PM
Well, on the page you linked to this rule has the items set to 175px. Did you upload the revised style sheet?

ul.MenuBarHorizontal li {
color: #FFFFFF;
cursor: pointer;
float: left;
font-size: 100%;
height: 32px;
list-style-type: none;
position: relative;
visibility: visible;
width: 175px;
}
I did.. And I've definitely learned that I can work on this for so many hours of the day!
But, it looks like I've fixed the issues (with your help). The only thing now is to figure out how to set the width of the submenus and when I hover over them.. they seem to expand by a few pixels when I do so..

ul.MenuBarHorizontal
{
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
margin: 0px;
}

ul.MenuBarActive
{
z-index: 1000;
}

ul.MenuBarHorizontal li
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 180px;
float: left;
}

ul.MenuBarHorizontal ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 100%;
position: absolute;
left: -1000em;
}

ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
left: auto;
}

ul.MenuBarHorizontal ul li
{
width: 100%;
}

ul.MenuBarHorizontal ul ul
{
position: absolute;
margin: -5% 0 0 95%;
}

ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
left: auto;
top: 0;
}

/************************************************** *****************************

DESIGN INFORMATION: describes color scheme, borders, fonts

************************************************** *****************************/


ul.MenuBarHorizontal ul
{
border: 1px solid #CCC;
}

ul.MenuBarHorizontal a
{
display: block;
cursor: pointer;
background-color: #000;
color: #FFF;
text-decoration: none;
text-align: center;
margin-top: 2px;
margin-bottom: 2px;
padding-top: 0.5em;
padding-right: 0.75em;
padding-bottom: 0.5em;
padding-left: 0.75em;
}

ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
background-color: #000;
color: #09F;
}

ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
background-color: #000;
color: #09F;
}

/************************************************** *****************************

SUBMENU INDICATION: styles if there is a submenu under a given menu item

************************************************** *****************************/


ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}

ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}

ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}

ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}

DWcourse
06-29-2011, 04:42 PM
Now get rid of the right-margin in this rule to prevent the link shifting on hover:

ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible {
color: #0099FF;
margin-right: -10px;
width: auto;
}

dbepp
06-29-2011, 05:34 PM
Now get rid of the right-margin in this rule to prevent the link shifting on hover:

ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible {
color: #0099FF;
margin-right: -10px;
width: auto;
}

The crazy thing is that the rule does not show that there is a margin-right of -10px... should I set that to 0px anyway?

DWcourse
06-29-2011, 05:59 PM
The crazy thing is that the rule does not show that there is a margin-right of -10px... should I set that to 0px anyway?

No the crazy thing is that your CSS file at http://www.onlytrimax.com/SpryAssets/SpryMenuBarHorizontal.css does show it:

/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
color: #09F;
margin-right: -10px;
width: auto;
}


Make sure you are looking under the DESIGN INFORMATION section of your stye sheet and, after you change it, make sure it's uploaded by going to the style sheet link above and confirming it.

dbepp
06-29-2011, 06:52 PM
I was working in the split view in Dreamweaver, manually working on the SpryMenuBarHorizontal style sheet.. I was doing something wrong because the css I have been posting in this thread had been copied from the split view after I uploaded it. Apparently I wasn't uploading it properly. Anyway, I opened the style sheet in it's own window and noticed the changes that you suggested. After correcting them I uploaded the style sheet and double checked.. finally looking good!
Thanks!