SpryMenu shows proper in IE & FireFox but Not Chrome
greetings,
the site i'm building having issue sprymenu showing border lines around first 2 sprymenu items in chrome, fine in both ie , firefox. don't know if makes difference first menu item single link second has submenu. items after merely single links. found odd border affects first 2 items rest fine. if can shed light on this, appreciated.
spry css below.
thank time , assistance,
-r
ul.menubarhorizontal
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
text-transform: capitalize;
color: #000;
background-color: #6c0;
text-align: center;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-color: #ccc;
}
/* set active menu bar class, setting z-index accomodate ie rendering bug: http://therealcrisp.xs4all.nl/meuk/ie-zindexbug.html */
ul.menubaractive
{
z-index: 1000;
}
/* menu item containers, position children relative container , fixed width */
ul.menubarhorizontal li
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: center;
cursor: pointer;
width: 7em;
float: left;
background-color: #6c0;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-color:#000000;
}
/* submenus should appear below parent (top: 0) higher z-index, off left side of screen (-1000em) */
ul.menubarhorizontal ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 8.2em;
position: absolute;
left: -1000em;
}
/* submenu showing class designation menubarsubmenuvisible, set left auto comes onto screen below parent menu item */
ul.menubarhorizontal ul.menubarsubmenuvisible
{
left: auto;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
}
/* menu item containers same fixed width parent */
ul.menubarhorizontal ul li
{
border-color: black;
width: 8.2em;
}
/* submenus should appear overlapping right (95%) , (-5%) */
ul.menubarhorizontal ul ul
{
position: absolute;
margin: -5% 0 0 95%;
}
/* submenu showing class designation menubarsubmenuvisible, set left 0 comes onto screen */
ul.menubarhorizontal ul.menubarsubmenuvisible ul.menubarsubmenuvisible
{
left: auto;
top: 0;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
}
/*******************************************************************************
design information: describes color scheme, borders, fonts
*******************************************************************************/
/* submenu containers have borders on sides */
ul.menubarhorizontal ul
{
/*border: thin solid #000;*/
width: 149px;
}
/* menu items light gray block padding , no text decoration */
ul.menubarhorizontal a
{
display: block;
cursor: pointer;
background-color: #669900;
color: #000;
text-decoration: none;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: groove;
border-right-style: groove;
border-bottom-style: groove;
border-left-style: groove;
text-transform: capitalize;
}
/* menu items have mouse on or focus have grey background */
ul.menubarhorizontal a:hover, ul.menubarhorizontal a:focus
{
background-color: #6c0;
text-align: center;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
}
/* menu items open submenus set menubaritemhover grey background */
ul.menubarhorizontal a.menubaritemhover, ul.menubarhorizontal a.menubaritemsubmenuhover, ul.menubarhorizontal a.menubarsubmenuvisible
{
background-color: #c0c0c0;
color: #000;
}
/*******************************************************************************
submenu indication: styles if there submenu under given menu item
*******************************************************************************/
/* menu items have submenu have class designation menubaritemsubmenu , set use background image positioned on far left (95%) , centered vertically (50%) */
ul.menubarhorizontal a.menubaritemsubmenu
{
background-image: url(sprymenubardown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
}
/* menu items have submenu have class designation menubaritemsubmenu , set use background image positioned on far left (95%) , centered vertically (50%) */
ul.menubarhorizontal ul a.menubaritemsubmenu
{
background-image: url(sprymenubarright.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* menu items open submenus have class designation menubaritemsubmenuhover , set use "hover" background image positioned on far left (95%) , centered vertically (50%) */
ul.menubarhorizontal a.menubaritemsubmenuhover
{
background-image: url(sprymenubardownhover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* menu items open submenus have class designation menubaritemsubmenuhover , set use "hover" background image positioned on far left (95%) , centered vertically (50%) */
ul.menubarhorizontal ul a.menubaritemsubmenuhover
{
background-image: url(sprymenubarrighthover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/*******************************************************************************
browser hacks
*******************************************************************************/
/* hack ie: make sure sub menus show above form controls, underlay each submenu iframe */
ul.menubarhorizontal iframe
{
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
}
/* hack ie: stabilize appearance of menu items; slash in float keep ie 5.0 parsing */
@media screen, projection
{
ul.menubarhorizontal li.menubaritemie
{
display: inline;
f\loat: left;
background: #fff;
}
}
any chance post link code in action?
it's easier see problem might actual page, vs code snippets pasted here.
if site's not ready, creating test folder post works great. delete test folder after problem solved.
More discussions in Dreamweaver support forum
adobe
Comments
Post a Comment