Link to home
Start Free TrialLog in
Avatar of snix123
snix123

asked on

https and IE8 - secure page problem

I have a form which collects registration information for a conference.  Recenly, a few uses have informed me that they were having problems with the web page not loading completely and/or receiving security messages and warnings.  Using IE7, I had no problem whatsoever with the page displaying properly.  I upgraded to IE8, and not the page will not load everything.  I have the site on the list of my trusted sites.  I have checked the "display mixed content" in the internet options of IE8.  

What I want to be able to do is have the web page load correctly in IE8 without having to rely on users to set the "mixed content" choice on the security tab in IE8. Most of the users I work with would have no idea how to do this.  I want my entire page to be secure.  THe page has some javascript navigation and images on it including the SSL certicate icon.

Do I just need to use fully qualified paths, i.e. https://www.myform.com/images/myimage.gif? 

Thanks in advance for any help.
Avatar of jcimarron
jcimarron
Flag of United States of America image

snix123--IE8 has problems rendering some websites.  It uses a different standard than does IE7.  
From MS  "Windows Internet Explorer 8 is Microsofts latest web browser. Unlike previous versions, Internet Explorer 8 renders content in the most standards-compliant way possible. This means that web pages will be displayed in Internet Explorer 8s standards mode by default. Through product feedback channels, our users have indicated that, during the beta period, some websites may not have been compatible with Internet Explorer 8 in its default, standards-based mode. As a result, these domains have been added to a list of sites that, for the short-term, are most likely to be displayed better in Compatibility View. All Internet Explorer 8 users are given the choice to use this list, and the subset that chooses to do so will see each listed domain automatically displayed in Compatibility View, without additional user interaction or notice. The sites on this list have high traffic volume (in their regions), and having a compatible website ensures a significant number of Internet Explorer 8 users will have a great experience. This list will be periodically updated and automatically downloaded to Internet Explorer 8 users who have opted-in to use Compatibility View updates from Microsoft. For more information on Compatibility View list updates, please see - http://support.microsoft.com/kb/960321."
Having said all that it means the viewer should use Compatibility Viewer.  However that is not practical for customers.  Here is some info on coding for IE8.  See especially toward the bottom about Testing Browser Modes.
http://msdn.microsoft.com/en-us/library/dd565628(VS.85).aspx

Avatar of snix123
snix123

ASKER

Thanks for your input.  One problem I have though is the page I'm trying to work with won't finish loading.  It just hangs (in IE8 only) and then I cannot run this debugger. Hangs event when I remove the https and just use http.  I'm not sure what it's getting stuck on.  Works fine in other browsers.

Does Microsoft really think we can re-code all our sites to meet their standards?  I don't really think I have the time to do that...  I really can't tell my customers to adjust browser settings; some are lucky to be able to GET to the browser... :-)

Thanks again, will hopefully update this thread soon.
snix123--I wonder if this can explain the hang problem
http://windowsfixup.com/2009/03/speeding-up-internet-explorer-8/
Avatar of snix123

ASKER

Thanks for the additional information. I may have found the culprit. I think it's the stylesheet used for the form. (Reproduced below in its original form). The stylesheet has bug fixes in it for IE6 at the end! I removed most of them, except this:

label.preField, form .inlineSection .oneField .inlineLabel {
width: expression('9em');
}

and then the page loaded o.k.  
Thanks for all your help.  Any additional comments are appreciated!

<style title="Style1" type="text/css">
/* 
 wFORMS 2.0 Stylesheet - Bureaucrat Theme v3 - Aug. 2006
 See http://www.formassembly.com/wForms
 
 To be used along with wforms-jsonly.css
 This stylesheet and the associated images are Copyright (c) 2005 Cedric Savarese (http://www.4213miles.com)	
 and licensed under the Creative Commons Attribution-ShareAlike License (http://creativecommons.org/licenses/by-sa/2.0/) 
*/
#NASWAForm
form {
	padding: 10px;
	/*background-color: #FAFAFA;*/
	/*border: 1px solid #878177;	*/
	font-family: Arial;
	color: #003366;
}
/*#passwordStrength { height:10px; display:block; float:left; } .strength0 { width:250px; background:#cccccc; } .strength1 { width:50px; background:#ff0000; } .strength2 { width:100px; background:#ff5f5f; } .strength3 { width:150px; background:#56e500; } .strength4 { background:#4dcd00; width:200px; } .strength5 { background:#399800; width:250px; }*/
 
