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

Similar Messages

Spry Menu Text Alignment

I'm wondering if there is any way to have the text centered
in the main menu bar but align text left the in the submenus. I've
tried, but any alignment I apply in the CSS seems to affect all
text.

I just happened to do this example page someone else:
http://www.projectseven.com/testing/customers/adobe/fubar/
Perhaps it will help. The spry menu is the second one.
Al Sparber - PVII
http://www.projectseven.com
The Finest Dreamweaver Menus | Galleries | Widgets
http://www.projectseven.com/go/pop
The Ultimate DW Menu System
"efredian" <[email protected]> wrote in
message
news:gnnq9i$3bu$[email protected]..
> I'm wondering if there is any way to have the text
centered in the main
> menu bar but align text left the in the submenus. I've
tried, but any
> alignment I apply in the CSS seems to affect all text.

Spry Menu Bar text mirrored in IE

I'm making my first website with Dreamweaver. So far, I've managed to figure out all my problems on my own. This one, though, is just weird. My webpage looks fine on Firefox but when I load it up on Internet Explorer, my menu bar text (ex:Home) reads mirrored. Not backwards like "emoH" but completely mirrored. I have no idea how to fix this or why it happened. When I press the Compatibility View button IE has, it fixes it though..

You can safely remove the red coloured part
ul.MenuBarHorizontal a
    display: block;
    cursor: auto;
    background-color: #F3FCF7;
    padding: 0.5em 0.75em;
    color: #000;
    text-decoration: none;
    text-align: center;
    text-transform: none;
    list-style-type: none;
    filter: FlipH;

Spry Menu Text only displays in hover color, doesn't sense browser edge

