Spry Text Fields "Invisible" in IE6 and IE7: css Spry Dreamweaver ie6 ie7 javascript web design form building

by: chilternPCPosted on 2009-08-14 at 16:26:58ID: 25103203

have you tried downloading the latest framework. which is now v1.6?

http://labs.adobe.com/technologies/spry/home.html

by: chilternPCPosted on 2009-08-14 at 16:28:07ID: 25103204

anthoer thought...
have you a stlye sheet that you have defined and included?
maybe leaft it out if you did see what happens

by: v2MediaPosted on 2009-08-14 at 16:32:51ID: 25103221

I would say you have invalid markup for your input fields and spry validation messages, or a logic error with your css. By default, spry validation messages are hidden with css. If your markup/css is invalid, the whole span, including the input field, will be hidden (in IE6-7).

If you cant/wont post a link/paste an example to the html/css source, then compare your html for the input fields to the adobe lab example: -

http://labs.adobe.com/technologies/spry/articles/textfield_overview/

by: alphagraphics297Posted on 2009-08-14 at 17:21:21ID: 25103367

Yes, I'm using the latest spry 1.6.1- I haven't modified it as well. I just ran the validate markup utility in Dreamweaver and there were no errors for that specific page. To clarify the issue, the fields are there, there is just no box around the text inputs in ie6/ie7. All the spry validation works, and you can enter text into the boxes. Users just don't see the boxes if they are using ie6/ie7. All other browsers are ok...thanks for the help, I upload the code for this page for reference. Much of this is something I've inherited except for the form.

<!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" xml:lang="en" lang="en">
<head><title>AlphaGraphics of Seattle | Contact Us</title><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /><meta name="keywords" content="printing, business printing, commercial printing, copying, scanning, design experts, " /><meta name="description" content="AlphaGraphics provides all your business printing needs, from large-scale posters to flyers and business cards, we handle design and printing of your business needs." /><meta name="robots" content="nofollow,noindex" />
    <style type="text/css">
        @import url(../../css/default.css);
        @import url(../../css/print.css) print;
    </style>
    <script src="../../SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>
