Why doesn't this page display anything in IE6?

  • Thread starter Thread starter EnigmaticSource
  • Start date Start date
E

EnigmaticSource

I'm beginning a corporate intranet site, and I use Firefox / Opera as
my default development platforms, but when I tested the demo pages in
Internet Explorer, nothing at all renders.

Site URL: http://www.aboring.com:81/payroll/?module=piecework

Validates XHTML 1.0 / Transitional
Doc-type text/html
Works perfectly in Firefox, renders but scripts broken in Opera

(Oh, and please don't tease about the cruftyness, I've only spent about
25 minutes on it so far)

-Mark
CIO, Fineline Industries, Inc.
 
Just for the sake of completeness, here's the xhtml:

<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Fineline Inc, Internet System</title>
<link rel="stylesheet" type="text/css" href="style/application.css"
/>
<script src="scripts/application.js" type="text/javascript" />
</head>
<body>
<div class="title">
<h1>Proram Title Goes Here</h1>
</div>
<div class="program">
<div class="strip">
<h1>Options</h1>
<form
action="http://www.aboring.com:81/payroll/index.php"><label>Select a
Group</label>
<select name="selectedDepartment"><option value="1">Load / Mold Prep /
Detail</option><option value="2">Gelcoat</option><option
value="3">Lamination</option><option value="4">Upholstery Cut and
Assembly</option><option value="5">Woodshop</option><option
value="6">Pull / Grind / Plexus</option><option value="7">Upholstery
Installer</option><option value="8">Parts Department</option><option
value="9">Warranty Support</option><option
value="10">Tooling</option><option value="11">Machine
Shop</option><option value="12">Rigging / Lake Test</option><option
value="13">Assembly / Plexus</option></select>
</form></div> </div>
<div class="navigation">
<ul>
<li class="list collapsed"><a
onclick="styleToggleCollapse(this.parentNode)" href="#">Payroll
System</a>
<ul id="test"><li>test</li></ul></li>
</ul>
</div>
</body>
</html>

And the associated Style Sheet:

/*
(C) 2006
Mark C. Roduner, Jr.
Fineline Industries
All Rights Reserved, Unauthorized Reporduction and Copying Strictly
Prohibited
*/

..strip {
border-style:solid;
border-width:.5pt;
border-color:#24A4FF;
white-space:nowrap;
}

..strip h1 {
font-size:14px;
color:white;
border-style:solid;
border-width:1pt;
border-color:black;
background-color:#12517E;
margin:0px;
padding:0pt;
text-align:right;
}

..strip label {
text-align:right;
font-weight:bolder;
margin-right:2em;
}

..program {
width:80%;
float:right;
}
..title {
text-align:right;
background-color:#12417E;
color:white;
margin-bottom:2pt;
}
..title h1,h2,h3,h4 {
margin:0px;
letter-spacing:1em;
text-transform:uppercase;
font-family:sans-serif;
}
..navigation {
width:20%;
border-width:1pt;
white-space:nowrap;
}

..navigation ul {
list-style-image:url("../images/menuitem-dull.gif");
padding-left:14px;
margin-left:0px;
text-indent:0px;
}
..navigation ul li {
list-style-position:inside;
background-color:white;
}
..navigation li.expanded {
list-style-image:url("../images/downarrow.gif");
}
..navigation li.collapsed {
list-style-image:url("../images/rightarrow.gif");
}
..navigation li.collapsed ul {
display:none;
}
 
I use Firefox and Opera simply because I do all of my development work
on FreeBSD, it just seems to be the natural fit for me.

Even if I wasn't a BSD user in my experience it's easier to write a
compliant and working web application in Firefox and then write some
kludge code to work around IE's misgivings.

Back to the topic, the nested UL/LI's are valid in both HTML4 and
XHTML1 and I couldn't find any errata for IE6 to check for bad tag
combinations. The only known problem for IE6 and XHTML that I know of
is that the document must be served as 'text/html' and not as he proper
XHTML type 'application/xhtml+xml'.

Perhaps it's the XML declaration that's giving it problems, I'll
probably try changing that for IE and seeing if it still works, but
that will break the XHTML validation.
 
Eureka!
The solution to the problem is that Internet explorer didn't like my
short tag for <script />, and instead requires that the end tag be
present with no content like so <script src="..."
type="text/javascript"></script>. Although less than ideal, it now
works in IE and still validates properly.

Just for reference:

<script src="scripts/application.js" type="text/javascript" /> breaks
IE, but is the proper way
<script src="scripts/application.js" type="text/javascript"></script>
Works, but well, it's a kludge

(Yet another reason why I don't like IE)
-Mark C. Roduner, CIO Fineline Industries
 
Hi Enigmatic Source,
You have dns errors for your site
http://www.dnsreport.com/tools/dnsreport.ch?domain=www.aboring.com

but I am not sure this is the root of the problem. My own experience is that
IE6 SP2 (for XP windows) is intollerant of orphaned tags but by your source
this does not seem the case. I see that you have a nested <li> mmm... maybe.
I can only suggest that you debug by removing selective elements from your
page and then try rendering in IE (both 6 versions).
One point of conjecture is why you choose FF and OP as your test browser
platforms. Together they only have around 14% of the browser market
(www.thecounter.com). It may be that the corporate policy of your intranet
is for these platforms and if this is your only audience then code for those
platforms. Just avoid document.all notation in your scripts and remove
server side styling then all browsers will be able to render your pages.
KISS works!
 
Back
Top