I have a Spry horizontal menu in a website that is working fairly well in everything except IE6. Firefox, Safari, and IE7 are all fine.
In IE6, random menu items only display in the blue hover color, so they are invisible until you hover over them.
My second problem is that the menu is right-aligned, and the button on the far right has three submenus. I would like the second two submenus to automatically open to the left of the first submenu when opening to the right would cause them to be cut off by the edge of the browser window. How do I do this??
Here is my code (I've customized it with suggestions online, but just can't seem to fix the problem with IE6).
Thanks for any help, I'm really stuck!!
@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: 9pt;
cursor: default;
font-family: Helvetica, Arial, sans-serif;
/* 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: auto;
float: left;
height: auto;
/* 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: 12em;
/* 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 blue block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #0000ff;
color: #fff180;
text-decoration: none;
li.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #0000FF;
color: #FFF180;
text-decoration: none;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
/* Menu items that have mouse over or focus have a yellow background and blue text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
background-color: #fff180;
color: #0000ff;
/* 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: #fff180;
color: #0000FF;
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;
@media screen {
* html ul.MenuBarVertical ul {position: relative!important; float: left;
margin: -10px -1000px -1000px 80px; display: inline;}
* html ul.MenuBarVertical {position: static!important; }
*:first-child+html ul.MenuBarVertical ul {position: relative!important;
float: left; margin: -10px -1000px -1000px 80px;}
*:first-child+html ul.MenuBarVertical {position: static!important; }

If you want to see the website and menu in action, go to http://www.gwnetworks.com/playtri/index_new2.html
Thanks again!

Spry bar sub menus not working. Am at wit's end.

Hi all,
I am having trouble with getting my submenus on my spry bar to function. At first I was getting the error message of spry undefined. I looked for answers in forums, and tried a few things like making sure the .js file was there, looking for code mistakes, etc. Nothing worked, so I then deleted and reinstalled the spry bar and spry assets files, and of course, uploaded them to the server. Now I don't get any error messages, but the submenus just don't drop down.
Here is my code:
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Natural Handmade Soaps</title>
<link href="../../styles/HealingHandsStyleSheet.css" rel="stylesheet" type="text/css" />
<script src="../../../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../../../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="#FFFFFF">
<div id="container">
<div id="banner">
<img src="../../images/BitsAndPieces/HealingHandsNewBanner.jpg" width="960" height="99" />
</div>
<div id="healingmenu">
<ul id="MenuBar1" class="MenuBarHorizontal">
    <li><a class="MenuBarItemSubmenu" href="../../index.html">home</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="../hair_serum.html">hair</a></li>
    <li><a class="MenuBarItemSubmenu" href="../face_products.html">face</a>
      <ul>
        <li><a class="MenuBarItemSubmenu" href="/soaps.html">complexion perfection face soap</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="../complexion_perfection_pages/complexion_perfection.html">complexion perfection face serum</a></li>
        <li><a href="../silk.html">SILK face serum</a></li>
      </ul>
    </li>
    <li><a href="../body_products.html">body</a></li>
    <li><a href="../Essential_Oil_Blends/essential_oil_blends.html">eo blends</a></li>
    <li><a href="../../Pages/ayreveda/ayurveda_page.html" class="MenuBarItemSubmenu">herbal info</a>
      <ul>
        <li><a href="../../Pages/ayreveda/ayurveda_page.html">what is ayurveda?</a></li>
        <li><a href="../../Pages/bach_flower_essences/bach_page.html">what are bach flower essences?</a></li>
      </ul>
    </li>
<li><a href="mailto:[email protected]">contact</a></li>
    <li><a href="/blog">blog</a></li>
</ul>
</div>
<div id="left_column">
<p align="left"><img src="images/cp_serum_soap_teapot.jpg" width="227" height="206" alt="Complexion Perfection Soap" /></p>
<p align="left"><span class="style47"><img src="images/cpsoap.JPG" alt="" width="227" height="206" /></span></p>
<p align="left"><span class="style47"><img src="../complexion_perfection_pages/images/three_bottles.jpg" alt="" width="240" height="200" /></span></p>
<p><span class="style1"><a href="../complexion_perfection_pages/complexion_perfection.html">Complexion Perfection Face Serum</a></span><span class="style2">, for use with Complexion Perfection soap.</span></p>
<p><br />
</p>
</div>
<div id="center_column">
<p align="center" class="style1">About the Soaps</p>
<p class="style2" >Healing Hands Apothecary soaps are handmade in small batches using rich, all-natural ingredients. The soaps are scented with pure, therapeutic essential oils obtained from plants, which also carry the beneficial properties of the plants. The soaps take 4-6 weeks to "cure" and are extremely mild and gentle for your skin. They will last
    significantly longer than the popular bars you get from the store because
    they are not fluffed up with air. Each 3.5" x 1" x 2.75" bar is approximately 5-5.5 oz of pure goodness!</p>
<p align="center" class="style1" >Complexion Perfection Face Bar</p>
<p class="style2">A rich face soap made with French
    green clay to tighten pores and extract impurities from the skin. The Complexion Perfection
    face bar is specifically made to complement the <a href="http://www.healinghandsapothecary.com/Product%20Pages/complexion_perfection_pages/complexi on_perfection.html">Complexion Perfection Face Serum for Problem Skin</a>. Complexion Perfection is suitable for deep cleansing of all skin types, though it is especially great for problem skin.</p>
<p class="style2"><strong>Ingredients:</strong> Olive oil, coconut oil, palm kernel oil, shea butter, lavender, bergamot, and eucalyptus essential oils, French green clay, green tea.</p>
<p align="center" class="style47">
    <input type="hidden" name="cmd" value="_s-xclick" />
    <input type="hidden" name="hosted_button_id" value="GHKAAN38MDEDU" />
</p>
<div align="center">
    <table>
      <tr>
        <td><input type="hidden" name="on0" value="Quantity" />
          Quantity</td>
      </tr>
      <tr>
        <td><select name="os0">
          <option value="One Bar">One Bar $6.50 USD</option>
          <option value="Five Bars">Five Bars $30.00 USD</option>
          <option value="Ten Bars">Ten Bars $55.00 USD</option>
        </select></td>
      </tr>
    </table>
    <input type="hidden" name="currency_code" value="USD" />
    <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!" />
    <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1" />
</div>
<p align="center" class="style51"><img src="images/GBB_closeup.jpg" alt="" width="300" height="200" /></p>
<p align="center" class="style1">Gardener's Blessing Bar</p>
<p align="left"><span class="style2">A special soap made for gardeners! People who like a moisturizing soap that cleans well after a hard day's work in the yard will love the Gardener's Blessing Bar. Dried orange peel and poppy seed offer exfoliation, and tea tree oil soothes cuts, bites, and scratches. Sweet orange and eucalyptus oils add a delightful scent to this ultra rich and creamy soap.</span></p>
<p align="left" class="style2"> <strong>Ingredients:</strong> Olive oil, coconut oil, palm kernel oil, cocoa butter, shea butter, beeswax, sweet orange oil, eucalyptus oil,    tea tree oil, dried orange peel, poppy seed.</p>
<p align="center" class="style47">Gardener's
    Blessing Bar<br />
    One Bar: $6.50<br />
    Out Of Stock</p>
<p> </p>
</div>
<div id="right_column">
<p align="center"><a href="/Product Pages/soaps/purify.html"><font size="+2" class="style1">PuriFire<br />
        <span class="style53">The bar that kills MRSA, viruses, and bacteria!
Made with rhassoul clay and rooibos tea. Click here for more ingredients.</span></font></a></p>
<p align="center"><span class="style57"><img src="images/PuriFireBasket.JPG" alt="" width="300" height="200" /></span></p>
<p class="style2">PuriFire soap was developed for healthcare
    workers who work all day in an environment
    saturated with deadly bacteria and viruses. This
      soap contains essential oils with antiviral and antibacterial properties, and will effectively cleanse your body of all unwanted microorganisms
while leaving the beneficial ones behind for defense.</a></p>
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
    <div align="center">
      <input type="hidden" name="cmd2" value="_s-xclick" />
      <input type="hidden" name="hosted_button_id2" value="SQY6LVCYW9LU2" />
      <table>
        <tr>
          <td><input type="hidden" name="on" value="Quantity" />
            Quantity</td>
        </tr>
        <tr>
          <td><select name="os">
            <option value="One Bar">One Bar $8.00 USD</option>
            <option value="Five Bars">Five Bars $37.50 USD</option>
            <option value="Ten Bars">Ten Bars $70.00 USD</option>
          </select></td>
        </tr>
      </table>
      <input type="hidden" name="currency_code2" value="USD" />
      <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_LG.gif" border="0" name="submit2" alt="PayPal - The safer, easier way to pay online!" />
      <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1" />
    </div>
</form>
<p align="center"><img src="images/PuriFire stacked.JPG" alt="" width="309" height="219" /></p>
<p align="center"> </p>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../../../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../../../SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
Any ideas? Is it something to do with where my Spry Asset folder is, like maybe I shouldn't have ../../../?????
Thank you.

Hi,
Although you didn't get an answer here, I visited your web page and it looks like you found a way to solve the problem. I am having a similar problem and wonder if you (or somebody) can help me?
My problem is that while everything else works just fine, my sub-submenus do not. The first one drops down, but the second one does not (so it looks like I have one item when in fact I have two).
My css code is copied directly from Adobe's SpryMenuBarHorizontal.css. The only things I changed were some button widths, colors, and I tweaked the location the buttons appear in (but did not change original locations nor z-indexes, I don't think!). I am reprinting it below, just in case.
I am using the last version of Spry (1.6.1).
Here is a link to the page, and when you view it, keep in mind that only "Portfolio" has sub-menus, and of those, only "Writing" is supposed to have more than one sub-item ("Fiction" and "Non-Fiction").
http://www.kateswork.com/tests/test-sample4.html
Here is the css:
ul.MenuBarHorizontal
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: auto;
ul.MenuBar2Horizontal
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: auto;
    position: relative;
/* 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. These have are a fixed width in the primary menu, an auto width in the secondary menu, which has no children. */
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;
    white-space:nowrap;
