Can't Center Text on Spry Menu in Safari & Firefox


hello all! having hard time centering text in block on spry menu. using dwcs3. looks fine in ie 7, not centered in safari & firefox. checked forum fix couldn't find any. hoping can help! pasted entire css below horizontal spry menu below. thanks! phillychris

 

 

@charset "utf-8"; /* sprymenubarhorizontal.css - version 0.6 - spry pre-release 1.6.1 */ /* copyright (c) 2006. adobe systems incorporated. rights reserved. */ /*******************************************************************************  layout information: describes box model, positioning, z-order  *******************************************************************************/ /* outermost container of menu bar, auto width box no margin or padding */ ul.menubarhorizontal {  margin: 0;  padding: 0;  list-style-type: square;  font-size: xx-small;  cursor: default;  width: inherit;  font-family: arial, helvetica, sans-serif;  margin-top: 0px;  clear: none;  text-align: center; } /* 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;  font-family: arial, helvetica, sans-serif;  font-size: xx-small; } /* menu item containers, position children relative container , fixed width */ ul.menubarhorizontal li {  margin: 0;  padding: 0;  list-style-type: none;  font-size: xx-small;  position: relative;  text-align: center ;  cursor: pointer;  width: 147px;  float: left;  font-family: arial, helvetica, sans-serif; } /* 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: xx-small;  z-index: 1020;  cursor: default;  width: 8.2em;  position: absolute;  left: -1000em;  font-family: arial, helvetica, sans-serif; } /* submenu showing class designation menubarsubmenuvisible, set left auto comes onto screen below parent menu item */ ul.menubarhorizontal ul.menubarsubmenuvisible {  left: auto; } /* menu item containers same fixed width parent */ ul.menubarhorizontal ul li {  width: 8.2em;  font-family: arial, helvetica, sans-serif;  font-size: xx-small; } /* submenus should appear overlapping right (95%) , (-5%) */ ul.menubarhorizontal ul ul {  position: absolute;  margin: -5% 0 0 95%;  font-family: arial, helvetica, sans-serif;  font-size: xx-small; } /* submenu showing class designation menubarsubmenuvisible, set left 0 comes onto screen */ ul.menubarhorizontal ul.menubarsubmenuvisible ul.menubarsubmenuvisible {  left: auto;  top: 0;  font-family: arial, helvetica, sans-serif;  font-size: xx-small; } /*******************************************************************************  design information: describes color scheme, borders, fonts  *******************************************************************************/ /* submenu containers have borders on sides */ ul.menubarhorizontal ul {  border: 1px solid #ccc;  font-family: arial, helvetica, sans-serif;  font-size: xx-small; } /* menu items light gray block padding , no text decoration */ ul.menubarhorizontal {  display: inline;  cursor: pointer;  background-color: #eee;  padding: 0.5em 0.75em;  color: #333;  text-decoration: none;  font-size: xx-small;  font-family: arial, helvetica, sans-serif;  text-align: center; } /* menu items have mouse on or focus have blue background , white text */ ul.menubarhorizontal a:hover, ul.menubarhorizontal a:focus {  background-color: #33c;  color: #fff;  font-size: xx-small;  font-family: arial, helvetica, sans-serif;  text-align: center; } /* menu items open submenus set menubaritemhover blue background , white text */ ul.menubarhorizontal a.menubaritemhover, ul.menubarhorizontal a.menubaritemsubmenuhover, ul.menubarhorizontal a.menubarsubmenuvisible {  background-color: #33c;  color: #fff;  font-family: arial, helvetica, sans-serif;  font-size: xx-small;  text-align:center; } /*******************************************************************************  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%;  font-family: arial, helvetica, sans-serif;  font-size: xx-small;  font: 100% verdana, arial, helvetica, sans-serif; } /* 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: hacks below should not changed unless expert  *******************************************************************************/ /* 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;  } } .onecolelsctrhdr #container #footer #menubar2 li {  font-size: 100%; } .onecolelsctrhdr #container #header #menubar1 {  font-size: xx-small;  font-family: arial, helvetica, sans-serif; } .onecolelsctrhdr #container #header #menubar1 {  text-align: center;  font-family: arial, helvetica, sans-serif;  font-size: xx-small; } .onecolelsctrhdr #container #footer #menubar2 {  color: #000000;  font-style: normal;  font-size: .75em;  font-family: arial, helvetica, sans-serif; } .menubarhorizontal {  font-family: arial, helvetica, sans-serif;  font-size: xx-small;  text-align: center; }   

chris,

 

could post html of menu bar.  i'm assuming it's list.  me better grasp of it.  if it's in div post whole div.



More discussions in Dreamweaver support forum


adobe

Comments