Spry text fields "invisible" on ie6/ie7

Hi, Attached is a screen shot of how spry text fields look in their initial state under ie6 and ie7 on a project at www.printingcommunication.com/wa/seattle/contact.html
They are "invisible".
I'm using Dreamweaver CS4 and spry 1.6.1. I have not made any modifications to the default spry yet. This works ok on every other browser. Does any one know what modifications I need to make to have these text fields show ok under IE6/IE7? Thanks...

With all associated files (including the apparently interfering css file) linked, open the page in Dreamweaver.
Make sure your CSS Styles Panel is open;
select "Current" on that panel to get a look at the styles that are in play.
In the bottom of the Styles panel, select the asterisk-asterisk-downarrow icon at the bottom left, so that you see only the styles in use.
Then (if you have the option) select the right-hand cascade button...it looks like a little flight of stairs.
Okay, in Design View, click on one of your input fields. Leave the cursor there and look over at the CSS Styles Panel. You will see the cascade of styles that are affecting that item. The lowest-most will be the most specific, but all that affect your item will show in a list.
Make sure the bottom of the styles panel is opened up...you may have to drag it open if you haven't used it; close other panels below to make more room.
You will see there all the attributes that have been defined for the particular style you are working with.
This should help you to focus on what is exactly going on. The form tags come with their own styling, so you'll have to look for styles that explicitly state something like input {border: none;} You may need to step up the list (pausing to check the attributes list) to find the affecting style.
By the same token, you can alter the styling as you wish, for instance:
<style type="text/css">

</style>
Of course, if you are using Spry Validation Text Fields, you might not want to make them red, as I have done! They will have their own set of colors.
I hope some of this helps your situation. If anything, it will let you get "up close and personal" with your CSS Styles Panel
Z

Similar Messages

I have created a form in DW 5.0 using spry text fields. I am wondering what I did wrong to make the

I have created a form in DW 5.0 using spry text fields. I am wondering what I did wrong to make the form fields show text?
Thank you.