/* Form Sections ======================================================================== */
/* Fieldset  */
 
fieldset {
	margin: 20px 0;
	padding: 15px 10px;
	background-color:#FAFAFA;
	/*border: 3px solid #E4E3D3;*/	
	background-color: #FFFFFF;
	border: 1px solid #663333;
	overflow: auto;
}
legend {
	padding: 2px 5px;
	/*color: #888;*/
	color: #663333;
	font-size: 115%;
	
}
/* Nested Fieldset  */
fieldset fieldset  {
	background-color:#FFF;
	border: 1px solid #ccc;
}
fieldset fieldset legend {
	font-size: 110%;
	
}
/* Inline Section */
.inlineSection {
	overflow: auto;
	width: 100%;	
}
/* Grid Section */
form table {
	border-collapse: collapse;
}
form td {
	padding: 0 4px;
	border-left: 1px solid #E4E3D3;
	border-right: 1px solid #E4E3D3;	
}
form th {
	padding: 0 4px;
}
form .alternate-1 {
	background-color:#E4E3D3;
}
form .alternate-1 td {
	border-left: 1px solid #F4F3E3;
	border-right: 1px solid #F4F3E3;	
}
form .alternate-0 {
}
 
/* Combo Label + Input Field =========================================================== */
form .oneField {
   font-weight:bold;
   font-size:10pt;
 
}
form .inlineSection .oneField {
	padding: 0;
	margin-right: 4px;
	white-space: nowrap;	
	
}
/* Ties together a label and its checkbox or radio */
form .oneChoice {
	white-space: nowrap; 	
	color: #000000; font-size:10pt;
	
}
 
/* Field Labels ======================================================================== */
 
/* Base */
label, form .label {	
	color: #333;
	margin: 0;
}
/* Text inputs / Select label */
label.preField {
	display: -moz-inline-box;
	display: inline-block;	
	margin: 0.6em 4px 0 0;
	padding: 0 2px;
	min-width: 9em;
	background-color: #EDEDDC;
	background-color: #FFFFFF;
	color: #663333;
}
label.preField2 {
	display: -moz-inline-box;
	display: inline-block;	
	margin: 0.6em 4px 0 0;
	padding: 0 2px;
	min-width: 9em;
	background-color: #FAFAFA;
 
}
/* Radio / Checkbox group label */
form .label  {
	display: block; 
	margin: 0.6em 4px 0 0;
	padding: 2px;
}
/* Individual Checkbox / Radio label */
label.postField  {
	margin: 0 4px 0 4px;
}
/* Label when inside an inline section */
form .inlineSection .oneField .inlineLabel {
	display: -moz-inline-box;
	display: inline-block;	
	margin: 0.6em 4px 0 0;
	padding: 0 2px;
	min-width: 9em;
	background-color: #EDEDDC;
	white-space: normal;
	
}
 
/* Inputs ======================================================================== */
 
textarea {
	padding: 0;
	vertical-align: top;
	margin: 2px 2px 1px 0;
}
input {
	margin: 0 2px 0 0;
	}
input[type=text], input[type=password] {
}
select {
	margin: 2px 2px 1px 0;
	padding: 0;
}
.inlineSection .oneField select {
	margin: 0 2px 1px 0 !important;
	
}
.gridSection select  {
	margin: 0 !important;
}
 
/* Buttons ======================================================================= */
 
form .actions {
	text-align: center;
	margin: 20px 0 10px 0;	
}
/* Submit button */
form .primaryAction {
	font-weight: bold;
}
/* Cancel button */
form .secondaryAction {
	color: grey;
}
form .secondaryAction:hover {
	color: black;
}
 
 
/* Form Builder Related Rules ===================================================== */
 
