Wierd IE7 situation

trdunsworth
avatar
rank newbie

newbie


Posts: 3
Joined: 2008-06-08
Location: Olathe

Posted: Wed, 2008-07-23 20:30

Hello all,

I'm trying to develop a custom page within PowerSchool. The page renders reasonably right in FF3, IE8, Opera 9.51, and Safari 3.1 on Windows. However, since most everyone will be using IE7 and it doesn't work there, I'm somewhat hosed right now and after re-writing it 4 times and seeing the CSS is passing validation, I'm at a loss, so I am kindly asking for help on this one please.

The enclosed code is the container for other forms which is why the code will look non-standard and I know the XHTML doesn't pass validation. This is a PowerSchool thing, not my bright idea.

Here is the CSS:

@charset "utf-8";
/* CSS Document */
body, td, p, ul, div, th{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #333;
	margin: 0;
	padding: 0;
	border: 0;
	list-style-type: none;
	text-align:center;
	width:auto;
}

.body{
	font-family:Arial, Helvetica, sans-serif;
	font-size:10px;
	color:#333;
}

.bold{
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	font-weight:bold;
	color:#333;
}

a {
	text-decoration:none;
}

a:hover {
	text-decoration:underline;
}

a:link {
	color:#36c;
	text-decoration:none;
}

a:visited{
	color:#36c;
	text-decoration:none;
}

a:active{
	color:#ccc;
	text-decoration:none;
}

.header {
	font-family:Arial, Helvetica, sans-serif;
	font-size:16px;
	font-weight:bold;
	color:#000;
}

.headline{
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	font-weight:bold;
	color:#000;
}

.headline-g{
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	font-weight:bold;
	color:#333;
}

.preference {
	font-family:Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight:bold;
	color:#000;
}

.perference-g{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:bold;
	color:#333;
}

.schoolterm{
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#333;
}

.schooltermbold{
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	font-weight:bold;
	color:#333;
}

tr.headerRow{
	background-color:#f6f6f6;
}

tr.evenRow{
	background-color:#fff;
	display:table-row;
}

tr.oddRow{
	background-color:#edf3fe;
	display:table-row;
}

tr.hiddenRow{
	display: none;
}

p.messageText{
	color:#f00;
	margin-bottom:8px;
}

div.messageBlock{
	text-align:center;
}

td.odd{
	background-color:#d3e5fd;
}

td.even{
	background-color:#e0dfe3;
}

table{
	width:auto;
	border:1px;
	padding:inherit;
	border-color:#fff;
}

.disclaimer{
	font-family:Arial, Helvetica, sans-serif;
	font-size:9px;
	color:#999;
}

.fixed{
	font-family:"Courier New", Courier, monospace;
	font-size:10px;
	color:#333;
}

.red{
	font-family:Arial, Helvetica, sans-serif;
	font-size:10px;
	color:#f00;
}

.green{
	font-family:Arial, Helvetica, sans-serif;
	font-size:10px;
	color:#060;
}

.maroon{
	font-family:Arial, Helvetica, sans-serif;
	font-size:10px;
	color:#900;
}

.gray{
	font-family:Arial, Helvetica, sans-serif;
	font-size:10px;
	color:#999;
}

.white{
	font-family:Arial, Helvetica, sans-serif;
	font-size:10px;
	color:#fff;
}

.error{
	font-family:Arial, Helvetica, sans-serif;
	font-size:10px;
	color:#9c0000;
}

.debugtext{
	font-family:Arial, Helvetica, sans-serif;
	font-size:9px;
	color:#999;
}

.daypatternlist{
	font-family:Arial, Helvetica, sans-serif;
	font-size:9px;
	width:auto;
}

.accToggler{
	margin:auto;
	padding:inherit;
	width:auto;
	background-color:#acc95f;
	color:#f4f4f4;
	border:1px solid #fff;
	cursor:pointer;
	font-family:Arial, Helvetica, sans-serif;
}

.accContent{
	margin:auto;
	width:auto;
}

Here is the XHTML:

<!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>PowerSchool Enrollment Form</title>
	<meta name="keywords" xml:lang="en-us" content="Independence School District PowerSchool Enrollment Form" />		
	<meta name="date" content="2008-07-13" />
	<meta name="author" content="Tony Dunsworth" />
	<meta name="language" content="en-US" />
	<meta name="description" content="Independence School District PowerSchool Enrollment Form" />
	<meta name="revised" content="2008-07-13" />
	<meta name="copyright" content="2008, Independence School District" />
	<meta name="robots" content="noindex, nofollow" />
	<meta name="contact" content="tdunsworth@indep.k12.mo.us" />
    <meta http-equiv="imagetoolbar" content="no" />
    ~[wc:commonscripts]
    <script type="text/javascript">
