TEXT ALIGN PROBLEM UNORDERED LIST SPRY PANEL

When a sentence is too long for its container it breaks to the line below
In a vertical unordered list with square bullets how do I get the word below
to line up with its parent sentence above? just like in this sentence. Reference below.

We would need to see your CSS & HTML code.
My guess is that you removed default settings (margins & padding) from your unordered lists -- perhaps with a reset CSS.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Similar Messages

Text Align problem

I clicked the text menu and then I clicked on align. I
highlighted the text and the bar but I tried to center the text on
the bar but it doesn't work correctly. Can anybody help me?
http://server6.theimagehosting.com/image.php?img=fireworks.cd6.gif[L=picture

bobau wrote:
> I clicked the text menu and then I clicked on align. I
highlighted the text and
> the bar but I tried to center the text on the bar but it
doesn't work
> correctly. Can anybody help me?
>
>
http://server6.theimagehosting.com/image.php?img=fireworks.cd6.gif
Is that a button you created in the button editor? You need
to center
align it in the button editor. If not, then select the button
shape
first, then the text, and finally choose Modify > Align
> center
Vertical, and Modify > Align > Horizontal. If you are
using the Align
panel, select the button shape and click on the Anchors
button. Press
shift ans select the text. Click in the align center and
vertical
buttons.
Linda Rathgeber [PVII] *Adobe Community Expert-Fireworks*
http://www.projectseven.com
Fireworks Newsgroup:
news://forums.projectseven.com/fireworks/
CSS Newsgroup: news://forums.projectseven.com/css/
Design Aid Kits:
http://www.webdevbiz.com/pwf/index.cfm

How do I get my bullets to go with the text in an unordered list?

When I indent my text, the bullets stay put. It looks fine in Design View, but doesn't work in a browser. Here is my code:
#brtext p {
font-size: 10px;
margin: 0px;
#brtext li {
font-size: 10px;
padding: 0px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
text-indent: 20px;
#brtext ul {
font-size: 10px;
padding: 0px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
text-indent: 20px;
Please help!

Links to CSS Styled Lists:
http://www.alistapart.com/articles/taminglists/
http://css.maxdesign.com.au/listamatic/
http://www.w3schools.com/Css/css_list.asp
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.com/blogspot.com

Table Cell Renderer Text Alignment Problem

Hallo !
I got a JTable with cells containing text and icons. I would like to have the icon on the top and the text on the bottom, but the renderer aligns always the text on the right of the icon.
I made a custom renderer extending DefaultTableCellRenderer and there i wrote setVerticalTextPosition(BOTTOM);, but it does'nt work in any way (i tried in many ways. I also used html for the text, but it's the same).
More exactly the code is
public class MyRenderer extends DefaultTableCellRenderer{
public java.awt.Component getTableCellRendererComponent(JTable table,Object value,boolean isSelected,boolean hasFocus,int row,int column) {
        super.getTableCellRendererComponent(table,""/*value*/,isSelected,hasFocus,row,column);
FieldRenderer renderedValue=(FieldRenderer)value;
//setHorizontalAlignment(CENTER);
//setVerticalAlignment(CENTER);
setVerticalTextPosition(BOTTOM);
setText(renderedValue.getRepresentation());
setToolTipText(renderedValue.getRepresentation());
setIcon(renderedValue.getIcon());
        return this;
}where FieldRenderer is an object containing icon, text, etc.
Can anyone help ?
Thanks in advance, Massimo
}