<script src="../../SpryAssets/SpryValidationTextarea.js" type="text/javascript"></script>
<link href="../../SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css" />
<link href="../../SpryAssets/SpryValidationTextarea.css" rel="stylesheet" type="text/css" />    
</head>
<body id="body">
<div>
</div>
 
    <a name="topofpage"></a>
    <div id="Header">
        <a href="index.html">
            <img src="../../site/logo.gif" id="Logo" alt="AlphaGraphics Logo" /></a>
        <div id="Location">
            <p class="City">
                AlphaGraphics of Seattle</p>
            <p class="Serving">
                Serving the Puget Sound Area</p>
        </div>
        <ul id="Primary">
            <li class="phone">(866) 960-9110</li>
        </ul>
    <!-- end #Primary -->
        <div class="clear">
        </div>
    </div>
    <!-- end #Header -->
    <div id="Wrapper">
        <div id="Canvas" class="Left">
            <div id="Banner">
                <div class="Categories">
                    <p class="button">
                        <a href="design.html">
                            Printing Products</a></p>
                </div>
                <div class="Categories">
                    <p class="button">
                        <a href="printing.html">
                            Printing Services</a></p>
                </div>
                <div class="Categories">
                    <p class="button">
                        <a href="contact.html">
                            Contact Us</a></p>
                </div>
            </div>
            <div class="Padding Content1"><br />
    <form action="/HDWASPForm2Database/Form2Database.asp" method="post" name="form1" id="form1" accept-charset="iso-8859-1">
      <table width="700" border="0" cellspacing="5" cellpadding="0">
        <tr>
          <td colspan="2"><h4 class="nomargin">Please Submit Your Information in Below Form or </h4>
              <h4 class="nomargin">Call (866) 960-9110, Monday-Friday 8am-6pm Today.</h4>
            <p class="formtextbold"><em>Please no Job Seekers or Solicitation Calls</em>.</p></td>
        </tr>
        <tr>
          <td width="200" class="formtextredbold">Your Name:</td>
          <td width="500"><span id="sprytextfield1">
            <input name="name" type="text" class="formtext" id="name" size="50" maxlength="150" />
            <span class="textfieldRequiredMsg">A value is required.</span></span></td>
        </tr>
        <tr>
          <td width="200" class="formtextredbold">Company:</td>
          <td width="500"><span id="sprytextfield2">
            <input name="company" type="text" class="formtext" id="company" size="50" maxlength="150" />
            <span class="textfieldRequiredMsg">A value is required.</span></span></td>
        </tr>
        <tr>
          <td width="200" class="formtextbold">Address:</td>
          <td width="500"><span id="sprytextfield3">
            <input name="address" type="text" class="formtext" id="address" size="50" maxlength="150" />
          </span></td>
        </tr>
        <tr>
          <td width="200" class="formtextbold">City, State, Zip:</td>
          <td width="500"><span id="sprytextfield4">
            <input name="citystatezip" type="text" id="citystatezip" size="50" maxlength="150" />
          </span></td>
        </tr>
        <tr>
          <td width="200" class="formtextredbold">Phone Number:</td>
          <td width="500"><span id="sprytextfield5">
            <input name="phone" type="text" class="formtext" id="phone" />
            <span class="textfieldRequiredMsg">A value is required.</span></span></td>
        </tr>
        <tr>
          <td width="200" class="formtextredbold">E-mail Address:</td>
          <td width="500"><span id="sprytextfield6">
            <input name="email" type="text" class="formtext" id="email" />
            <span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span></span></td>
        </tr>
        <tr>
          <td width="200" class="formtextbold">Preferred Response:</td>
          <td width="500"><select name="response">
              <option value="E-mail">E-mail</option>
              <option value="Phone">Phone</option>
          </select></td>
        </tr>
        <tr>
          <td width="200" class="formtext">Your Project Information</td>
          <td width="500">&nbsp;</td>
        </tr>
        <tr>
          <td width="200" class="formtextbold">Project Name:</td>
          <td width="500"><span id="sprytextfield7">
            <input name="projectname" type="text" class="formtext" id="projectname" size="50" maxlength="150" />
          </span></td>
        </tr>
        <tr>
          <td width="200" class="formtextbold">Project Due Date:</td>
          <td width="500"><span id="sprytextfield8">
            <input name="projectduedate" type="text" class="formtextbold" id="projectduedate" size="50" maxlength="150" />
          </span></td>
        </tr>
        <tr>
          <td width="200" class="formtextbold">Project Details:</td>
          <td width="500" class="formtext">Please provide project details in the field below.</td>
        </tr>
        <tr>
          <td width="200" class="formtextbold">&nbsp;</td>
          <td width="500" class="formtext"><span id="sprytextarea1">
            <textarea name="projectdetails" id="projectdetails" cols="50" rows="7"></textarea>
            <span class="textareaMaxCharsMsg">Exceeded maximum number of characters.</span><span id="countsprytextarea1">&nbsp;</span></span></td>
        </tr>
        <tr>
          <td width="200" class="formtextbold">&nbsp;</td>
          <td width="500" align="left"><input type="submit" name="submit" id="submit" value="Send Request" />
              <input type="reset" name="cancel" id="cancel" value="Cancel" /></td>
        </tr>
      </table>
      <input type="hidden" name="hdwuploadfolder" id="hdwuploadfolder" value="297_seattle" />
      <input type="hidden" name="hdwtablename" id="hdwtablename" value="297_seattle" />
      <input type="hidden" name="hdwok" id="hdwok" value="http://www.printingcommunication.com/wa/seattle/thankyou.html" />
      <input type="hidden" name="hdwemail" id="hdwemail" value="marketing297+alphacommunicate.com" />
      <input type="hidden" name="hdwnook" id="hdwnook" value="http://www.printingcommunication.com/wa/seattle/sorry.html" />
    </form>
    <p>&nbsp;
        </p>
    <p>&nbsp;
        </p>
    <p>&nbsp;
        </p>
    <p>&nbsp;
        </p>
 
 
                
            </div>