ul.MenuBar2Horizontal li
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: center;
    cursor: pointer;
    width: 8em;
    float: left;
    white-space:nowrap;
/* Submenus containers 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: 7em;
    position: absolute;
    left: -1000em;
    white-space:nowrap;
/* Submenu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
    width: 7em;
/* Sub-submenu containers are wider to accomodate longer items */
ul.MenuBarHorizontal ul ul
    position: absolute;
    width: 11.6em;
    height:2em;
    margin-top: -2%;
    margin-right: 0%;
    margin-bottom: 0;
    margin-left: 0%;
/* Sub-submenu contents */
ul.MenuBarHorizontal ul ul li
    position: absolute;
    width: 11.7em;
/* 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;
/* Submenus should appear slightly overlapping to the right (99%) */
ul.MenuBarHorizontal ul ul
    margin: 0 0 0 99%;
/* Sub-submenus should also appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul li
    margin: 0 0 0 0%;
    height:auto;
/* 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 #999999;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    text-decoration: none;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-right-color: #FFFFCC;
    border-bottom-color: #7F7F5C;
    border-left-color: #7F7F5C;
    border-top-width: .1em;
    border-top-style: solid;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size:.8em;
    font-weight:bold;
    color: #333333;
    background-color: #CCCC99;
    padding-top: 0.5em;
    padding-right: 1em;
    padding-bottom: 0.5em;
    padding-left: 1em;
ul.MenuBar2Horizontal a
    display: block;
    cursor: pointer;
    text-decoration: none;
    border-right-width: .2em;
    border-bottom-width: .2em;
    border-left-width: .2em;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-right-color: #CCCCCC;
    border-bottom-color: #999999;
    border-left-color: #999999;
    border-top-width: .2em;
    border-top-style: solid;
    border-top-color:#999999;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size:.8em;
    font-weight:bold;
    color: #333333;
    background-color: #FFFFFF;
    padding-top: 0.5em;
    padding-right: 1em;
    padding-bottom: 0.5em;
    padding-left: 1em;
ul.MenuBarHorizontal ul li ul li a
    border-right-color: #7F7F5C;
/* MOUSEOVER CONDITIONS: */
/* On mouse-over, or "focus," buttons change to a grey background and white text.
The following rule only applies to the IE browser (notice the syntax using the colon): */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    background-color: #333333;
    color: #FFFFFF;
    border: 1px solid #CCCCCC;