Setting a renderer for first column:
assetTable.getColumnModel().getColumn(1).setRenderer(tableRenderer);Your custom renderer must honor the selection color and border or otherwise the first column will not look selected. You should subclass DefaultTableCellRenderer:
public class AssesTableRenderer extends DefaultTableCellRenderer {
public Component getTableCellRendererComponent(...) {
    // default renderer uses a label
    JLabel label = (JLabel)super.getTableCellRendererComponent(...);
    // decide icon to use
    Icon icon = ...;
    label.setIcon(icon);
   return label;
}

Horizontal Spry Submenu Alignment Problems

I am experiencing a massive emotional low with not being able to figure this problem out.
I have incorporated a Spry menu in the site I'm building, but I'm having trouble getting the
drop down submenu to align properly in Firefox/ Chrome AND IE8
What seems to be the heart of the problem is the CSS for the Spry class "ul.MenuBarHorizontal ul.MenuBarSubmenuVisible"
By default, it's set to this:
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto;
If I leave it like this, the submenus drop down where I want them to (upon rollover) - with the left edge
of the submenu aligned with the parent button (ul li item). However this only works properly in Chrome / Firefox.
If I use IE8 to look at the site. The submenus drop down such that the left edge of submenu aligns
with the the center of the partent button (ul li item) upon rollover.
I can get IE to overcome this alignment issue by adding "position:relative" to the CSS for "ul.MenuBarHorizontal ul.MenuBarSubmenuVisible"
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto;
position:relative
After making this addition, IE8 works fine, and the submenus align to the left. But now, if I browse in Chrome
or Firefox, the 1px border of the submenus do not appear on the left, right and bottom edges. It's only there
for the top edge???!!!??
It seems that the property listed below gets compromised and does not work if I add the "position:relative" attribute
to "ul.MenuBarHorizontal ul.MenuBarSubmenuVisible"
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border: 1px solid #CCC;
If anyone can offer and explanation to this I would be hugely appreciative.
Thanks so much,
Hosanna_Bizarre

Please find the html and css attached.
Yes, I have used text-align: center on the main menu.
Like I say, adding position:relative to the css for "ul.MenuBarHorizontal ul.MenuBarSubmenuVisible"
fixes the problem for IE and it displays left justified submenu items underneath a center-aligned
main menu button.
Problem is the submenu borders do not display properly any more for Chrome / Firefox.
Thanks
H

Unordered list bullets and Spry Accordion widget

In all browsers except IE (surprise, surprise!), the page
works fine. Otherwise the bullets in my unordered list appear at
the bottom of the multiline text they are associated with. I
haven't had this problem in similar pages not using the accordion
widget.
Please have a look:
http://www.yale.edu/faith/rc-fwl.htm
vs.
http://www.yale.edu/faith/rc-esw.htm
Thanks,
Gary

<div class="AccordionPanelContent">Castaway the: Restaurant<br />
              1250 Harvard Rd.<br />
              Burbank, CA 91501<br />
              - www.castawayrestaurant.com - (818) 848-6691</p>
Oops!
Missing the opening <p>
I didn't find it, the validator did.
Martin

Need Quick Help with Unordered List in Table (text too small)

Hi,
I have a table with 2 unordered lists and the font size is smaller than what I need.
I'm using CSS and have checked all of my font sizes and I have all of what I consider my normal text set to 12.
When my client views the page on his browser, the unordered lists appears to be about a size 8. I checked on my cell phone and I see what he's talking about.
I set the <ul> and <li> to font size 12, but the problem still exists.
It's almost like the table is scaling the text down.
I worked all night trying to figure out what I've done wrong (newbie ) and I can't fix it and my client is waiting!
Here's the page: http://www.precisioncleaning.com/expert_witness_services.html
Please help!
Thanks,
Kathy

I tried adding a new CSS rule to the table font, but it didn't work.
I also edited the <tr> and <td> but still didn't work.
I think something higher up is messing the table up. I don't know anything about specificity or how to see who has the power to overwrite the table.
Do you?

Problem with text alignment in the panelheader

Hi,
We are using <af:panelheader> in our jspx file. We are using custom CSS for alignments. The text we are displaying inside this panel header is top-aligned by default. But we want to align this text to middle. In our custom CSS file, we tried with different options to align this text to middle(ex: vertical-align:text-bottom;caption-side: bottom;...). Please guide me on this like which option to use.
Our CSS code for panelheader is this:
.AFHeaderLevelOne,.x1x,H1.af_panelHeader,H1.x20,H1.af_showDetailHeader,H1.x21,.af_messages_header,.x24,.p_OraProductBrandingCompactText,.x5b,.PortletHeaderText,.x6n,.PortletHeading1,.x6o,.PortletSubHeaderText,.x6u,.portlet-section-header,.x73,.portlet-section-subheader,.x77,.portlet-table-header,.x7a,.portlet-table-subheader,.x7e {caption-side: bottom; background-color: rgb(233,233,209);vertical-align:text-bottom;white-space: nowrap; height: 37px; font-family:Tahoma;font-size:17px;color:#9c7200;margin-bottom:0px;margin-top:0px;font-weight:bold}
and panelHeader code inside jspx is this:
<afh:rowLayout id="rowLayout1" width="100%" >
<afh:cellFormat columnSpan="4" height="37">
<af:panelHeader text="Add Law Firm"/>
</afh:cellFormat>
</afh:rowLayout>
Thanks & Regards,
Yeshwanth.

Hi,
try
.AFHeaderAlias{vertical-align:text-bottom; white-space: nowrap; height: 37px; font-family:Tahoma;font-size:17px;color:#9c7200;margin-bottom:0px;margin-top:0px;font-weight:bold}
or
h1.x20{vertical-align:text-bottom; white-space: nowrap; height: 37px; font-family:Tahoma;font-size:17px;color:#9c7200;margin-bottom:0px;margin-top:0px;font-weight:bold}
both work
Frank

Spry bar text alignment

I need help with aligning text in main spry bar menu. Using DW 5.5, I have a 7 bank bar and 2 have 2 lines, remainder have 1. I need to BOTTOM align everything. I've look through forums, help menus, and u-tube and can not find this answer.
I would also like to not have fixed widths, but widths varied per text length, but when I do that, obviously the 2 lined text banks turn into one line.

To give you an idea of what I would do, have a look at the following by copying and pasting into a new document.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Therapy To Go Home Page</title>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet">
<style>
    margin: 0;
    padding: 0;
html {
    background: #FFF;
    height: 100%;
    color: #000;
    font: 100% Verdana, Geneva, sans-serif;
body {
    background: #FFC;
    width: 800px;
    margin: auto;
    font-size: 0.85em;
#header {
    height: 148px;
    background: #C2A4FF;
#nav {
    background: #EEE;
    height: 3.6em;
#aside {
    width: 197px;
    float: left;
    padding: 20px;
#article {
    margin-left: 240px;
    padding: 20px;
    background: #C2A4FF;
ul.MenuBarHorizontal li {
    font-size: 1.05em;
    width: auto;
    text-align: center;
ul.MenuBarHorizontal a {
    background-color: #EEE;
    padding: 0.5em 1.1em;
    color: #333;
</style>
</head>
<body>
<div id="header">
</div>
<div id="nav">
<ul id="MenuBar1" class="MenuBarHorizontal">
    <li><a href="#"><br>Home</a>    </li>
    <li><a href="#"><br>Services</a></li>
    <li><a href="#">Benefits &<br>Contraindications</a></li>
    <li><a href="#">Common <br>Q&A</a></li>
    <li><a href="#"><br>Pricing/Hours</a></li>
    <li><a href="#">Contact/About<br>Melanie</a></li>
    <li><a href="#"><br>Resources</a></li>
</ul>
</div>
<div id="aside">
<h2>This is the sidebar</h2>
</div>
<div id="article">
<h1>This is the main article</h1>
<p>Consectetur adipisicing elit, in reprehenderit in voluptate excepteur sint occaecat. Ullamco laboris nisi ut enim ad minim veniam, velit esse cillum dolore. Mollit anim id est laborum. Sed do eiusmod tempor incididunt qui officia deserunt cupidatat non proident.</p>
<p>Quis nostrud exercitation in reprehenderit in voluptate lorem ipsum dolor sit amet. Ut aliquip ex ea commodo consequat. Velit esse cillum dolore mollit anim id est laborum. Consectetur adipisicing elit.</p>
<p>Ut enim ad minim veniam, ullamco laboris nisi duis aute irure dolor. Eu fugiat nulla pariatur. Qui officia deserunt in reprehenderit in voluptate cupidatat non proident.</p>
</div>
<script>
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1");
</script>
</body>
</html>
Gramps

Problem with One column Unordered list.

Help me out !!!
I have a "one column unordered list" as my report template. The query will return atleast 5 rows at any given point of time. The page shows only 3 records. I tried modifying "Number of Rows" attributes etc., nothing works.
Let me know what I'm doing wrong or how to fix it.
Thanks
- Richard

Thanks for replying, Scott
Here is the app http://htmldb.oracle.com/pls/otn/f?p=19793:1
I want to display only 4 rows (table has around 10 rows). I couldn't display more than 2. If I change the template, then everything works fine. Its just with the "One Column Unordered List" template that is not working.
Thanks.
- Richard.

Unordered List Problem

I'm trying to create a bulleted (unordered) list in
Dreamweaver MX. For example:
List Title
* First Bulleted list
@ Lower Level List
: Lower Level List
I don't see anyway to do this without having a space (hard
return) between each line, which I don't want. I've tried editing
code and googled for a solution to no avail. Any suggestions? If
I've not been clear explaining what I'm trying to do please let me
know.

You do the hard returns first - then select the elements and
make it an UL
<p>List Title</p>
<p>Item One</p>
<p>Item Two</p>
<p>Item Two-One</p>
<p>Item Two-Two</p>
Turns into this:
<p>List Title</p>
<ul>
<li>Item One</li>
<li>Item Two
<ul>
<li>Item Two-One</li>
<li>Item Two-Two</li>
</ul>
</li>
</ul>
Ken Ford
Adobe Community Expert - Dreamweaver
Fordwebs, LLC
http://www.fordwebs.com
"depawl" <[email protected]> wrote in
message
news:fp9nmp$s27$[email protected]..
> I'm trying to create a bulleted (unordered) list in
Dreamweaver MX. For
> example:
> List Title
> * First Bulleted list
> @ Lower Level List
> : Lower Level List
> I don't see anyway to do this without having a space
(hard return) between
> each line, which I don't want. I've tried editing code
and googled for a
> solution to no avail. Any suggestions? If I've not been
clear explaining
> what
> I'm trying to do please let me know.
>

Problem with Horizontal Spry Menu

Hi,
I have trawled through the forum to see if I can find an answer to my problem, but couldnt locate one, so this is my first post.
I recently built this website for my wifes business and was using a simple menu bar without any dropdowns, just to get the site up and running (healingthreads.com.au). Am now looking to do some enhancements and was looking to use a Spry Horizontal Menu Bar. All was going well in that I was able to insert the menu bar and get it in the right position, however the dropdowns below the top level items (ie. Item 1.1, Item 1.2 etc) are getting hidden behind one of the other DIV's and despite trying changing z-index values, am still not able to get the dropdowns to display in front of the main DIV. Have run out of ideas and am hoping the wisdom of the forum will be able to assist. I have the same problem on the Index page as well as the other pages on the site. The website is fairly basic at the moment and is simply promoting her courses and products.
Unfortunately am not able to post live code to a server for you to test on, so best that I can do is post the code for a page and for the CSS sheets. I have left the standard Spry code in place in the source code to show that the problem exists without and fancy changes that I have made to the Spry code. I have also removed the z-index properties that I had been playing around with. So, what I am attaching is the basic code that has the problem.
Hope someone can help.
Here is the source code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "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" />
<meta name="description" content="Healing Threads is an innovative practice on the NSW Central Coast offering workshops, group work, private consultations and also has a range of aromatherapy and handwoven products for sale" />
<meta name="keywords" content="healing journeys, healing, transpersonal counselling, private consultations, aromatherapy, handwoven, workshops" />
<title>Healing_Threads</title>
<link href="Styles/healing_threads.css" rel="stylesheet" type="text/css" />
<style type="text/css">
</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body
<div id="container">
<h1>Healing Threads: Healing Journeys, Group Work and Private Consultations</h1>
<div id="Banner"><img src="images/HT_Banner_2.gif" alt="Banner" width="800" height="125" border="0" usemap="#Map2" />
    <map name="Map2" id="Map2">
      <area shape="rect" coords="67,12,770,113" href="index.html" />
    </map>
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
        <ul>
          <li><a href="#">Item 1.1</a></li>
          <li><a href="#">Item 1.2</a></li>
          <li><a href="#">Item 1.3</a></li>
        </ul>
      </li>
      <li><a href="#">Item 2</a></li>
      <li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
        <ul>
          <li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
            <ul>
              <li><a href="#">Item 3.1.1</a></li>
              <li><a href="#">Item 3.1.2</a></li>
            </ul>
          </li>
          <li><a href="#">Item 3.2</a></li>
          <li><a href="#">Item 3.3</a></li>
        </ul>
      </li>
      <li><a href="#">Item 4</a></li>
    </ul>
</div>
<div id="background_image">
    <div id="Prod_Image"><img src="images/HT-Web-Site-HP-Side-ImageV3.jpg" width="200" height="470" alt="Products & Services" /></div>
    <div id="main_text">
      <h5><a href="Workshops.html" class="htlinks">Healing Journeys</a></h5>
<p>Combining story, meditation, art and ritual to help tap into your own inner wisdom for self growth and healing.</p>
      <h4><a href="Groups.html" class="htlinks">Group Work</a></h4>
      <p>A range of weekly group activities exploring story, dreams, masks and more.</p>
      <h4><a href="Consultations.html" class="htlinks">Private Consultations</a></h4>
      <p>Using a range of creative processes, including meditation, art, movement, story and ritual, for the best healing outcome for clients.</p>
      <h4><a href="Oils&Sprays.html" class="htlinks">Aromatherapy Products</a></h4>
      <p>sCentred Therapies range of anointing oils, clearing sprays and perfumes that can be used to enhance meditation, ceremony and pleasure.</p>
      <h4><a href="Handwoven.html" class="htlinks">Handwoven Items</a></h4>
      <p>Handwoven products such as throws, wraps and scarves, created from stunning wools, silks and cottons.</p>
    </div>
</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
Here is the main CSS sheet
@charset "UTF-8";
/* CSS Document */
#container {
width: 968px;
background: #CCCCFF;
margin: 0 auto;
padding-left: 0px;
padding-right: 0px;
overflow: scroll;
height: 1200px;
#Banner {
width: 800px;
background: #CCCCFF;
margin: 0 auto;
padding-left: 0px;
padding-right: 0px;
overflow: hidden;
#background_image {
background-image: url(../images/Coloured_Threads_Web.jpg);
background-repeat: no-repeat;
position: relative;
height: 533px;
width: 800px;
margin: 0 auto;
overflow: visible;
#background_image_ws {
background-image: ;
background-repeat: no-repeat;
position: relative;
height: 1000px;
width: 800px;
margin: 0 auto;
overflow: visible;
#main_text {
background-color: #FFF;
width: 500px;
margin-left: 0px;
position: absolute;
right: 0px;
bottom: 0px;
top: 52px;
left: 269px;
height: 470px;
#main_text h4 {
color: #7F7EB1;
font-family: Arial, Helvetica, sans-serif;
margin-left: 6px;
#main_text p {
color: #7F7EB1;
font-size: 14px;
font-family:Arial, Helvetica, sans-serif;
margin-left: 6px;
#main_text h5 {
color: #7F7EB1;
font-size: 16px;
font-family:Arial, Helvetica, sans-serif;
margin-left: 6px;
#Prod_Image {
background-color: #FFF;
height: 300px;
width: 200px;
position: absolute;
top: 53px;
#Prod_Image,#main_text {
float: left;
#Prod_Image {
margin-left: 35px;
#main_text_ws {
background-color: #FFF;
width: 600px;
height: 1000px;
margin-left: 0px;
position: absolute;
right: 0px;
bottom: 0px;
top: 0px;
left: 200px;
#Prod_Image_ws {
background-color: #FFF;
height: 1000px;
width: 200px;
position: absolute;
top: 0px;
#Prod_Image_ws,#main_text_ws {
float: left;
#main_text_ws h4 {
color: #7F7EB1;
font-family: Arial, Helvetica, sans-serif;
margin-left: 6px;
font-size: 16px;
#main_text_ws p {
color: #7F7EB1;
font-size: 14px;
font-family:Arial, Helvetica, sans-serif;
margin-left: 6px;
#main_text_ws h5 {
color: #7F7EB1;
font-size: 14px;
font-family:Arial, Helvetica, sans-serif;
margin-left: 6px;
#background_image_ws #main_text_ws p a {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #7f7eb1;
a.htlinks:link {color:#7f7eb1;}
a.htlinks:visited {color:#7f7eb1;}
a.htlinks:hover {color:#0d004c;}
#container h1 {
position: absolute;
top: -500px;
Here is the Spry CSS Sheet - note: I have not modified this in any way.
@charset "UTF-8";
/* 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: left;
cursor: pointer;
width: 8em;
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: 8.2em;
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: 8.2em;
/* 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: #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.MenuBarHorizontal a:hover, ul.MenuBarHorizontal 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.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal 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.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%;
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);
/* 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.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF;
Am sure that this is something quite basic that I have missed, however as mentioned above, am out of ideas.
Looking forward hopefully to your helpful suggestions.
Regards,
Healing Threads

Gramps,
Thanks for the prompt reply, greatly appreciated here in Sydney.
Re your response. When I preview the page in both Safari and Firefox, the dropdowns are not visible, just the top layer Items.
Dont understrand what is going on.
Am I doing something wrong when I am previewing the file?
RThanks,
Healing Threads.

Problems with Vertical Spry in IE

Hi,
I am having this problem viewing Vertical Spry menu only on internet explorer. It's ok on google chrome but it messes up on the internet explorer.
I would highly appreciate if someone could help me sort this out please.
The link to my website.
http://www.hbmrc.org/index-1WIP.html
a@charset "UTF-8";
/* SpryMenuBarVertical.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, a fixed width box with no margin or padding */
ul.MenuBarVertical
margin: 0;
padding: auto;
list-style-type: circle;
font-size: 100%;
cursor: default;
width: 13em;
border-top-color: #edeeee;
border-top-style:groove;
border-bottom-color:#313132;
border-bottom-style:groove;
border-left-color:#cbcccd;
border-left-style:groove;
border-right-color:#3d3d3e;
border-right-width: thin;
border-right-style:groove;
/* 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: auto;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 13em;
background-color: #FFFFFF;
overflow: visible;
    background-image: url(../images/sidebarbk.jpg);
/* 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: 12em;
left: -1000em;
top: 6px;
ul.MenuBarHorizontal li ul li{
    clear: left;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarVertical ul.MenuBarSubmenuVisible
left: -11px;
border-top-color: #edeeee;
border-top-style:groove;
border-bottom-color:#313132;
border-bottom-style:solid;
border-bottom-style:groove;
border-left-color:#cbcccd;
border-left-style:groove;
border-right-color:#3d3d3e;
border-right-width: thin;
border-right-style:groove;
/* Menu item containers are same fixed width as parent */
ul.MenuBarVertical ul li
width: 12em;
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:#AECFF4;*/
background-image: url(../images/sidebarbk.jpg);
padding: 0.7em 0.75em ;
color: #000;
text-decoration: none;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarVertical a:hover
/*background-color: #777777;
color: #50cffc;*/
border-top-color: #edeeee;
border-top-style:groove;
border-bottom-color: #50cffc;
border-bottom-style: groove;
border-left-color:#cbcccd;
border-left-style:groove;
border-right-color:#3d3d3e;
border-right-width: thin;
border-right-style:groove;
padding: 0.45em 0.60em;
ul.MenuBarVertical a:focus
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarVertical a.MenuBarItemHover
background-color: #09F;
ul.MenuBarVertical a.MenuBarItemSubmenuHover, /*ul.MenuBarVertical a.MenuBarSubmenuVisible
background-color: #7A85AD;
color: #333;
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(SpryAssets/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(SpryAssets/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;
filter:alpha(opacity:0.1);
margin: 0;
padding: auto;
list-style-type: katakana;
font-size: 100%;
cursor: default;
width: 13em;
border-top-color: #edeeee;
border-top-style:groove;
border-bottom-color:#313132;
border-bottom-style:groove;
border-left-color:#cbcccd;
border-left-style:groove;
border-right-color:#3d3d3e;
border-right-width: thin;
border-right-style:groove;
/* 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;

I am sorry, but you have changed the CSS beyound recognition; I do not want to spend my time going through it to correct it.
One example that has angered me is
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;
    filter:alpha(opacity:0.1);
    margin: 0;
    padding: auto;
    list-style-type: katakana;
    font-size: 100%;
    cursor: default;
    width: 13em;
    border-top-color: #edeeee;
    border-top-style:groove;
    border-bottom-color:#313132;
        border-bottom-style:groove;
    border-left-color:#cbcccd;
        border-left-style:groove;
    border-right-color:#3d3d3e;
    border-right-width: thin;
        border-right-style:groove;
Changing this has not made you an expert
Another example on or about line 155 is this line which is sure to upset the browser.
ul.MenuBarVertical a:focus
Yet another one
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarVertical ul.MenuBarSubmenuVisible
   left: -11px;
    border-top-color: #edeeee;
    border-top-style:groove;
    border-bottom-color:#313132;
    border-bottom-style:solid;
        border-bottom-style:groove;
    border-left-color:#cbcccd;
        border-left-style:groove;
    border-right-color:#3d3d3e;
    border-right-width: thin;
        border-right-style:groove;
I suggest you start with a new widget, but before you do, read this http://www.dwcourse.com/dreamweaver/ten-commandments-spry-menubars.php#one
Gramps

Unordered list displayed horizontally

Hello,
I am really new to Dreamweaver and I tried to complete (succesfully) the video on how to build my first website.
Following the instruction was not so complicate...
I tried to do pretty much alone the same focusing in creating the button from an unordered list
I did with no CSS file, I created a new one empty. I am able to remove the bullet point, align the list but I can not display the button horizontally and I do not understand why.
This is what I did:
create a Navigation (id= buttons)
create an unordered list
create a CSS file empty
add a selection #buttons ul where I deleted bullet point and aligned the list
add a selection #buttons a here I have problems. I apply with 25% (4 buttons) and set the float option to the left but the list remains vertical
What I do wrong???? It seems I am doing like in the video. Is maybe related to the CSS file? Is not correct doing that with an empty one?
Thanks for any help

Hello, thanks for your answer. Of course it is working, but still I do not get why is not working mine.
here it is the html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Home</title>
<link href="styles/main copy 2.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav id="navbar">
<ul>
    <li>Home</li>
    <li>Products</li>
    <li>Services</li>
    <li>Contacts</li>
</ul>
</nav>
</body>
</html>
and here the CSS
#navbar ul {
          list-style-type: none;
          margin-top: 0px;
          margin-right: 0px;
          margin-bottom: 0px;
          margin-left: 0px;
          padding-top: 0px;
          padding-right: 0px;
          padding-bottom: 0px;
          padding-left: 0px;
#navbar a {
          width: 25%;
          display: block;
          float: left;

Ul.hmb ul alignment problem ie7 and lower only

So to my knowledge the menu on my site works correctly in all other browsers except ie7 and lower. As a last resort I have turned to conditional style sheets for ie7 and previous versions to take care of this problem. Here's a link to my site: http://geekpowwow.com
My style sheets are large and probably a little disorganized so i'll post the relevant rules here. I'll post one ul and if you guys have any thoughts on how to solve this problem please let me know. (I have removed a#li and div.menubaralign from the ie7 css)
<ul id="hardware">
                         <div class="menubaralign">
                              <li><a id="li" href="http://geekpowwow.com/cables/">Cables</a></li>
                              <li><a id="li" href="http://geekpowwow.com/burners/">CD/DVD Burners</a></li>
                              <li><a id="li" href="http://geekpowwow.com/computeraccessories/">Computer Acc.</a></li>
                              <li><a id="li" href="http://geekpowwow.com/computercases/">Computer Cases</a></li>
                              <li><a id="li" href="http://geekpowwow.com/coolingdevices/">Cooling Devices</a></li>
                              <li><a id="li" href="http://geekpowwow.com/processors/">CPU's / Processors</a></li>
                              <li ><a id="li" href="http://geekpowwow.com/harddrives/">Hard Drives</a></li>
                              <li ><a id="li" href="http://geekpowwow.com/headsets/">Headsets</a></li>
                              <li ><a id="li" href="http://geekpowwow.com/keyboards/">Keyboards</a></li>
                              <li ><a id="li" href="http://geekpowwow.com/memory/">Memory</a></li>
                              </div>
                              <div class="menubaralign">
                              <li><a id="li" href="http://geekpowwow.com/mice/">Mice</a></li>
                              <li><a id="li" href="http://geekpowwow.com/monitors/">Monitors</a></li>
                              <li><a id="li" href="http://geekpowwow.com/motherboards/">Motherboards</a></li>
                              <li><a id="li" href="http://geekpowwow.com/powersupplies/">Power Supplies</a></li>
                              <li ><a id="li" href="http://geekpowwow.com/servers/">Servers</a></li>
                              <li ><a id="li" href="http://geekpowwow.com/soundcards/">Sound Cards</a></li>
                              <li ><a id="li" href="http://geekpowwow.com/speakers/">Speakers</a></li>
                              <li ><a id="li" href="http://geekpowwow.com/ssd/">SSD's</a></li>
                              <li ><a id="li" href="http://geekpowwow.com/videocards/">Video Cards</a></li>
                              <li ><a id="li" href="http://geekpowwow.com/webcams/">Web Cams</a></li>
                              </div>
                         </ul>
ul.MenuBarHorizontal ul
     padding: 0;
     list-style-type: none;
     font-size: 100%;
     z-index: 1020;
     cursor: default;
     width: 26em;
     padding-left:1em;
     padding-right:1em;
     padding-bottom:1em;
     background-color:#c7c9cd;
     border:hidden;
ul.MenuBarHorizontal ul li
     margin:0;
     marin:0;
     width: 12em;
     height: 40px;
     border:0;
As you would expect from the code here the drop down is left aligned directly below the menu bar li. Any ideas about why margin-left:-8em won't center, or even move the list from the current position?

HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="iso-8859-1">
<title>Geek PoWWow - </title>
<link href="style.css" rel="stylesheet">
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet">
<link href="myMenu.css" rel="stylesheet">
<script src="SpryAssets/SpryMenuBar.js"></script>
</head>
<body>
<div id="nav-bar">
<ul id="MenuBar1" class="MenuBarHorizontal">
    <li><a id="home" class="MenuBarItemSubmenu" href="http://geekpowwow.com/"><span>home</span></a></li>
    <li><a id="hardware" class="MenuBarItemSubmenu" href="#"><span>hardware</span></a>
      <ul class="rows2">
        <li><a href="http://geekpowwow.com/cables/">Cables</a></li>
        <li><a href="http://geekpowwow.com/burners/">CD/DVD Burners</a></li>
        <li><a href="http://geekpowwow.com/computeraccessories/">Computer Acc.</a></li>
        <li><a href="http://geekpowwow.com/computercases/">Computer Cases</a></li>
        <li><a href="http://geekpowwow.com/coolingdevices/">Cooling Devices</a></li>
        <li><a href="http://geekpowwow.com/processors/">CPU's / Processors</a></li>
        <li><a href="http://geekpowwow.com/harddrives/">Hard Drives</a></li>
        <li><a href="http://geekpowwow.com/headsets/">Headsets</a></li>
        <li><a href="http://geekpowwow.com/keyboards/">Keyboards</a></li>
        <li><a href="http://geekpowwow.com/memory/">Memory</a></li>
        <li><a href="http://geekpowwow.com/mice/">Mice</a></li>
        <li><a href="http://geekpowwow.com/monitors/">Monitors</a></li>
        <li><a href="http://geekpowwow.com/motherboards/">Motherboards</a></li>
        <li><a href="http://geekpowwow.com/powersupplies/">Power Supplies</a></li>
        <li><a href="http://geekpowwow.com/servers/">Servers</a></li>
        <li><a href="http://geekpowwow.com/soundcards/">Sound Cards</a></li>
        <li><a href="http://geekpowwow.com/speakers/">Speakers</a></li>
        <li><a href="http://geekpowwow.com/ssd/">SSD's</a></li>
        <li><a href="http://geekpowwow.com/videocards/">Video Cards</a></li>
        <li><a href="http://geekpowwow.com/webcams/">Web Cams</a></li>
      </ul>
    </li>
    <li><a id="pcs" class="MenuBarItemSubmenu" href="#"><span>pcs</span></a>
      <ul>
        <li><a href="http://geekpowwow.com/desktops/">Desktops</a></li>
        <li><a href="http://geekpowwow.com/laptopaccessories/">Laptop Acc.</a></li>
        <li><a href="http://geekpowwow.com/laptops-notebooks/">Laptops / Notebooks</a></li>
        <li><a href="http://geekpowwow.com/netbooks/">Netbooks</a></li>
        <li><a href="http://geekpowwow.com/tablets/">Tablets</a></li>
      </ul>
    </li>
    <li><a id="gaming" class="MenuBarItemSubmenu" href="#"><span>gaming</span></a>
      <ul>
        <li><a href="http://geekpowwow.com/nintendo3ds/">Nintendo 3DS</a></li>
        <li><a href="http://geekpowwow.com/nintendods/">Nintendo DS</a></li>
        <li><a href="http://geekpowwow.com/nintendowii/">Nintendo Wii</a></li>
        <li><a href="http://geekpowwow.com/pcgames/">PC</a></li>
        <li><a href="http://geekpowwow.com/playstation3/">Playstation 3</a></li>
        <li><a href="http://geekpowwow.com/sonypsp/">Sony PSP</a></li>
        <li><a href="http://geekpowwow.com/xbox360/">XBOX 360</a></li>
      </ul>
    </li>
    <li><a id="software" class="MenuBarItemSubmenu" href="#"><span>software</span></a>
      <ul class="rows2">
        <li><a href="http://geekpowwow.com/windows/">Windows</a></li>
        <li><a href="http://geekpowwow.com/mac/">Mac</a></li>
        <li><a href="http://geekpowwow.com/linux/">Linux</a></li>
        <li><a href="http://geekpowwow.com/academicsoftware/">Academic Software</a></li>
        <li><a href="http://geekpowwow.com/audioeditingsoftware/">Audio Editing Software</a></li>
        <li><a href="http://geekpowwow.com/businesssoftware/">Business Software</a></li>
        <li><a href="http://geekpowwow.com/communicationsoftware/">Communication Software</a></li>
        <li><a href="http://geekpowwow.com/freeware/">Freeware</a></li>
        <li><a href="http://geekpowwow.com/graphicssoftware/">Graphics Software</a></li>
        <li><a href="http://geekpowwow.com/languagesoftware/">Language Software</a></li>
        <li><a href="http://geekpowwow.com/multimediasoftware/">Multimedia Software</a></li>
        <li><a href="http://geekpowwow.com/simulationsoftware/">Simulation Software</a></li>
        <li><a href="http://geekpowwow.com/videoeditingsoftware/">Video Editing Software</a></li>
        <li><a href="http://geekpowwow.com/webbrowsers/">Web Browsers</a></li>
      </ul>
    </li>
    <li><a id="electronics" class="MenuBarItemSubmenu" href="#"><span>electronics</span></a>
      <ul class="rows2">
        <li><a href="http://geekpowwow.com/apple/">Apple</a></li>
        <li><a href="http://geekpowwow.com/blu-rayplayers/">Blu-Ray Players</a></li>
        <li><a href="http://geekpowwow.com/camcorderaccessories/">Camcorder Acc.</a></li>
        <li><a href="http://geekpowwow.com/camcorders/">Camcorders</a></li>
        <li><a href="http://geekpowwow.com/carelectronics/">Car Electronics</a></li>
        <li><a href="http://geekpowwow.com/cellphones/">Cell Phones</a></li>
        <li><a href="http://geekpowwow.com/digitalcameraaccessories/">Digital Camera Acc.</a></li>
        <li><a href="http://geekpowwow.com/digitalcameras/">Digital Cameras</a></li>
        <li><a href="http://geekpowwow.com/dvr/">Digital Video Recorders</a></li>
        <li><a href="http://geekpowwow.com/dvdplayers/">DVD Players</a></li>
        <li><a href="http://geekpowwow.com/dvdrecorders/">DVD Recorders</a></li>
        <li><a href="http://geekpowwow.com/e-bookreaders/">E-Book Readers</a></li>
        <li><a href="http://geekpowwow.com/gps/">GPS</a></li>
        <li><a href="http://geekpowwow.com/homeaudiospeakers/">Home Audio Speakers</a></li>
        <li><a href="http://geekpowwow.com/projectors/">Projectors</a></li>
        <li><a href="http://geekpowwow.com/telephones-voip/">Telephones / VoIP</a></li>
        <li><a href="http://geekpowwow.com/televisions/">Televisions</a></li>
        <li><a href="http://geekpowwow.com/universalremotes/">Universal Remotes</a></li>
      </ul>
    </li>
    <li><a id="forums" class="MenuBarItemSubmenu" href="http://geekpowwow.com/under-construction/"><span></span></a></li>
</ul>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../../../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../../../SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
styles.css
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
html {
    font: 100% Verdana, Geneva, sans-serif;
    overflow-y: scroll;
body {
    background: #0053de url(http://geekpowwow.com/wp-content/themes/Geek%20PowWow/images/header.jpg) no-repeat center top;
#nav-bar {
    background: url(http://geekpowwow.com/wp-content/themes/Geek%20PowWow/images/navbar.gif) repeat-x;
    height: 85px;
    margin-top: 195px;
myMenu.css
/* CSS Document */
ul.MenuBarHorizontal {
    width: 1120px;
    margin: auto;
    font-size: 0.9em;
ul.MenuBarHorizontal li {
    margin: 6px 3px 0 0;
    width: 157px;
ul.MenuBarHorizontal a {
    height: 70px;
ul.MenuBarHorizontal a span {
    visibility: hidden;
ul.MenuBarHorizontal ul {
    padding: 0 10px 10px 10px;
    width: 192px;
    background: #CCC;
ul.MenuBarHorizontal ul.rows2 {
    padding: 0 10px 10px 10px;
    width: 384px;
    background: #CCC;
ul.MenuBarHorizontal ul li {
    margin: 0;
    width: 192px;
ul.MenuBarHorizontal ul a {
    background:url(http://geekpowwow.com/wp-content/themes/Geek%20PowWow/images/Spry%20Buttons/li_blank.gif) no-repeat;
    height: 24px;
ul.MenuBarHorizontal a#home {
    background:url(http://geekpowwow.com/wp-content/themes/Geek%20PowWow/images/Spry%20Buttons/home_button.gi f) no-repeat;
ul.MenuBarHorizontal a#home:hover, ul.MenuBarHorizontal a#home:focus,
ul.MenuBarHorizontal a#home.MenuBarItemHover, ul.MenuBarHorizontal a#home.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a#home.MenuBarSubmenuVisible {
    background:url(http://geekpowwow.com/wp-content/themes/Geek%20PowWow/images/Spry%20Buttons/home_button_ho ver.gif) no-repeat;
ul.MenuBarHorizontal a#hardware {
    background:url(http://geekpowwow.com/wp-content/themes/Geek%20PowWow/images/Spry%20Buttons/hardware_butto n.gif) no-repeat;
ul.MenuBarHorizontal a#hardware:hover, ul.MenuBarHorizontal a#hardware:focus,
ul.MenuBarHorizontal a#hardware.MenuBarItemHover, ul.MenuBarHorizontal a#hardware.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a#hardware.MenuBarSubmenuVisible {
    background:url(http://geekpowwow.com/wp-content/themes/Geek%20PowWow/images/Spry%20Buttons/hardware_butto n_hover.gif) no-repeat;
ul.MenuBarHorizontal a#pcs {
    background:url(http://geekpowwow.com/wp-content/themes/Geek%20PowWow/images/Spry%20Buttons/pcs_button.gif) no-repeat;
ul.MenuBarHorizontal a#pcs:hover, ul.MenuBarHorizontal a#pcs:focus,
ul.MenuBarHorizontal a#pcs.MenuBarItemHover, ul.MenuBarHorizontal a#pcs.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a#pcs.MenuBarSubmenuVisible {
    background:url(http://geekpowwow.com/wp-content/themes/Geek%20PowWow/images/Spry%20Buttons/pcs_button_hov er.gif) no-repeat;
ul.MenuBarHorizontal a#gaming {
    background:url(http://geekpowwow.com/wp-content/themes/Geek%20PowWow/images/Spry%20Buttons/gaming_button. gif) no-repeat;
ul.MenuBarHorizontal a#gaming:hover, ul.MenuBarHorizontal a#gaming:focus,
ul.MenuBarHorizontal a#gaming.MenuBarItemHover, ul.MenuBarHorizontal a#gaming.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a#gaming.MenuBarSubmenuVisible {
    background:url(http://geekpowwow.com/wp-content/themes/Geek%20PowWow/images/Spry%20Buttons/gaming_button_ hover.gif) no-repeat;
ul.MenuBarHorizontal a#software {
    background:url(http://geekpowwow.com/wp-content/themes/Geek%20PowWow/images/Spry%20Buttons/software_butto n.gif) no-repeat;
ul.MenuBarHorizontal a#software:hover, ul.MenuBarHorizontal a#software:focus,
ul.MenuBarHorizontal a#software.MenuBarItemHover, ul.MenuBarHorizontal a#software.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a#software.MenuBarSubmenuVisible {
    background:url(http://geekpowwow.com/wp-content/themes/Geek%20PowWow/images/Spry%20Buttons/Software_butto n_hover.gif) no-repeat;
ul.MenuBarHorizontal a#electronics {
    background:url(http://geekpowwow.com/wp-content/themes/Geek%20PowWow/images/Spry%20Buttons/Electronics%20 _button.gif) no-repeat;
ul.MenuBarHorizontal a#electronics:hover, ul.MenuBarHorizontal a#electronics:focus,
ul.MenuBarHorizontal a#electronics.MenuBarItemHover, ul.MenuBarHorizontal a#electronics.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a#electronics.MenuBarSubmenuVisible {
    background:url(http://geekpowwow.com/wp-content/themes/Geek%20PowWow/images/Spry%20Buttons/Electronics%20 _button_hover.gif) no-repeat;
ul.MenuBarHorizontal a#forums {
    background:url(http://geekpowwow.com/wp-content/themes/Geek%20PowWow/images/Spry%20Buttons/forums_button. gif) no-repeat;
ul.MenuBarHorizontal a#forums:hover, ul.MenuBarHorizontal a#forums:focus,
ul.MenuBarHorizontal a#forums.MenuBarItemHover, ul.MenuBarHorizontal a#forums.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a#forums.MenuBarSubmenuVisible {
    background:url(http://geekpowwow.com/wp-content/themes/Geek%20PowWow/images/Spry%20Buttons/forums%20_butt on_hover.gif) no-repeat;
ul.MenuBarHorizontal a#li:hover, ul.MenuBarHorizontal a#li:focus,
ul.MenuBarHorizontal a#li.MenuBarItemHover, ul.MenuBarHorizontal a#li.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a#li.MenuBarSubmenuVisible {
    background:url(http://geekpowwow.com/wp-content/themes/Geek%20PowWow/images/Spry%20Buttons/li_blank_hover .gif) no-repeat;
@media screen, projection {
    ul.MenuBarHorizontal li.MenuBarItemIE     {
        background: transparent;
Using original SpryMenuBar.js and SpryMenuBarHorizontal.css
Gramps

TEXT ALIGN PROBLEM UNORDERED LIST SPRY PANEL

Similar Messages

Maybe you are looking for