Forum: Ruby on Rails Problems Displaying Images in IE 6 - save yourself 12 hours

Announcement (2017-05-07): www.ruby-forum.com is now read-only since I unfortunately do not have the time to support and maintain the forum any more. Please see rubyonrails.org/community and ruby-lang.org/en/community for other Rails- und Ruby-related community platforms.
2dd904ec5981c31e7bb7a5743a53caf8?d=identicon&s=25 Bruce Balmer (brucebalmer)
on 2005-12-06 18:22
(Received via mailing list)
Dear All.

My turn to be helpful.

The situation: I spent 12 hours yesterday wrestling (and finally
achieving victory over) the following problem.  It turns out that the
final fix took less than 60 seconds.  The problem appears to be
caused by something TEXTMATE does automatically (I am not criticising
TEXTMATE. I love it and nothing is fault free).  The fix is simple,
the problem is stupid. Read on, in case you have the same problem
some time (you may well).

The problem:
I built a very, very simple website (I am not allowed to post you the
code).  It displays a page with some  images on. You click on images
to make selections. The selections are noted in the database and the
final act is where the votes to date are displayed.  All very simple,
all very beautiful. Worked perfectly in safari and firefox.

However, no images would display in MSIE 6.  Which was a problem
because that is what the client is using.

First theory:
I observed that IE 6 was blocking something and thought it might be
to do with cookies.  So, I tested it on IE 5.0 for mac. Sure enough,
no images. Reduced the security levels and the images appeared.
Increased the security level again - but could not stop the images
from appearing.  Even though they were appearing now on my mac - they
still would not do so on the client's computer, even after clearing
out cookies, clearing the cache etc.  This theory was rubbish, I did
not know that yet.

Second theory:
I thought it might be some firewall they had.  So I got another
client (outside their org) to test the site. Same problem.

Third theory
Read some MS docs that said that for cookies to work in IE 6 you had
to have a privacy policy.  Seemed odd.  Some people on the mailing
list wrote to me telling me that that was probably untrue.  In the
interim, I investigated this route, hence my asking about privacy
policies.  This was not the issue.

Fourth theory
Decided I could get round the whole problem by not sending any
cookies. Took out the code where I used session variables (thinking
that would do it).  But that did not stop a cookie getting deposited.
In the end I found out that if you put " session :off " in the
application controller file you can stop cookies being sent.  That
did not solve the problem.

Fifth and final theory
Upon further investigation it was clear that this problem was
isolated to this site. I have three sites running on my host machine
where almost everything is identical. Other than MSIE ruining my
layout on one of those two sites, the images did display. The
difference had to be in the code somewhere.  I looked for a long time
and then found it.

THE DIFFERENCE WAS PRODUCED BECAUSE IN ONE CASE I HAD CREATED A NEW
PAGE IN TEXTMATE AND SELECTED THE XHMTL 1.0 TRANSITIONAL.


I still don't understand what caused the problem exactly but by
commenting out a few lines of code in the automatically produced
header, all started working properly.  The lines I commented out were
these:

	<meta name="ROBOTS" content="ALL" />
		<meta http-equiv="imagetoolbar" content="no" />
		<meta name="MSSmartTagsPreventParsing" content="true" />
		<meta name="Copyright" content="(c) 2005 Copyright content:
Copyright design: Bruce" />
		<!-- (c) Copyright 2005 by Bruce All Rights Reserved. -->

		<meta name="Keywords" content="__KEYWORDS__" />
		<meta name="Description" content="__DESCRIPTION__" />

		<link href="/css/master.css" rel="stylesheet" type="text/css"
media="all" />

		<!-- import the DOM logic from external javascript files -->
		<script type="text/javascript" src="/js/basic.js"></script>

		<!-- KLUDGE:: Win IE 5 -->
		<!-- corrects the unsightly Flash of Unstyled Content. See http://
www.bluerobot.com/web/css/fouc.asp for more info -->
		<script type="text/javascript"></script>
		<!-- END KLUDGE:: -->

          <base href="" />

For sure the reference to js/basic.js was an issue, I don't know what
else.



Summary
This may not even be textmate's fault. Perhaps just an unfortunate
interaction between their template code (which works fine in the two
acid2 compliant browsers) and MS IE 6.0

Perhaps you'd have found the problem sooner than me but to avoid
undue pain, I would not select XHTML 1.0 transitional as your
template if you are going to work with IE.  And if you find one day
that your images don't display, maybe this is the cause.

To everyone who tried to help - thank you.  And to the fine gentleman
who described MS IE 6 as a POS and thus the reason could be the phase
of the moon or the football scores, thank you.  That was the only
laugh I had in 12 hours.

I hope this helps.  And if someone can tell me what I should do re
informing the textmate people then I'd be pleased to do that.
7e5be8d0d2537a6f6f00aada5541881e?d=identicon&s=25 sross (Guest)
on 2005-12-06 19:19
(Received via mailing list)
I can¹t comment on TextMate¹s code, as I write all my header code by
hand,
but here are a couple of observations:

I use TextMate almost exclusively for my editor but I don¹t use their
snippets so I don¹t know

The following code appears to work fine for XHTML transitional. I didn¹t
see
a DTD or XML namespace delared in your code, but I assume it is there.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitiona...
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
    <%= stylesheet_link_tag 'myfinesite' %>
    <%= javascript_include_tag 'prototype', 'effects' %>
    <!--[if lte IE 6]>
    <style>
    #onlynecessaryforie {
        position:absolute;
        top:85px;
        left:0px;
        height:expression(this.offsetParent.offsetHeight-90);
        background-color:#000;
        z-index:2;
    }
    </style>
    <![endif]-->
</head>

<!--[if op IE #]> tags are only recognized by IE and are handy for
putting
version specific IE code in your documents. Note it does not work in CSS
files Â? only HTML.

Second, it¹s sometimes useful to find out whether the browser, be it IE
or
any other, is in quirks or strict mode. Microsoft has posted a Web
developer
toolbar on their site that can be extremely helpful in determining
what¹s
going on inside the rendering engine. Sorry, but I don¹t have the URL
offhand � I¹m on my Mac ;)

Third, the WinIE codebase is completely different from the MacIE
codebase,
so testing in Mac IE is pointless. You can, however, use VirtualPC to
run
the actual Windows IE on your Mac. It¹s pokey, but you will be testing
against the actual code.

Finally, I¹m confused by the closing tags on the <script
src=²something.js²></script> form. Would <script src=²something.js² />
work
just as well?

I don¹t know whether any of these contributed to your problem, but they
are
issues. Not to apologize for the staleness of the IE6 release, be
preachy or
to start a religious war, but over 80% of the market uses IE. That¹s
something none of us can fight, so we work within those constraints.

Hope this is useful...

Steve
This topic is locked and can not be replied to.