/* The next rule set has a group selector, so top-menu and submenu items will have the same background color and font color. Notice that the font color here overrides the base rule, above. Menu items that are open with submenus are set to MenuBarItemHover with a grey background and white text. */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
    background-color: #333333;
    color: #FFFFFF;
    border: 1px solid #CCCCCC;
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
    background-color: #333333;
    color: #FFFFFF;
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;

Customizing a Horizontal spry bar

Maybe I have been looking in the wrong places, but is there a tutorial to customize a spry bar like the sample ones on adobe labs. I have almost got my spry bar completed, but I cannot figure out how adjust a few things. I looked at David Powers' tutorials and one or two others, they were helpful but not enough. All help is greatly appreciated

I am having trouble with the width of the boxes that have submenus (members, safety, and cal/osha).... Basically the width is good as far as the text goes but the arrow that indicates there is a submenu for that box is covering the last letter.
I am also having trouble with the padding/spacing left of the submenu items, I think I some how added padding/spacing to the submenu items when I was following a tutorial but I forgot how to undo that action.
I don't have my site up yet, but I can post the code....
here's the css for my horizontal spry menu bar-
/* 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;
     text-transform: uppercase;
/* 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;
     list-style-type: none;
     font-size: 100%;
     position: relative;
     text-align: left;
     cursor: pointer;
     width: auto;
     float: left;
     padding-right: 15px;
     white-space: nowrap;
/* 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
     list-style-type: none;
     font-size: 100%;
     z-index: 1020;
     cursor: default;
     width: auto;
     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: auto;
     display: block;
     float: none;
     white-space: nowrap;
     background-color: transparent;
/* 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: #FFF;
     color: #000;
     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: #FFF;
     color: #03F;
/* 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: #FFF;
     color: #03F;
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: 100% 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;
** Just in case here is my source code....
<ul id="PARAMA_Menu" class="MenuBarHorizontal">
      <li><a href="#">Home</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Contact Us</a></li>
      <li><a href="#" class="MenuBarItemSubmenu">Members </a>
        <ul>
          <li><a href="#">Services</a></li>
          <li><a href="#">Benefits</a></li>
          <li><a href="#">w/c Advantages</a></li>
          <li><a href="#">w/c quote assistant</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Safety</a>
        <ul>
          <li><a href="#">Safety & Loss Control</a></li>
          <li><a href="#">Safety Articles</a></li>
          <li><a href="#">safety articles archive</a></li>
          <li><a href="#">scif newsletters</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">cal/osha</a>
        <ul>
          <li><a href="#">compliance & enforcement</a></li>
          <li><a href="#">consultation</a></li>
          <li><a href="#">archive</a></li>
        </ul>
      </li>
      <li><a href="#">resources</a></li>
      <li><a href="#">site map</a></li>
    </ul>

Spry bar problem

I've imported the spry bar for from the David Powers Tutorial, the 2.0 widget for the Bayside Pulse website, I have styled it in my own design, done every thing he said everything fine, I added the fifth top level menu button to the menu bar Cafe Citrus, but in my case Inspections, I took out all the stuff I did not want and put in all the stuff I did want, everything still going great, Checked it in live view looked good, saved it, and then went back to live view and there was an extra button on the end with nothing in it, I have tried to get rid but I cant sort it, not a clue. Can any one help please?

@Jeffrey
I received your PM with the link to your site.
Because you are using SpryMenuBar v2.0 and have probably styled the bar within the Widget Browser, once applied to your document it becomes a nightmare for newbies to make any styling changes.
In your case, you have (or the Widget Browser) as constructed the menu bar to use the MenuBar and an overriding MenuBarRightShrink classes as per
<script type="text/javascript">
// BeginOAWidget_Instance_2141544: #MenuBar
var MenuBar = new Spry.Widget.MenuBar2("#MenuBar", {
    widgetID: "MenuBar",
    widgetClass: "MenuBar MenuBarRightShrink",
    insertMenuBarBreak: true,
    mainMenuShowDelay: 100,
    mainMenuHideDelay: 200,
    subMenuShowDelay: 200,
    subMenuHideDelay: 200
// EndOAWidget_Instance_2141544
</script>
The style rules for MenuBarRightShrink makes the menubar float right with a width of auto as per
.MenuBarRightShrink {
    float: right; /* shrink to content, as well as float the MenuBar */
    width: auto;
