IE7 overriding DIV formatting when loading a script

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Mark - 03 Nov 2007 22:27 GMT

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.
Here is the complete source:

<!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" xml:lang="en">
<head><style type="text/css">div#inform-wrapper {width:482px; float:
left; border: 3px solid #000;}</style></head>
<body>
<div id="inform-wrapper">
    <p><a href="http://widget.inform.com/Frank%20Lloyd%20Wright">Frank
Lloyd Wright News</a></p>
    <script src="http://widget.inform.com/widget/Frank%20Lloyd%20Wright"
type="text/javascript"></script>
</div></body></html>

I captured the content provided by the script (formatted for
readability -- it actually comes across all in one line):

<dl class id="inform-data">
    <dt class="first">
    <a target="_blank" href="http://www.inform.com/articles/45204530/?
puburl=http%3a%2f%2fwww.dwell.com%2fdaily%2fblog%2f10767156.html%3f">
    Fireproofing: Frank Lloyd Wright</a> </dt>
    <dd class="publication first">Dwell.com</dd>
    <dt class>
    <a target="_blank" href="http://www.inform.com/articles/45367615/?
puburl=http%3a%2f%2fwww.jsonline.com%2fstory%2findex.aspx%3fid
%3d681404">
    Madison theater tackles Lombardi’s legend</a> </dt>
    <dd class="publication">Milwaukee Journal Sentinel</dd>
    <dt class>
    <a target="_blank" href="http://www.inform.com/articles/45515380/?
puburl=http%3a%2f%2fnews.enquirer.com%2fapps%2fpbcs.dll%2farticle%3fAID
%3d%2f20071103%2fLIFE%2f711030321%2f1079">
    Hometown hardware</a> </dt>
    <dd class="publication">Cincinnati Enquirer</dd>
    <dt class>
    <a target="_blank" href="http://www.inform.com/articles/45310365/?
puburl=http%3a%2f%2fwww.archrecord.construction.com%2ffeatures
%2finterviews%2f0710CraigRobins%2f0710CraigRobins-1.asp">
    Craig Robins</a> </dt>
    <dd class="publication">Architectural Record</dd>
    <dt class="last">
    <a target="_blank" href="http://www.inform.com/articles/45516483/?
puburl=http%3a%2f%2fwww.tulsaworld.com%2flifestyle%2farticle.aspx
%3farticleID%3d071103_4_D3_hAnnu47843">
    What a beautiful world</a> </dt>
    <dd class="publication last">Tulsa World</dd>
</dl>
<a id="inform-more-news" href="http://www.inform.com/Frank%20Lloyd
%20Wright">More Frank Lloyd Wright News</a>
<div id="inform-ad">
    <p>
    <span style="cursor: pointer;" onmouseover="top.status='Official
Site: AMBIEN CR™'; return true" onmouseout="top.status=''; return
true" onclick="window.open('http://click.pulse360.com/cgi-bin/
clickthrough.cgi?
db=context&position=7001&tid=bhnhbpnkbhnhbonpbhnhza&eid=1&id=89605518&query=general
%20network
%3A(general)&clickid=86827154&tz=US&UNQ=00000119411891171309906000000106053054&cgroup=&src=adserv.cgi')">
    <font color="#0000ff"><b>Official Site: AMBIEN CR™</b> </font><br>
    (zolpidem tartrate extended release) CIV Get Free 7-Day Supply<br>
    <font color="#0000ff"><u>www.AmbienCR.com</u> </font></span></p>
</div>
<script type="text/javascript" src="http://context.inform.com/cgi-bin/
context.cgi?id=86827154&db=context&format=plain&numresults=1">
</script>
<a target="_blank" href="http://www.inform.com" id="inform-branding"></
a>
<iframe src="http://widget.inform.com/inform2/feeds/resources/content/
tracker.aspx?u=file%3A///C%3A/Users/mfreeman/Documents/My%2520Web
%2520Sites/FrankLloydWright/newstest.htm" id="inform-tracker"
frameborder="0">
</iframe>

Any ideas?

Reply to this Message

Thomas 'PointedEars' Lahn - 08 Nov 2007 16:35 GMT

> 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
[quoted text clipped - 21 lines]
> type="text/javascript"></script>
> </div></body></html>

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]

[1] http://validator.w3.org/
[2] http://www.w3.org/TR/xhtml1/#C_14
[3] http://www.w3.org/TR/xhtml-media-types/
[4] http://www.hixie.ch/advocacy/xhtml
[5] http://hsivonen.iki.fi/xhtml-the-point/

PointedEars

Signature

Anyone who slaps a 'this page is best viewed with Browser X' label on
a Web page appears to be yearning for the bad old days, before the Web,
when you had very little chance of reading a document written on another
computer, another word processor, or another network. -- Tim Berners-Lee

Reply to this Message

Mark - 11 Nov 2007 00:52 GMT

On Nov 8, 11:35 am, Thomas 'PointedEars' Lahn <PointedE...@web.de>
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
[quoted text clipped - 11 lines]
> 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, 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:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://
www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title>Newsfeed test</title>
<style type="text/css">
div#inform-wrapper {width:482px; float: left; border: 3px solid #000;}
.pic {
float: left;
height: 175px;
width: 120px;
padding: 15px;
margin: 5px 3px;
border: 1px solid white;
background: #555;
}

.pic img {
border: 1px solid;
border-color: #444 #AAA #AAA #444;
}

.ls img {
height: 163px;
width: 110px;
margin: 32px 0 0;
}

.pt img {
height: 256px;
width: 192px;
margin: 0px 32px;
}

.ls_title {
background-image: none;
list-style: none;
text-align: center;
color: #fff;
font: bold 9px Verdana, sans-serif;
margin: 32px 0 0 0;
display: block;
}
.pt_title {
background-image: none;
list-style: none;
text-align: center;
color: #fff;
font: bold 9px Verdana, sans-serif;
margin: -4px 0 0 0;
margin: 0;
display: block;
}
</style></head>
<body>
<div id="inform-wrapper">
<p><a href="http://widget.inform.com/Frank%20Lloyd%20Wright">Frank
Lloyd Wright News</a></p>
<script src="http://widget.inform.com/widget/Frank%20Lloyd%20Wright"
type="text/javascript"></script>
</div>
</body>
</html>

Reply to this Message

Thomas 'PointedEars' Lahn - 30 Nov 2007 00:29 GMT

> On Nov 8, 11:35 am, Thomas 'PointedEars' Lahn <PointedE...@web.de>
> wrote:
[quoted text clipped - 15 lines]
>
> 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/REC-CSS2-19980512-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

Signature

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

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / November 2007

IE7 overriding DIV formatting when loading a script