<div id="Right">
</div>
</div>
        <!-- end #Canvas -->
        <div id="Left">
            <div id="SideBanner">
            <p>
                Need it Now? Call us at
                <br />
                (866) 960-9110</p>
            <a href="contact.html">
                <span class="button">Request Quote</span></a>
            </div>
      <div class="Clear">
                <br />
            </div>
            
    
 
<div class="SidebarLeftContactPage">
   <h4>
        Address &amp; Hours</h4>
    <p>AlphaGraphics of Seattle<br />
      3131 Elliott Ave, Suite 100<br />
      Seattle, WA 98121<br />
        Tel. (866) 960-9110<br />
        <br />
        Mon-Fri: 8am - 6pm <br />Sat: Closed <br />Sun: Closed <br /> <br />
        Please no Job Seekers<br />
        or Solicitation Calls.    </p>
    
<div id="ctl00_LeftContentPlaceHolder_AddressAndHours1_ReadMoreAboutUsBlurb">
	
        <br /><span style="font-size:14px;font-weight:bold;">Read More <a href="about.html">About Us</a></span>
    
</div>
    
    
    <div id="ctl00_LeftContentPlaceHolder_AddressAndHours1_Testimonials">
	
        <h4>Testimonials</h4>
        <p>I've found AlphaGraphics to be the most responsive printer on my list. They have an array of equipment that allows them to be very competitive. The best part is that they are creative thinkers who can help the convention bureau achieve dramatic presentation, quick turnaround, or low cost - and sometimes all three at once!<br />
          - Louise Demetrescu        </p>
    </div>
    
</div>
<div class="SidebarLeftBot">
</div>
<div class="Clear">
</div>
</div>
        <!-- end #Left -->
        <div class="Clear">
        </div>
    </div>
    <!-- end #Wrapper -->
    <div id="Footer">
        <p id="FooterLinks">
            <a href="index.html">
                Home</a> | <a href="printing.hmtl">
                    Services</a> | <a href="design.html">
                        Products</a> | <a href="contact.html">
                            Contact Us</a></p>
    </div>
    <!-- end #Footer -->
    <div id="Debug">
    </div>
    <script type="text/javascript">
<!--
var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1");
var sprytextfield2 = new Spry.Widget.ValidationTextField("sprytextfield2");
var sprytextfield3 = new Spry.Widget.ValidationTextField("sprytextfield3", "none", {isRequired:false});
var sprytextfield4 = new Spry.Widget.ValidationTextField("sprytextfield4", "none", {isRequired:false});
var sprytextfield5 = new Spry.Widget.ValidationTextField("sprytextfield5", "none");
var sprytextfield6 = new Spry.Widget.ValidationTextField("sprytextfield6", "email");
var sprytextfield7 = new Spry.Widget.ValidationTextField("sprytextfield7", "none", {isRequired:false});
var sprytextfield8 = new Spry.Widget.ValidationTextField("sprytextfield8", "none", {isRequired:false});
var sprytextarea1 = new Spry.Widget.ValidationTextarea("sprytextarea1", {isRequired:false, counterType:"chars_remaining", counterId:"countsprytextarea1", maxChars:2000, useCharacterMasking:false});
//-->
</script>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-886330-16");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:
164:
165:
166:
167:
168:
169:
170:
171:
172:
173:
174:
175:
176:
177:
178:
179:
180:
181:
182:
183:
184:
185:
186:
187:
188:
189:
190:
191:
192:
193:
194:
195:
196:
197:
198:
199:
200:
201:
202:
203:
204:
205:
206:
207:
208:
209:
210:
211:
212:
213:
214:
215:
216:
217:
218:
219:
220:
221:
222:
223:
224:
225:
226:
227:
228:
229:
230:
231:
232:
233:
234:
235:
236:
237:
238:
239:
240:
241:
242:
243:
244:
245:

Select all Open in new window

by: alphagraphics297Posted on 2009-08-14 at 17:31:43ID: 25103385

It has something to do with the non spry css on the site. Any idea what to look for in the site's css?

by: v2MediaPosted on 2009-08-14 at 17:37:24ID: 25103400

Ya, need to see ../../css/default.css

by: alphagraphics297Posted on 2009-08-14 at 18:49:41ID: 25103624

There was some old css relating to forms in the css. I commented out the below items and it seems to have fixed the IE6/IE7 problem. I'm not exactly sure which piece was causing the issue, but I don't think I need any of it. I'm looking forward to reworking this site someday... Thanks for your help!

/* Forms
 
 
.infoTable TD {font-weight:bold;font-size:10px}
form, input, tr, td, table, {
border:0;
}
 
.required {color:#FF0000;}
 
.infoTable INPUT, TEXTAREA, SELECT {border:1px solid #999;background-color:#fcfcfc;}
 
.submit {border:1px solid #999;}
 
-----------------------------------------------------------------------------*/
 
 
 /*-----------------------------------------------
-----------------FORM VALIDATION-----------------
 
 
.infoTable .LV_validation_message{
    font-weight:bold;
    margin:0px 0px 5px -130px;
	position:absolute;
	float:right;
	font-size:13px;
	height:20px;
	max-width:200px;
	z-index:1000;
}
 
.infoTable .LV_valid {
    color:#005b8f !important;
	
}
	
.infoTable .LV_invalid {
    color:#d70000 !important;
	
}
    
.LV_valid_field,
input.LV_valid_field:hover, 
input.LV_valid_field:active,
textarea.LV_valid_field:hover, 
textarea.LV_valid_field:active {
    border: 1px solid #005b8f !important;
}
    
.LV_invalid_field, 
input.LV_invalid_field:hover, 
input.LV_invalid_field:active,
textarea.LV_invalid_field:hover, 
textarea.LV_invalid_field:active {
    border: 1px solid #d70000 !important;
}
 
-----------------------------------------------*/

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:

Select all Open in new window

by: jason1178Posted on 2009-08-14 at 19:07:56ID: 25103692

I don't see anything out of the ordinary wrong, so I think v2media has it right with some code/validation error is choking the older, more retarded versions of IE.

See this:

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.printingcommunication.com%2Fwa%2Fseattle%2Fcontact.html

On line 181, one <br /> tag is missing the /

-----

If that doesn't fix it, try making a new form on a blank page and re-add the Spry validation fields to it. If that works, we'll have to try and do a line-by-line debug of the various CSS files.

by: alphagraphics297Posted on 2009-08-14 at 19:39:25ID: 31616023

This pointed me in right direction. I thought it was a spry problem and was looking at the spry css when I should have been looking at the default.css

Question

Spry Text Fields "Invisible" in IE6 and IE7

Subscribe now for full access to Experts Exchange and get

Instant Access to this Solution

css Spry Dreamweaver ie6 ie7 javascript web design form building

Adobe Dreamweaver

Cascading Style Sheets (CSS)

Asynchronous Javascript and XML (AJAX)

Trusted by hundreds of thousands everyday for fast, accurate and reliable tech support.

See what Experts Exchange can do for you.

Got a question?

We've got the answer.

Need individual assistance?

Our experts are ready to help.

Want to learn from the best?

Read articles from industry experts.

Working on a long term project?

Store your work and research.

What Makes Experts Exchange Unique?

Trusted by the world's most respected brands.

Faithfully serving IT professionals since 1996.

Related Solutions

Free Tech Articles

Cloud Class Webinars

Join the Community

Give a Little. Get a Lot.

Answers

3 Ways to Join

The Experts

The Experts

Testimonials

Testimonials

Testimonials

Business Clients

Business Clients

In the Press

In the Press

In the Press