/* Form or Fieldset instruction paragraph. */
form .instructions {
	margin: 1em 0;
	font-style: italic;
	font-size: 10pt;
}
form .instructions2 {
	margin: 1em 0;
	font-style: italic;
	font-size: 10pt;
	color : #CC0000;
	font-weight: bold;
	text-align:center;
}
 
form .instructions3 {
	margin: 1em 0;
	font-style: italic;
	font-size: 10pt;
	font-weight: bold;
	text-align:center;
}
/* Asterisk on required fields */
form .reqMark {
	color: #CC3300;
	padding: 0 4px;
}
 
/* wForms Related Rules ========================================================== */
 
/* Field w/ a validation error */
form .errFld {
	padding: 1px;
	border: 1px solid #F00;
}
/* Styling for message associated with a validation error. */
form .errMsg {	
	color: #CC3333 !important;
	display: block;
}
/* Field-Hint with focus */
form .field-hint {
	float: right;
	clear: right;
	color: #000;
	background-color: #FFFFFF;
	border: 1px solid #bbb;
	margin: 2px 0 7px 0;
	padding: 2px;
	font-size: 85%;
	min-height: 2em;	
 
}
/* Field-Hint without focus */
form .field-hint-inactive {
	float: right;
	clear: right;
	color: #666;
	border: 1px solid #E4E3D3;
	background-color: #FFFFFF;
	margin: 2px 0 7px 0;
	padding: 2px;
	font-size: 85%;
	min-height: 2em;	
 
}
/* Repeat Behavior divs (when not set on a fieldset) */
div.repeat {
	margin: 3px 0;
	padding-right: 6px;
	border: 1px dotted #ccc;
	background-color: #FFFFFF;
}
div.removeable {
	margin: 3px 0;
	padding-right: 6px;	
	border: 1px dotted #ccc;
	background-color: #F3F3F3;
}
/* Links generated by the Repeat Behavior */
form .duplicateLink {
	line-height: 260%;
	font-weight: bold;
}
form .removeLink {
	line-height: 260%;
}
form td .duplicateLink, form td .removeLink  {
	margin: 0;
	line-height: 100%;
}
/* Switch Behavior Classes */
.onstate-a,  .onstate-b,  .onstate-c,  .onstate-d,
.onstate-e,  .onstate-f,  .onstate-g,  .onstate-h, 
.onstate-i,  .onstate-j,  .onstate-k,  .onstate-l, 
.onstate-m,  .onstate-n,  .onstate-o,  .onstate-p, 
.onstate-q,  .onstate-r,  .onstate-s,  .onstate-t,
.onstate-u,  .onstate-v,  .onstate-w,  .onstate-x,  
.onstate-y,  .onstate-z,  .onstate-aa, .onstate-ab,
.onstate-ac, .onstate-ad, .onstate-ae, .onstate-af,
.onstate-ag, .onstate-ah, .onstate-ai, .onstate-aj,
.onstate-ak, .onstate-al, .onstate-am, .onstate-an,
.onstate-ao, .onstate-ap, .onstate-aq, .onstate-ar,
.onstate-as, .onstate-at, .onstate-au, .onstate-av,
.onstate-aw, .onstate-ax, .onstate-ay, .onstate-az {
	display: block;
}
/* offstate classes for the Switch Behavior are in wforms-jsonly.css */
 
 
 
/* IE6 BUG FIXES ==================================================================== */
form {
	height:expression('1%'); /* IE Pick-a-boo bug fix */
}
form fieldset {
	position:expression('relative'); /* Fixes IE problem with fieldset+legend boundaries */
	margin-top:expression('1em');
	padding-top:expression('1.5em');
	overflow: expression('visible');
}
form fieldset legend {
	position: expression('absolute'); 
	top: expression('-.5em'); /* Fixes IE problem with fieldset+legend boundaries */
	left:expression('.5em');
}
form .inlineSection .oneField {
	display: expression('inline-block');		
}
 
label.preField, form .inlineSection .oneField .inlineLabel {
	width: expression('9em');
}
 
</style>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of jcimarron
jcimarron
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial