Re: IE7 overriding DIV formatting when loading a script

Mark wrote:

On Nov 8, 11:35 am, Thomas 'PointedEars' Lahn <PointedE... (AT) web (DOT) de
wrote:
Mark wrote:
I load a external javascript in a DIV. I set the width and border of
the DIV. It looks as intended in Firefox, but IE7 is doing something
strange. IE7 initially displays the border at the correct width, but
it disappears once the script loads. The HTML provided by the script
contains no formatting other than a couple of FONT tags.
The javascript is on a third-party site and I have no control over it.
I would love to hear if anyone has an idea of how to get IE7 to do
what I am telling it to do.
I have a very simple example at http://franklloydwright.tercenim.com/newstest.htm.
PEBKAC. You have been serving invalid[1] and implausible[2] XHTML 1.1 with
an invalid Content-Type[3]) to a user agent that does not even support
XHTML[4], much less provides for an XHTML DOM. Clue^WNeedlessly.[5]

You are, of course, quite right. I updated the DTD and validated the
code.

The CSS validator doesn't like class names with underscores,

The W3C's does. It would seem your validator validates against CSS1
or does not implement
http://www.w3.org/Style/css2-updates...12-errata.html
(implemented also in CSS 2.1).

but again, I have no control over what is sent from the remote site.

My very simple example at http://franklloydwright.tercenim.com/newstest.htm
has been updated, and here is the complete content:

[...]

The reason is that with

<script src="http://widget.inform.com/widget/Frank%20Lloyd%20Wright"
type="text/javascript"></script>

the following code is also executed:

-------------------------------------------------------------------
/* initialize the list */
Inform.ArticleData.init = function ()
{
this.wrapper = document.getElementById("inform-wrapper");

if (!this.wrapper || this.wrapper.getElementsByTagName("A").length == 0)
{
alert("Improper integration.");
return;
};

this.render();
};

// [...]

/* render the list */
Inform.ArticleData.render = function ()
{
this.clearWrapper();
this.renderArticleList();
this.renderStyleSheet();
};

/* add the stylesheet with the default elements */
Inform.ArticleData.renderStyleSheet = function ()
{
if (document.getElementById("inform-stylesheet"))
{
return;
};

var styleSheet = Inform.Utils.createElement("LINK", {
href: this.hostname + "/inform2/feeds/resources/css/search-module.css",
type: "text/css",
rel: "stylesheet",
id: "inform-stylesheet"
});

var docHead = document.getElementsByTagName("head")[0];

if (docHead.childNodes.length)
{
docHead.insertBefore(styleSheet, docHead.firstChild);
}
else
{
docHead.appendChild(styleSheet);
};
};

// [...]

Inform.ArticleData.init();
-------------------------------------------------------------------

Basically, it inserts a new `link' element before all other child elements
of the `head' element (i.e. if the `head' element has any, as it should
have, it inserts it before the first child element; if it has not, as it
should not have, it inserts it at the end of the element's content.)

That `link' element refers to a stylesheet that contains the following:

/* -----------------------------------------------------------
news widget wrapper
-------------------------------------------------------------- */
div#inform-wrapper
{
width: 200px;
border: 1px solid #b2c2cf;
font: normal 12px arial, sans-serif;
padding: 8px;

/* for the floats */
overflow: hidden;
}

So it would seem Firefox gets it right: since your stylesheet still comes
last, it should take precedence over the the included one. However, IE 7
seems to "think" differently and lets the stylesheet included by the newly
added element to take precedence, regardless of the former's position in the
document tree.

As for a solution, you could give your stylesheet the ID "inform-stylesheet"
so that the default stylesheet is not included at all by the above script.
Other than that, I don't think you can realistically do anything about it.


HTH

PointedEars
--
var bugRiddenCrashPronePieceOfJunk = (
navigator.userAgent.indexOf('MSIE 5') != -1
&& navigator.userAgent.indexOf('Mac') != -1
) // Plone, register_function.js:16