Stylesheets - IE7 overriding DIV formatting when loading a script

Author

IE7 overriding DIV formatting when loading a script

Mark

2007-11-03, 7:17 pm

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/newste=
st.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=3D"http://www.w3.org/1999/xhtml" xml:lang=3D"en">
<head><style type=3D"text/css">div#inform-wrapper {width:482px; float:
left; border: 3px solid #000;}</style></head>
<body>
<div id=3D"inform-wrapper">
<p><a href=3D"http://widget.inform.com/Frank%20Lloyd%20Wright">Frank
Lloyd Wright News</a></p>
<script src=3D"http://widget.inform.com/widget/Frank%20Lloyd%20Wright"
type=3D"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=3D"inform-data">
<dt class=3D"first">
<a target=3D"_blank" href=3D"http://www.inform.com/articles/45204530/?
puburl=3Dhttp%3a%2f%2fwww.dwell.com%2fdaily%2fblog%2f10767156.html%3f">
Fireproofing: Frank Lloyd Wright</a> </dt>
<dd class=3D"publication first">Dwell.com</dd>
<dt class>
<a target=3D"_blank" href=3D"http://www.inform.com/articles/45367615/?
puburl=3Dhttp%3a%2f%2fwww.jsonline.com%2fstory%2findex.aspx%3fid
%3d681404">
Madison theater tackles Lombardi=E2=80=99s legend</a> </dt>
<dd class=3D"publication">Milwaukee Journal Sentinel</dd>
<dt class>
<a target=3D"_blank" href=3D"http://www.inform.com/articles/45515380/?
puburl=3Dhttp%3a%2f%2fnews.enquirer.com%2fapps%2fpbcs.dll%2farticle%3fAID
%3d%2f20071103%2fLIFE%2f711030321%2f1079">
Hometown hardware</a> </dt>
<dd class=3D"publication">Cincinnati Enquirer</dd>
<dt class>
<a target=3D"_blank" href=3D"http://www.inform.com/articles/45310365/?
puburl=3Dhttp%3a%2f%2fwww.archrecord.construction.com%2ffeatures
%2finterviews%2f0710CraigRobins%2f0710CraigRobins-1.asp">
Craig Robins</a> </dt>
<dd class=3D"publication">Architectural Record</dd>
<dt class=3D"last">
<a target=3D"_blank" href=3D"http://www.inform.com/articles/45516483/?
puburl=3Dhttp%3a%2f%2fwww.tulsaworld.com%2flifestyle%2farticle.aspx
%3farticleID%3d071103_4_D3_hAnnu47843">
What a beautiful world</a> </dt>
<dd class=3D"publication last">Tulsa World</dd>
</dl>
<a id=3D"inform-more-news" href=3D"http://www.inform.com/Frank%20Lloyd
%20Wright">More Frank Lloyd Wright News</a>
<div id=3D"inform-ad">
<p>
<span style=3D"cursor: pointer;" onmouseover=3D"top.status=3D'Official
Site: AMBIEN CR=E2=84=A2'; return true" onmouseout=3D"top.status=3D''; retu=
rn
true" onclick=3D"window.open('http://click.pulse360.com/cgi-bin/
clickthrough.cgi?
db=3Dcontext&position=3D7001&tid=3Dbhnhbpnkbhnhbonpbhnhza&eid=
=3D1&id=3D89605518&query=3Dgeneral
%20network
%3A(general)&clickid=3D86827154&tz=3DUS&UNQ=3D00000119411891171=
309906000000106053054&cgroup=3D&src=3Dadserv.cgi')">
<font color=3D"#0000ff"><b>Official Site: AMBIEN CR=E2=84=A2</b> </font><b=
r>
(zolpidem tartrate extended release) CIV Get Free 7-Day Supply<br>
<font color=3D"#0000ff"><u>www.AmbienCR.com</u> </font></span></p>
</div>
<script type=3D"text/javascript" src=3D"http://context.inform.com/cgi-bin/
context.cgi?id=3D86827154&db=3Dcontext&format=3Dplain&numresults=3D1">
</script>
<a target=3D"_blank" href=3D"http://www.inform.com" id=3D"inform-branding">=
</
a>
<iframe src=3D"http://widget.inform.com/inform2/feeds/resources/content/
tracker.aspx?u=3Dfile%3A///C%3A/Users/mfreeman/Documents/My%2520Web
%2520Sites/FrankLloydWright/newstest.htm" id=3D"inform-tracker"
frameborder=3D"0">
</iframe>

Any ideas?

Thomas 'PointedEars' Lahn

2007-11-08, 6:17 pm

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.
> 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>

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
--
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

Mark

2007-11-10, 10:15 pm

On Nov 8, 11:35 am, Thomas 'PointedEars' Lahn <PointedE...@web.de>
wrote:
> Mark wrote:
>
>
>
> 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, 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>