The above style rules are contained within a style sheet called consultant_cs5.css
When we now look to see how the stylesheets are loaded, we see the following
<link href="consultant_cs5.css" rel="stylesheet" type="text/css" />
<link href="Spry-UI-1.7/css/Menu/basic/SpryMenuBasic.css" rel="stylesheet" type="text/css" />
This means that any rules targetting the same selectors in consultant_cs5.css will be overridden by those in SpryMenuBasic.css. Line 31 in SpryMenuBasic.css says
.MenuBar {
     float: left;
     width: 100%;
So now, instead of a right floating auto width menubar we have a left floating menubar covering the full width of the div.
If you swap the two stylesheets so that SpryMenuBasic.css loads before consultant_cs5.css, you will find that the situation is reversed and that the menubar will again be an auto width.
Gramps

Spry bar into position

I'm trying to get my Spry bar div in to position in the bottom right corner in the banner div. can any one help please?

The js for the Spry tooltip effect uses the current mouse
position to
determine where to display the tooltip. To change this, you'd
have to hack
into the Spry js. It doesn't seem to be a good idea to me.
Can you tough
it out with the stock placement?
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"Walter Elias" <[email protected]> wrote in
message
news:gjrnfr$keh$[email protected]..
>I haven't actually built the page. I've made numerous
pages with Spry
>tooltips
> using images, and the tooltip image position is always
an offset value
> from the
> cursor location (default 15 pixels in both x and y
axes). There is a
> dialogue
> box which enables control over the offset from the
cursor. This was never
> an
> issue with those pages.
>
> But when I started experimenting with a new page, trying
to find a way to
> make
> every tooltip image align exactly to the upper left
corner of the page, it
> was
> impossible (within my limited knowledge).
>
> So, the question remains - and you don't need to see my
rough page layouts
> (which I didn't save) to answer this - is there a way to
make an image
> within a
> Spry tooltip always align to the top left corner of the
page, or of the
> DIV?
>

Text Align and Other annoyances

I have upgraded from CS3 to CS5 and while i am mostly happy there are some really annoying bugs, features, or pieces of ill thought out logic in Dreamweaver.
I might be wrong but by default Dreamweaver is a a WYSIWYG editor. Therefore this should make it ideal for editing websites which have text in them. Lets assume that websites include single email campaigns, small static HTML brochure sites, through to large scale CMS websites. In each of these cases i might have the need to align a single piece of text to the right.
Now DW suggests everything like this should be driven by CSS. In in 90% of cases for general text layout i would agree i.e. default paragraph text size, default alignment, default line spacing, etc. These can then easily be adjusted throughout the website large or small by changing a simple bit off CSS in your style sheet.
But what if you just need 1 line of text to be different from "default" - CSS is not approrpiate here, and infact it would result in more code to achieve the same goal. why should i have to write a new style into my style sheet, and then link it with a class name, when a simple align="right" will work in that instance. In fact in all instances the chances are that piece of code will be shorter than the class="text-right" definition to apply the CSS (ignoring the CSS code too).
So why take the align buttons off the property inspector bar? Why make the developers life harder when he is using a tool to make it easier?
Another issue - which probably is more of a bug than anything. In code, Shift + Tab should outdent the code right. Highlight a block of code and this works. Why then does doing this for a single line of code delete the code?
I upgraded from CS3 because i was told that was the worst performing version of creative suite out there. And it was buggy as hell. But i am now finding that CS5 is not a great deal better - this applies through the other products too with Illustrator crashing as much as it ever did, il thought out removed features, etc. I am appalled by the quality of the new CS5 - especially as in my upgrade the fee was a good 30% more expensive than the american alternative.
And before you ask - the machine where i am experiencing this is more than adequate, Quad Core, 6gig of Ram, and on a fresh install of Windows 7.
An unhappy customer.

You may need to adjust your workflow to get the most out of CSS.
I find it works much better to identify the CSS IDs, selectors and class names I will be using in the site. This bit of pre-planning gives me a basic stylesheet from which I can grab styles at will and add more to as needed.
/**BASIC LAYOUT**/
#wrapper { }
#header { }
#content { }
#footer { }
/**TEXT STYLES**/
#header h1 { }
#content h2 { }
#content h3 { }
#content p { }
#footer p { }
/**RE-USABLE CLASSES**/
.floatLt {float:left; width: 40%;}
.floatRt {float:right; width: 40%}
.clearing {clear:both}
.center {text-align:center}
.right {text-align:right}
/**LINKS**/
a { }
a:link { }
a:visited { ]
a:hover,
a:active,
a:focus { }
And if you plug all this into an external CSS file to which your HTML documents are linked, sitewide style changes take a minute or two instead of weeks and hours.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Getting Spry Bar Color to Match Table Color

I have a table at the top of my page and a spry bar within it. I'd like for the colors to match but I can't seem to figure out how. If possible, I'd like them both to be a light gray.
http://www.hardgeared.com/TempPage-2.html
Thanks for your help and guidance.

Online 187 of HTML code view, change this:
<body text="#FF0000" class="footer"
width: 100%>
to this:
<body>
On line 201, change this:
<table width="959" border="0" background="999999">
to this:
<table width="959" border="0" style="background-color: #999999">
Which background colors do you want for Spry Menu and tables?
Nancy O.

Text alignment "Justify" is not aligned in Crystal Viewer.

Hi,
I am having a text field in report like paragraph format in Detail section and I have setting the text alignment as u201CJustifyu201D. If I launch the report through dhtml viewer the text is not aligned in justify format, it is getting aligned as left alignment, but it is working properly while exporting to PDF and Design Preview panel.
This problem is occurs in Crystal Report XI Release 2 and Crystal Report 2008 also.
This has been already posted and the link is Text Alignment - Justification Problem
Please help me to overcome this issue.
Thanks in Advance.

With CR 2008, make sure you are on SP4:
SP4
https://smpdl.sap-ag.de/~sapidp/012002523100008782452011E/cr2008sp4.exe
SP4 MSI
https://smpdl.sap-ag.de/~sapidp/012002523100008782532011E/cr2008sp4_redist.zip
SP4 MSM
https://smpdl.sap-ag.de/~sapidp/012002523100008782522011E/cr2008sp4_mm.zip
If that does not help, please provide a link to screen shots of the issue.
Ludek
Follow us on Twitter http://twitter.com/SAPCRNetSup
Got Enhancement ideas? Try the [SAP Idea Place|https://ideas.sap.com/community/products_and_solutions/crystalreports]

How to change the text alignment of an adf table column

Hi everyone
I have a read only adf table that uses banding. What I want to do is change the text align property of one of it's columns but the task seems not at all trivial.
I tried entering a value for the text-align property in the inline style of the specific af:column tag and failed. I then tried to do the same for the af:outputText element inside the column but still nothing worked. I even created a css style and changed the StyleClass attribute on each or both elements without any luck.
Can anybody shed some light here ...
Thanassis

Specify the text-align in a css.
Re: styling column headers in adf table

Spry validation text field across two columns in a table?

I have a table with two columns. I can easily insert a spry validated text field into the left cell but when I drag the box over so that box is in the right column and the label is still in the left column then that breaks the widget.
Is this even possible for me to do or do I have to put the widget in just one column?

Think I figured it out.
http://www.adobe.com/devnet/dreamweaver/articles/spry_form_validations.html

JTable text alignment issues when using JPanel as custom TableCellRenderer

Hi there,
I'm having some difficulty with text alignment/border issues when using a custom TableCellRenderer. I'm using a JPanel with GroupLayout (although I've also tried others like FlowLayout), and I can't seem to get label text within the JPanel to align properly with the other cells in the table. The text inside my 'panel' cell is shifted downward. If I use the code from the DefaultTableCellRenderer to set the border when the cell receives focus, the problem gets worse as the text shifts when the new border is applied to the panel upon cell selection. Here's an SSCCE to demonstrate:
import java.awt.Color;
import java.awt.Component;
import java.awt.EventQueue;
import javax.swing.GroupLayout;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JTable;
import javax.swing.border.Border;
import javax.swing.table.TableCellRenderer;
import javax.swing.table.TableColumn;
import sun.swing.DefaultLookup;
public class TableCellPanelTest extends JFrame {
private class PanelRenderer extends JPanel implements TableCellRenderer {
    private JLabel label = new JLabel();
    public PanelRenderer() {
      GroupLayout layout = new GroupLayout(this);
      layout.setHorizontalGroup(layout.createParallelGroup().addComponent(label));
      layout.setVerticalGroup(layout.createParallelGroup().addComponent(label));
      setLayout(layout);
    public Component getTableCellRendererComponent(JTable table, Object value, boolean isSelected, boolean hasFocus, int row, int column) {
      if (isSelected) {
        setBackground(table.getSelectionBackground());
      } else {
        setBackground(table.getBackground());
      // Border section taken from DefaultTableCellRenderer
      if (hasFocus) {
        Border border = null;
        if (isSelected) {
          border = DefaultLookup.getBorder(this, ui, "Table.focusSelectedCellHighlightBorder");
        if (border == null) {
          border = DefaultLookup.getBorder(this, ui, "Table.focusCellHighlightBorder");
        setBorder(border);
        if (!isSelected && table.isCellEditable(row, column)) {
          Color col;
          col = DefaultLookup.getColor(this, ui, "Table.focusCellForeground");
          if (col != null) {
            super.setForeground(col);
          col = DefaultLookup.getColor(this, ui, "Table.focusCellBackground");
          if (col != null) {
            super.setBackground(col);
      } else {
        setBorder(null /*getNoFocusBorder()*/);
      // Set up our label
      label.setText(value.toString());
      label.setFont(table.getFont());
      return this;
public TableCellPanelTest() {
    JTable table = new JTable(new Integer[][]{{1, 2, 3}, {4, 5, 6}}, new String[]{"A", "B", "C"});
    // set up a custom renderer on the first column
    TableColumn firstColumn = table.getColumnModel().getColumn(0);
    firstColumn.setCellRenderer(new PanelRenderer());
    getContentPane().add(table);
    pack();
public static void main(String[] args) {
    EventQueue.invokeLater(new Runnable() {
      public void run() {
        new TableCellPanelTest().setVisible(true);
}There are basically two problems:
1) When first run, the text in the custom renderer column is shifted downward slightly.
2) Once a cell in the column is selected, it shifts down even farther.
I'd really appreciate any help in figuring out what's up!
Thanks!

1) LayoutManagers need to take the border into account so the label is placed at (1,1) while labels just start at (0,0) of the cell rect. Also the layout manager tend not to shrink component below their minimum size. Setting the labels minimum size to (0,0) seems to get the same effect in your example. Doing the same for maximum size helps if you set the row height for the JTable larger. Easier might be to use BorderLayout which ignores min/max for center (and min/max height for west/east, etc).
2) DefaultTableCellRenderer uses a 1px border if the UI no focus border is null, you don't.
3) Include a setDefaultCloseOperation is a SSCCE please. I think I've got a hunderd test programs running now :P.

Using JavaScript to set value of Spry validated text field

Why can't the value of a text field be set using JavaScript
when it's validated using the Spry validation widget.
Example (this works):
<select name="birthdate_month" id="birthdate_month"
onChange="document.getElementById('birthdate').value = 'test';">
<option>1</option>
<option>2</option>
</select>
<input type="text" name="birthdate" id="birthdate"
value="">
Example (this doesnt work):
<select name="birthdate_month" id="birthdate_month"
onChange="document.getElementById('birthdate').value = 'test';">
<option>1</option>
<option>2</option>
</select>
<span id="birthdate">
<input type="text" name="birthdate" id="birthdate"
value="">
<span class="textfieldRequiredMsg">please enter your
birthday</span>
</span>
<script type="text/javascript">

</script>
Is there a way to change the value of a Spry validated text
field using JavaScript?
Thanks.

Why can't the value of a text field be set using JavaScript
when it's validated using the Spry validation widget.
Example (this works):
<select name="birthdate_month" id="birthdate_month"
onChange="document.getElementById('birthdate').value = 'test';">
<option>1</option>
<option>2</option>
</select>
<input type="text" name="birthdate" id="birthdate"
value="">
Example (this doesnt work):
<select name="birthdate_month" id="birthdate_month"
onChange="document.getElementById('birthdate').value = 'test';">
<option>1</option>
<option>2</option>
</select>
<span id="birthdate">
<input type="text" name="birthdate" id="birthdate"
value="">
<span class="textfieldRequiredMsg">please enter your
birthday</span>
</span>
<script type="text/javascript">

</script>
Is there a way to change the value of a Spry validated text
field using JavaScript?
Thanks.

Spry bar text alignment

Similar Messages

Maybe you are looking for