Thanks again. There's one other thing I wanted to achieve here. I need the date format to be displayed like "dd/mm/yyyy" and not like it's doing by default at the moment (i.e. mm/dd/yyyy)
I don't have any knowledge of jQuery but had a go anyway at trying to fix this using this link http://api.jqueryui.com/datepicker/ as aid to try adjust my code. Obviously I couldn't get it to work so far... So I'm looking for a little bit of help from anyone who knows a bit of jQuery.
Here's the original default code (just the stuff that goes in the 'head' of the page):
<script>
$(function() {
      $( "#datepicker" ).datepicker();
</script>
And here's what I tried adding to make it work:
<script>
$(function() {
      $( "#datepicker" ).datepicker();
      $.datepicker.formatDate( "dd/mm/yyyy" );
</script>
Obviously I tried other combinations including .parseDate instead of .formatDate etc etc none of which worked.
I'm wondering whether the extra code should perhaps go inside where the XXs are - $( "#datepicker" ).datepicker(XX)
Anyway, if somebody could help me out that would be great. Cheers!

Can I copy a form with spry text fields?

I have two forms that are almost identical with the exception of a few fields. Instead of completely redoing the 2nd form I would like to just save the document in dreamweaver with a new name and change/add the fields I need. I've used spry text fields though. Will I have any issues with just copying and then changing this form as far as the spry files are concerned or am I just better off creating a whole new form?

Keep in mind that form field names need to exactly match your form-processing script.
Spry was abandoned by Adobe in late 2012. Since I don't use Spry for anything, I can't honestly say if the form validation will continue to work or not. I much prefer the ease of HTML5 form validation alone or with jQuery for older browsers.
HTML5 Form with jQuery Validation
So my answer is rebuild with HTML5 forms.
Nancy O.

Spry Text Field Custom Validation Patern PHP

I am using PHP and I'm not sure but I believe I may be unable
to create a custom validation pattern. What I would like to do; is
create a user pattern that forces Alpha and Numeric characters
only, with no spaces for use in Spry Text Fields for User Names and
Passwords. Has anyone got any advice?

Sorry :) This was a case of RTFM. I have found what Ineeded
in the documentation. I have listed below what I was looking for,
just in case anyone else is looking for it. Not quite what I was
hoping for, but better than a slap in the face with a wet kipper.
"0"
Whole numbers between 0 and 9
"A"
Uppercase alphabetic characters
"a"
Lowercase alphabetic characters
"B"; "b"
Case-insensitive alphabetic characters
"X"
Uppercase alphanumeric characters
"x"
Lowercase alphanumeric characters
"Y"; "y"
Case-insensitive alphanumeric characters
Any character

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

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.

Text field spry validation over 2 table cells?

Hello,
This might be a real simple thing, but I can't figure it out. Can anyone please help?
I'm using DW CS3 and I'm building a contact form. I'm using DW's Spry validation for my text field. It's an email field. I'd like to put the label in one table cell and the input box in the adjacent cell. But I can't figure out how. I'm using the attach label using 'for' attribute.
Here is how DW writes the code:
               <tr>
                    <td>
                         <span id="sprytextfield5">
                         <label for="email">Email</label>
                         <input type="text" name="emaill" id="emaill" />
                         <span class="textfieldInvalidFormatMsg">Invalid format.</span></span>
                    </td>
                </tr>
As you can see, it's all in one cell.
I've tried massaging the code every which way but then the widget doesn't work.
Please help!
Thank you in advance!
Claudia

Hello,
This might be a real simple thing, but I can't figure it out. Can anyone please help?
I'm using DW CS3 and I'm building a contact form. I'm using DW's Spry validation for my text field. It's an email field. I'd like to put the label in one table cell and the input box in the adjacent cell. But I can't figure out how. I'm using the attach label using 'for' attribute.
Here is how DW writes the code:
               <tr>
                    <td>
                         <span id="sprytextfield5">
                         <label for="email">Email</label>
                         <input type="text" name="emaill" id="emaill" />
                         <span class="textfieldInvalidFormatMsg">Invalid format.</span></span>
                    </td>
                </tr>
As you can see, it's all in one cell.
I've tried massaging the code every which way but then the widget doesn't work.
Please help!
Thank you in advance!
Claudia

Spry validation text field issue

I've put several spry validation text fields on my site and
you can still click through to the next page without having to
enter any information. What am I missing?

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

Possible to change type of spry validation text field at run time?

I am trying to record a date of death on a form, which obviously for live people might not require a value. I have a radio group (Yes/No) that specifies whether the fields associated with the date of death are visible (select for month, day and year). For the year, I have it set to be an integer with a minimum and maximum value. The selects have an invalid value of -1 set, with one item labeled "Select month" and "Select day" given the -1 value.
When the "no" button is clicked, I want to make it so that submitting the form does not cause validation errors for the spry fields associated with the date of death. I have successfully added onChange events to the select objects that call javascript, along the lines of spryselect1.invalidValue = -2. I can also make it so that the text field representing the year of death is not forced to be required: sprytextfield1.isRequired = false.
However, I'm having a hard time getting the "invalid format" validation to be canceled. I have tried executing sprytextfield1.type = "none", since looking at the source code in SpryValidationTextField.js seems to indicate that the object's type property is important. However, this doesn't work; I think that's because the type property is used to look up a validation function in an array when the object is constructed, and may not be referenced again after that.
So, I'm looking for either:
a property/method to call to effectively change the type OR
information on whether reconstructing the variable with new options will work. I am not sure if any event handlers registered during the object's original construction will still be fired even if I make the variable point to a new object. I see a destroy function in the source code that might do what I want, but my Javascript knowledge isn't too great, so I don't know if that method needs to be called explicity or whether it happens implicitly when an object is garbage collected.
Thanks in advance for any help you might be able to give.
Ryan

This may help
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Deleting and rebuilding validations</title>
<link href="http://config.spry-it.com/css?f=ValidationTextField" rel="stylesheet" type="text/css" />
<script src="http://config.spry-it.com/js?f=ValidationTextField" type="text/javascript"></script>
<script type="text/javascript">
// build validations and delete / destroy them
function val(e){
     // get the value
     value = e.value;
     // see what radion button we have
     if(value == "Married"){
          // if there inst a validaton build one
          if(!sprytextfield1){
               sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1");
          // if there is a validaiton in sprytextfield destory it, and clear the variable
          if(sprytextfield2 && sprytextfield2.destroy){
               sprytextfield2.resetClasses();
               sprytextfield2.destroy();
               sprytextfield2 = null;
          // same as the rest
          if(sprytextfield3 && sprytextfield3.destroy){
               sprytextfield3.resetClasses();
               sprytextfield3.destroy();
               sprytextfield3 = null;
     } else if(value == 'Defacto'){
          if(!sprytextfield2){
               sprytextfield2 = new Spry.Widget.ValidationTextField("sprytextfield2");
          if(sprytextfield1 && sprytextfield1.destroy){
               sprytextfield1.resetClasses();
               sprytextfield1.destroy();
               sprytextfield1 = null;
          if(sprytextfield3 && sprytextfield3.destroy){
               sprytextfield3.resetClasses();
               sprytextfield3.destroy();
               sprytextfield3 = null;
     } else if(value == 'Single'){
          if(!sprytextfield3){
               sprytextfield3 = new Spry.Widget.ValidationTextField("sprytextfield3");
          if(sprytextfield1 && sprytextfield1.destroy){
               sprytextfield1.resetClasses();
               sprytextfield1.destroy();
               sprytextfield1 = null;
          if(sprytextfield2 && sprytextfield2.destroy){
               sprytextfield2.resetClasses();
               sprytextfield2.destroy();
               sprytextfield2 = null;
     // proceed with the rest as normal
     return true;
</script>
</head>
<body>
<form id="form1" method="post" action="#">
     <p>
          <input type="radio" name="radio" id="Married" value="Married" onclick="val(this);" />
          <label for="Married">Married</label>
     </p>
     <p>
          <input type="radio" name="radio" id="Defacto" value="Defacto" onclick="val(this);" />
          <label for="Defacto">Defacto</label>
     </p>
     <p>
          <input type="radio" name="radio" id="Single" value="Single" onclick="val(this);" />
          <label for="radio">Single</label>
     </p>
     <hr />
     <span id="sprytextfield1">
     <input name="married" id="f_married" type="text" value="forMariedOnly" />
     <span class="textfieldRequiredMsg">A value is required.</span></span><span id="sprytextfield2">
     <input name="defacto" id="f_defacto" type="text" value="forDefactoOnly" />
     <span class="textfieldRequiredMsg">A value is required.</span></span><span id="sprytextfield3">
     <input name="single" id="f_single" type="text" value="forSingleOnly" />
     <span class="textfieldRequiredMsg">A value is required.</span></span>
     <hr />
     <input type="submit" value="Submit" />
</form>
<script type="text/javascript">

</script>
</body>
</html>
Gramps

Adobe Spry jQuery conflict in Text Field validation.

I am using Adobe Spry for my form validation, and jQuery for hiding / showing elements on a page based on responses to questions. jQuery works fine for this for me. Where I am having a problem is using jQuery to take the value of one input and enter it into a second input text field with after adding a year to it.
Adobe Spry is always validating the fields an enforcing the date to be in the correct format mm/dd/yyyy.
jQuery will only work if I remove the script reference to SpryValidationTextField.js   it is 1.6.1 v.37
Has anyone ever seen this and can help me. Everything works fine independently, but will not play together.
Here is a link to the page on the site.
http://www.stuckey.com/forms/insurance_info.php
Thanks in advance,
Joe
Joe Scarpetta
Apphia Solutions, LLC
FileMaker and Web Development
http://apphiasolutions.com
[email protected]

Joe Scarpetta wrote:
Hi Arnout,
I removed the no conflict, because when the block of code below was loaded after it, it would not work.
What is supposed to happen is what ever date is entered into the Effective Date, the Expiration Date should populate with the same date + 1 year.
Thanks,
Joe
For some reason this script block is never executed:
<script type="text/javascript">
$(document).ready(function(){
$(function() {
    $('#EffectiveDate').change(function () {
        var parts = $(this).val().split('/');
        var date = new Date(parseInt(parts[2], 10), parseInt(parts[0], 10) - 1, parseInt(parts[1], 10));
        date.setFullYear(date.getFullYear() + 1);
        $('#ExpirationDate').val(isNaN(date.getFullYear()) ? '' : formatDate(date));
function formatDate(date) {
    var day = date.getDate();
    var month = date.getMonth() + 1;
    var year = date.getFullYear();
    return (month < 10 ? '0' : '') + month + '/' + (day < 10 ? '0' : '') + day + '/' + year;
</script>
What I would suggest is fixing your page first, it does not really validate and give some "nasty" errors:
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.stuckey.com%2Fforms%2Finsurance_info.ph p&charset=%28detect+automatically%29&doctype=Inline&group=0

Invisible Text Fields/Print Button error

Ok, so I'm creating a blank form for users to input data fields and then print them out on a pre-made paper form. I started out using Adobe Designer 7.0.
While I was using 7.0, I made all of the Text Fields, and spent hours lining them up to print out correctly in their corresponding boxes on the pre-made paper form that we load into the printer. (Already tried scanning the form and creating a form that way, but the scanner is weird and scales everything incorrectly.)
I upgraded to Adobe LiveCycle Designer ES today so that I could make Text visible on the form, but not visible when it prints, so that I can label each Text Field, otherwise it's just a blank template with random Text Fields all over.
Well, after upgrading, I created the Texts prompts above each Text Field and I selected Visible (screen-only) for each one of them, hoping that once I printed the form out, those texts prompts won't print out on the pre-made paper form. But, to my dismay, they printed out even though I selected the option for them to NOT print out.
So I was doing some reading and decided to add a "print button" to my form. I added the print button. Made it visible (screen-only). Printed out another form, and BAM. All of the hours I spent lining up those Text Fields went to waste because all of a sudden my Text Fields are all over the paper. I immediately removed the print button, assuming that was the problem, but for some reason my text fields are still all over the paper.
I don't want to spend the hours and hours I spent lining them up again. It just took too long. Does anyone know what happened here? If so, how do I fix it?
Also, how do I make it so that the Text prompts I created do NOT print when I print out the form?
I'm sure this is all an easy fix for you experienced ones. I'm a noob... obviously...

Thank you for the help, but I'm still not really sure what I should be doing here. I went to form properties, but didn't see any kind of settings that would fix what I'm having problems with. I'm using Adobe Designer ES 8.2.1 now, but for some reason when I make my text Visible (screen-only), it still prints out when I click print. This shouldn't happen and I can't figure out what's wrong. I've reasearched all I can, but can not find a solution.

Spry Menu 2.0 issues in IE7..   yes another one!

I have CS4, and have used the widget browser to create a Spry Menu 2.0 and have imported it to my site. It displays fine in every browser except for IE7. I have been reading a LOT of threads on issues similiar to this one, so I'm prepared to tell everyone I know to upgrade to at least IE8!! However, I would like to fix it if possible. The menu bar is located in an include file and is attached to all my pages through the php function. I have made zero changes to the css code since I imported it into the site.
I also am wondering why there are two css pages for the menu bar.??
Any help would be appreciated..
One of the pages on the site is: michaelandrewshairstudio.com/offers.php
That page is: ( I have taken out some meta tags and content, but the div's are all still in place.) I also deleted some commented tags by accident when I imported it..
<!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" />
<title>Michael Andrews Hair Salon Offers</title>
<link href="Spry-UI-1.7/css/Menu/basic/SpryMenuBar.css" rel="stylesheet" type="text/css" />
<link href="Spry-UI-1.7/css/Menu/basic/SpryMenuBasic.css" rel="stylesheet" type="text/css" />
<script type='text/javascript' src="Spry-UI-1.7/includes/SpryDOMUtils.js"></script>
<script type='text/javascript' src="Spry-UI-1.7/includes/SpryDOMEffects.js"></script>
<script type='text/javascript' src="Spry-UI-1.7/includes/SpryWidget.js"></script>
<script type='text/javascript' src="Spry-UI-1.7/includes/SpryMenu.js"></script>
<script type='text/javascript' src="Spry-UI-1.7/includes/plugins/MenuBar2/SpryMenuBarKeyNavigationPlugin.js"></script>
<script type='text/javascript' src="Spry-UI-1.7/includes/plugins/MenuBar2/SpryMenuBarIEWorkaroundsPlugin.js"></script>
<link href="CSS/stylesA.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="outerwrapper">
<div id="header">
<div id="navbar">
<?php include("Spry-UI-1.7/includes/SpryMenuBar.php"); ?>
</div>
</div>
<div id="mainbody">
<div id="logo">
</div>
<hr />
<div id="content">
</div>
</div>
<div id="footer">
<div id="footernav">
</div>
<div id="footertext">
</div>
</div>
</div>
</body>
</html>
SpryMenuBar.css
#MenuBar {
background-color:#333;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; /* Specify fonts on on MenuBar and subMenu MenuItemContainer, so MenuItemContainer,
            MenuItem, and MenuItemLabel
            at a given level all use same definition for ems.
            Note that this means the size is also inherited to child submenus,
            so use caution in using relative sizes other than
            100% on submenu fonts. */
font-weight: normal;
font-size: 14px;
font-style: normal;
padding:0;
border-color: #999999 #999999 #999999 #999999;
border-width:3px;
border-style: outset outset outset outset;
/* Caution: because ID+class selectors do not work properly in IE6, but we want to restrict these rules to just this
widget instance, we have used string-concatenated classnames for our selectors for the layout type of the menubar
in this section. These have very low specificity, so be careful not to accidentally override them. */
.MenuBar br { /* using just a class so it has same specificity as the ".MenuBarFixedCentered br" rule bleow */
display:none;
.MenuBarLeftShrink {
float: left; /* shrink to content, as well as float the MenuBar */
width: auto;
.MenuBarRightShrink {
float: right; /* shrink to content, as well as float the MenuBar */
width: auto;
.MenuBarFixedLeft {
float: left;
width: 80em;
.MenuBarFixedCentered {
float: none;
width: 80em;
margin-left:auto;
margin-right:auto;
.MenuBarFixedCentered br {
clear:both;
display:block;
.MenuBarFixedCentered .SubMenu br {
display:none;
.MenuBarFullwidth {
float: left;
width: 100%;
/* Top level menubar items - these actually apply to all items, and get overridden for 1st or successive level submenus */
#MenuBar .MenuItemContainer {
padding: 0px 0px 0px 0px;
margin: 0; /* Zero out margin on the item containers. The MenuItem is the active hover area.
    For most items, we have to do top or bottom padding or borders only on the MenuItem
    or a child so we keep the entire submenu tiled with items.
    Setting this to 0 avoids "dead spots" for hovering. */
#MenuBar .MenuItem {
padding: 0px 24px 0px 0px;
background-color:#333333;
border-width:1px;
border-color: #cccccc #ffffff #cccccc #999999;
border-style: none none none solid;
#MenuBar .MenuItemFirst {
border-style: none none none none;
#MenuBar .MenuItemLast {
border-style: none none none solid;
#MenuBar .MenuItem .MenuItemLabel{
text-align:center;
line-height:1.4em;
color:#cccccc;
background-color:#333333;
padding: 6px 15px 6px 39px;
width: 10em;
width:auto;
.SpryIsIE6 #MenuBar .MenuItem .MenuItemLabel{
width:1em; /* Equivalent to min-width in modern browsers */
/* First level submenu items */
#MenuBar .SubMenu .MenuItem {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 12px;
font-style: normal;
background-color:#666666;
padding:0px 2px 0px 0px;
border-width:1px;
border-color: #cccccc #cccccc #cccccc #cccccc;
/* Border styles are overriden by first and last items */
border-style: solid solid none solid;
#MenuBar .SubMenu .MenuItemFirst {
border-style: solid solid none solid;
#MenuBar .SubMenu .MenuItemFirst .MenuItemLabel{
padding-top: 6px;
#MenuBar .SubMenu .MenuItemLast {
border-style: solid solid solid solid;
#MenuBar .SubMenu .MenuItemLast .MenuItemLabel{
padding-bottom: 6px;
#MenuBar .SubMenu .MenuItem .MenuItemLabel{
text-align:left;
line-height:1em;
background-color:#666666;
color:#cccccc;
padding: 6px 12px 6px 5px;
width: 7em;
width:auto;
/* Hover states for containers, items and labels */
#MenuBar .MenuItemHover {
background-color: #333333;
border-color: #cccccc #cccccc #cccccc #cccccc;
#MenuBar .MenuItemWithSubMenu.MenuItemHover .MenuItemLabel{
background-color: #333333; /* consider exposing this prop separately*/
color: #ffffff;
#MenuBar .MenuItemHover .MenuItemLabel{
background-color: #333333;
color: #ffffff;
#MenuBar .SubMenu .MenuItemHover {
background-color: #666666;
border-color: #cccccc #cccccc #cccccc #cccccc;
#MenuBar .SubMenu .MenuItemHover .MenuItemLabel{
background-color: #666666;
color: #ffffff;
/* Submenu properties -- First level of submenus */
#MenuBar .SubMenuVisible {
background-color:#333;
min-width:100%; /* This keeps the menu from being skinnier than the parent MenuItemContainer - nice to have but not available on ie6 */
border-color: #ffffff #ffffff #ffffff #ffffff;
border-width:0px;
border-style: none none none none;
#MenuBar.MenuBar .SubMenuVisible {/* For Horizontal menubar only */
top: 100%; /* 100% is at the bottom of parent menuItemContainer */
left:0px; /* 'left' may need tuning depending upon borders or padding applied to menubar MenuItemContainer or MenuItem,
     and your personal taste.
     0px will left align the dropdown with the content area of the MenuItemContainer. Assuming you keep the margins 0
     on MenuItemContainer and MenuItem on the parent
     menubar, making this equal the sum of the MenuItemContainer & MenuItem padding-left will align
     the dropdown with the left of the menu item label.*/
z-index:10;
#MenuBar.MenuBarVertical .SubMenuVisible {
top: 0px;
left:100%;
min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse */
/* Submenu properties -- Second level submenu and beyond - these are visible descendents of .MenuLevel1 */
#MenuBar .MenuLevel1 .SubMenuVisible {
background-color: #ffffff;
min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse*/
top: 0px; /* If desired, you can move this down a smidge to separate top item''s submenu from menubar -
    that is really only needed for submenu on first item of MenuLevel1, or you can make it negative to make submenu more
    vertically 'centered' on its invoking item */
left:100%; /* If you want to shift the submenu left to partially cover its invoking item, you can add a margin-left with a
    negative value to this rule. Alternatively, if you use fixed-width items, you can change this left value
    to use px or ems to get the offset you want. */
/* IE6 rules - you can delete these if you do not want to support IE6 */
/* A note about multiple classes in IE6.
* Some of the rules above use multiple class names on an element for selection, such as "hover" (MenuItemHover) and "has a subMenu" (MenuItemWithSubMenu),
* giving the selector '.MenuItemWithSubMenu.MenuItemHover'.
* Unfortunately IE6 does not support using mutiple classnames in a selector for an element. For a selector such as '.foo.bar.baz', IE6 ignores
* all but the final classname (here, '.baz'), and sets the specificity accordingly, counting just one of those classs as significant. To get around this
* problem, we use the plugin in SpryMenuBarIEWorkaroundsPlugin.js to generate compound classnames for IE6, such as 'MenuItemWithSubMenuHover'.
* Since there are a lot of these needed, the plugin does not generate the extra classes for modern browsers, and we use the CSS2 style mutltiple class
* syntax for that. Since IE6 both applies rules where
* it should not, and gets the specificity wrong too, we have to order rules carefully, so the rule misapplied in IE6 can be overridden.
* So, we put the multiple class rule first. IE6 will mistakenly apply this rule. We follow this with the single-class rule that it would
* mistakenly override, making sure the misinterpreted IE6 specificity is the same as the single-class selector, so the latter wins.
* We then create a copy of the multiple class rule, adding a '.SpryIsIE6' class as context, and making sure the specificity for
* the selector is high enough to beat the single-class rule in the "both classes match" case. We place the IE6 rule at the end of the
* css style block to make it easy to delete if you want to drop IE6 support.
* If you decide you do not need IE6 support, you can get rid of these, as well as the inclusion of the SpryMenuBarIEWorkaroundsPlugin.js script.
* The 'SpryIsIE6' class is placed on the HTML element by the script in SpryMenuBarIEWorkaroundsPlugin.js if the browser is Internet Explorer 6. This avoids the necessity of IE conditional comments for these rules.
.SpryIsIE6 #MenuBar .MenuBarView .MenuItemWithSubMenuHover .MenuItemLabel /* IE6 selector */{
background-color: #333333; /* consider exposing this prop separately*/
color: #ffffff;
.SpryIsIE6 #MenuBar .MenuBarView .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel/* IE6 selector */{
background-color: #666666; /* consider exposing this prop separately*/
color: #ffffff;
.SpryIsIE6 #MenuBar .SubMenu .SubMenu /* IE6 selector */{
margin-left: -0px; /* Compensates for at least part of an IE6 "double padding" version of the "double margin" bug */
SpryMenuBasic.css
/* SpryMenuBasic.css - version 0.5 - Spry Pre-Release 1.7 */
/* Copyright (c) 2010. Adobe Systems Incorporated. All rights reserved. */
/* This is the css for a basic Spry 2 MenuBar.
* The first section is basic layout, and should in general not need to be modified.
* The final section of this file specifies images to use for arrows for the menu. These
* are either down or right-pointing as required by horizonatal or vertical layouts. You
* can either replace the referenced images with your own, or you can modify these rules to
* point to your won images.
* These rules are supplemented by those specified in the OAM file for inclusion in the html document,
* or alternatively, the file SpryMenuBarBasicSkin.css which is included with this widget. */
/* Resets for ul and li in menus */
.MenuBar .MenuBarView, .MenuBar .SubMenuView {
display:block;
list-style:none;
margin:0;
padding:0;
/*** Layout Rules for Basic Menu ***/
/* Top Level MenuBar
* Because we float the MenuItemContainers in the MenuBar, we have to make sure the menubar wrapper expands to hold them all.
* The simplest way is to float the widget wrapper
.MenuBar { /* overridden by .MenuBarVertical version of this rule */
float:left;
width:100%;
.MenuBarVertical {
float:left; /* Used to make menubar shirink to fit contents */
width:auto;
/* SubMenus */
.MenuBar .SubMenu {
display:block;
position:absolute;
top:0;
left:-10000px; /* By default, all non-visible submenus are hidden by moving way to the west */
padding:0;
/* First level of submenus - pulls down from horizontal menubar, right from vertical */
.MenuBar .SubMenuVisible{ /* overridden by .MenuBarVertical version of this rule */
top:100%;
left:0px;
.MenuBarVertical .SubMenuVisible {
top:0px;
left:100%;
/* All submenus below level 1. All pullout to the right */
.MenuBar .SubMenu .SubMenuVisible {
display:block;
position:absolute;
top:0px;
left:100%;
/* MenuItems, MenuItemLabels, and MenuItemContainers */
.MenuBar .MenuItem {
display:block;
text-decoration:none;
.MenuBar .MenuItemLabel {
display:block;
.MenuBar .MenuItemContainer {
position:relative;
white-space:nowrap;
float:left; /* overridden by .MenuBarVertical version of this rule */
display:block;
margin:0;
padding:0;
.MenuBarVertical .MenuItemContainer {
float:none;
.MenuBar .SubMenu .MenuItemContainer {
float:none;
/* Layout Rules needed by IE6 - excluded from other browsers */
.SpryIsIE6 .SubMenu .SubMenu {
width:100px;
height:1%;
.SpryIsIE6 .MenuBar .SubMenuVisible .SubMenuVisible {
width:auto;
/* End Layout section */
* Arrows - This section specifies arrow images for a submenu dropdowns in Basic SpryMenu.
.MenuBar .MenuItemLabel{
background-image:none;
/* For all arrows used here, we depend upon the image to push itself away from right edge, or the user can add right padding to the MenuItem */
.MenuBar .MenuItemWithSubMenu .MenuItemLabel{
background-image:url("images/ArrowMenuDownGrey.gif");
background-position:right center;
background-repeat:no-repeat;
.MenuBar .MenuItemHover.MenuItemWithSubMenu .MenuItemLabel{
background-image:url("images/ArrowMenuDownWhite.gif");
background-position:right center;
background-repeat:no-repeat;
.MenuBarVertical .MenuItemHover.MenuItemWithSubMenu .MenuItemLabel{
background-image:url("images/ArrowMenuRight.gif");
background-position:right center;
background-repeat:no-repeat;
.MenuBarVertical .MenuItemWithSubMenu .MenuItemLabel{
background-image:url("images/ArrowMenuRight.gif");
background-position:right center;
background-repeat:no-repeat;
.MenuBar .SubMenu .MenuItemWithSubMenu .MenuItemLabel{
background-image:url("images/ArrowMenuRight.gif");
background-position:right center;
background-repeat:no-repeat;
.MenuBar .SubMenu .MenuItemHover.MenuItemWithSubMenu .MenuItemLabel{
background-image:url("images/ArrowMenuRight.gif");
background-position:right center;
background-repeat:no-repeat;
/* IE6 rules for Arrows */
.SpryIsIE6 .MenuBar .MenuItemWithSubMenuHover .MenuItemLabel{
background-image:url("images/ArrowMenuDown.gif");
background-position:right center;
background-repeat:no-repeat;
.SpryIsIE6 .MenuBarVertical .MenuItemWithSubMenuHover .MenuItemLabel{
background-image:url("images/ArrowMenuRight.gif");
background-position:right center;
background-repeat:no-repeat;
.SpryIsIE6 .MenuBar .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel{
background-image:url("images/ArrowMenuRight.gif");
background-position:right center;
background-repeat:no-repeat;

I love your subject line
Spry Menu 2.0 issues in IE7..   yes another one!
It is us as designers/developers that need to create websites for all current browsers. No sense in blaming the browsers, although in this case we could blame Spry Menu 2.0.
Problem with that is that Spry Menu 2.0 has been successfully tested in all modern browsers.
This leaves us with just one possibility, the designer/developer has erred somewhere along the line. After having checked the support files (JS and CSS) and looked at the markup, we now go to the constructor and see the following
var MenuBar = new Spry.Widget.MenuBar2("#MenuBar", {
    widgetID: "MenuBar",
    widgetClass: "MenuBar MenuBarLeftShrink",
    insertMenuBarBreak: true,
A comma after the last value.
I also am wondering why there are two css pages for the menu bar.??
One is the standard CSS for the menubar and under normal circumstances, should not be touched; the other is for the convenience of the designer/developer so that he/she can tweak the menubar to suit. If you wish, you can combine both. In all cases, keep in mind that the CSS for the standard (basic) menubar should come first, so that the other CSS can override the first.
This needs to be corrected in your document
Gramps

Text Area steals Focus from Text Field when selected with mouse

I have created a very simple form with 4 spry validation elements here :: http://octopusdesign.net/contactus.html
When I attempt to select the 'Your Email' text field using the mouse, focus is grabbed by the text area above it.
It is only possible to get focus on the 'Your Email' text field by using tab.
My best guess is that this is a bug in the framework.
In addition to updating my spry libraries to 1.6 from 1.4 I've tried the following things::
Reordering the elements in the form.
Creating the elements in a different order.
Replacing the validation elements with ordinary elements.
None of these fixed the problem.
Strangely, if I remove the validation text area there is no problem.
If anyone can shed some light on this I would really appreciate it.
Wisdom gratefully received.
Chris

Furthermore ::
I've tried to reconstruct the form from scratch and discovered that if you have a validation text field and a validation text area in any order on the form, selecting the 2nd element with the mouse always results in the first element stealing the focus.

Doesn't recognize the text field

This is kinda weird.I am defining
private String empid;
empid is a text field in the main page.
And I am checking for validity in the Form Bean using
if (empid.equals("")) {
errors.put("empid","Please enter a valid Employee ID");
empid="";
allOk=false;
else {
try {
int x = Integer.parseInt(empid);
} catch (NumberFormatException e) {
errors.put("empid","Please enter a valid Employee ID");
empid="";
allOk=false;
But the problem is it to to the retry page(gives the message Please Enter a valid ID) even when I enter the correct number.
Why is this happening. Any help will be appreciated.
Thanks!

Hello and welcome to the forum,
You could make the Submit button, which is also a way to submit the entry in the Text Entry Box, invisible by deleting the text and turn it into a Transparent button. Then put it on top of 'Search', so when the user clicks on Search he will submit his entry.
Lilybiri

Adding text field to e-mail subject

Hi all,
I've got a button on my form that should submit the form in pdf format, to a fixed mail address with a fixed subject message, that has variable content dragged from a text field, i.e "Subject; New e-DCR <TextField12.rawValue>"
Firstly, I got everytihng working with an automatic Submit by E-mail button, but couldn't solve the subject line text issue. Next, I added a normal button, with a Regular controil type, & tried the following script (from another forum post) under the Click event in script editor - now, the button won't even fire....
var Mailto = "[email protected]";
var Subject = "New e-DCR" + TextField12.rawValue;
var Mail = "mailto:" + Mailto + "?Subject=" + Subject;
event.click.submitForm({
cURL: Mail,
bEmpty: true,
cSubmitAs: "PDF"
I'm a complete n00b at scripting, so any advice & help would be very much appreciated. Thanks!

Hi Ian,
This can be done by using a dummy submit button. Try the following.
Drag a button into the form. Lets name it as DummySubmitButton. Then in the control Type select Submit. In the Presence dropdown select Invisible.Then select Submit tab next to Field tab.Then in the SubmitURl mention the url you want to send. Like this - mailto:[email protected] Select Submit As XML/ PDF as you want. This button will not be visible in the form.
Now drag another button. Lets name as SubmitButton. This will be visible in the form. It will be or regular control type. In the click event of this SubmitButton write the following code
DummySubmitButton.event__click.submit.target = "mailto:[email protected]" + "?subject=" + "New e-DCR " + TextField12.rawValue ;
DummySubmitButton..execEvent("click");
What this script will do is it will use set the submit functionality like mailto, Subject before submitting. After setting these parameters finally the click event of the dummy button would be called and it will submit the form.
Hope this helps.
Thanks,
Bibhu.

Spry text fields "invisible" on ie6/ie7

Similar Messages

Maybe you are looking for