<!--
message = "The right click function has been disabled. \n\nThis site is copyrighted by the Independence School District. All rights reserved.\n\n© 2008 Independence School District";

function NoRightClick() {
   if(((navigator.appName=="Microsoft Internet Explorer")&&(event.button > 1))
   ||((navigator.appName=="Netscape")&&(b.which > 1))){
   alert(message);
   return false;
   }
}
document.onmousedown = NoRightClick;

// -->
    </script>
    <script type="text/javascript">
	var accordion;
var accordionTogglers;
var accordionContents;

window.onload = function() {

accordionTogglers = document.getElementsByClassName('accToggler');

accordionTogglers.each(function(toggler){
//remember the original color
toggler.origColor = toggler.getStyle('background-color');
//set the effect
toggler.fx = new Fx.Color(toggler, 'background-color');
});

accordionContents = document.getElementsByClassName('accContent');

accordion = new Fx.Accordion(accordionTogglers,
accordionContents,{
//when an element is opened change the
//background color to blue
onActive: function(toggler){
toggler.fx.toColor('#6899CE');
},
onBackground: function(toggler){
//change the background color to the original (green)
//color when another toggler is pressed
toggler.setStyle('background-color', toggler.origColor);
}
});
} 
</script>
	<script type="text/javascript" src="scripts/combine_last_first.js"></script>
    <script type="text/javascript" src="scripts/commonscripts.js"></script>
    <link href="Scripts/powerschool.css" rel="Stylesheet" type="text/css" />
	</head>
<body>

<p class="header">PowerSchool Enrollment Form</p>	
	<h2 class="bold">PowerSchool Enrollment Form</h2>
    
    	<p class="accToggler">Demographics</p>
        	<p class="accContent">~[x:insertfile;enrollment/demographics.html]</p>
            
        <p class="accToggler">ELL</p>
        	<p class="accContent">~[x:insertfile;enrollment/ell.html]</p>
            
        <p class="accToggler">Parent&frasl;Guardian Information</p>
        	<p class="accContent">~[x:insertfile;enrollment/guardianinfo.html]</p>
            
        <p class="accToggler">Siblings</p>
        	<p class="accContent">~[x:insertfile;enrollment/siblings.html]</p>
            
        <p class="accToggler">Previous Schools</p>
        	<p class="accContent">~[x:insertfile;enrollment/prevschools.html]</p>
            
        <p class="accToggler">Transportation</p>
        	<p class="accContent">~[x:insertfile;enrollment/transportation.html]</p>
            
        <p class="accToggler">Other Required Information</p>
        	<p class="accContent">~[x:insertfile;enrollment/otherinfo.html]</p>
            
        <p class="accToggler">Legal</p>
        	<p class="accContent">~[x:insertfile;enrollment/legal.html]</p>
            
        <p>
			<a href="http://jigsaw.w3.org/css-validator/">
    			<img style="border:0;width:88px;height:31px"
       			 src="http://jigsaw.w3.org/css-validator/images/vcss-blue"
       			 alt="Valid CSS!" />
			</a>
		</p>

    
</body>
</html>

I have attached a screenshot as well.

AttachmentSize
PS1.jpg92.31 KB
thepineapplehead
thepineapplehead's picture
rank Moderator

Moderator


Posts: 9209
Joined: 2004-06-30
Location: Milton Keynes

Some proprietary code in

Posted: Thu, 2008-07-24 09:58

Some proprietary code in there and a 1.1 doctype - is there any way you can edit the HTML to get it to validate? It's a bit of a fruitless task trying to fix the CSS if the HTML is broken.

trdunsworth
trdunsworth's picture
rank newbie

newbie


Posts: 3
Joined: 2008-06-08
Location: Olathe

Unfortunately, the

Posted: Thu, 2008-07-24 13:08

Unfortunately, the proprietary code is a necessity for the application in which this is buried. I can pull out the javascript and place it in a separate file, but the ~[x:insertfile;] code has to remain. The application has a 32k per page limit and that's the code they created to call additional pages from other places to get around the limit. If I don't follow that convention, everything breaks worse than that.

Sadly, I don't think I'm going to be able to work the code in the base that way. I hadn't thought of writing it to HTML 4, so I may try that, but I don't know how that will help things.

trdunsworth
trdunsworth's picture
rank newbie

newbie


Posts: 3
Joined: 2008-06-08
Location: Olathe

Go figure

Posted: Thu, 2008-07-24 14:37

I went ahead and changed it to HTML 4.01 transitional and now it renders correctly in IE7 and I can live with the rendering in the other browsers.

I'm not going to pretend I get that, but with a deadline fast approaching, I will take what I can get.

thanks for the suggestion.