View Full Version : Huge space appearing in IE, but not in FF?

03-18-2005, 02:10 AM
I have a DIV, in which I am loading an external JS that contains some HTML. In that HTML, there are many more DIVs with relational positioning. I have all the positioning worked out so that the little DIVs appear in the right place in the big DIV in FireFox but there is a problem when viewing in IE. There is a very large vertical space pushing the bottom row of DIVs far off the screen (maybe 1000px vertically). Don't know why. Could appreciate some help. Here is the pertinant code.

Main html - the DIV in question is at the bottom, 'center'.

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Two Column CSS Layout with Header</title>

href="qstyle.css" rel=stylesheet type="text/css">
href="movies.css" rel=stylesheet type="text/css">
href="list.css" rel=stylesheet type="text/css">
<SCRIPT language=JavaScript src="script_files/wrapscript.js"></SCRIPT>
<SCRIPT language=JavaScript>

useframes=((isMac && isIE && btype<="3") || (btype<="2" && !(bAgent.indexOf("MSIE 3")>=0)));
function loader() {
if(!useframes) nsloading();

<body bgcolor="#333333">
<div id="header" style="width: 350px"><img border="0" src="NewHeader1.jpg" width="350" height="100"></div>

<div id="leftheader">

<div id="ablogo">

<div id="topleft">

<div id="centerleftborder" style="z-index: 1">

<div id="centerrightborder" style="z-index: 1">
<img src="Gradient_topright.gif" width="11" height="11"></div>

<div id="centertopborder" style="z-index: 1">
<img src="Gradient_topleft.gif" width="11" height="11"></div>

<div id="centerbottomborder" style="z-index: 1">
<img src="Gradient_bottomleft.gif" width="11" height="11"></div>

<div id="centerbottomrightcorner" style="z-index: 1">
<img src="Gradient_bottomright.gif" width="11" height="11"></div>

<div id="lefttop"style="z-index: 1"></div>
<div id="leftbottom"style="z-index: 1"></div>

<div id="left">
<script language="javascript" type="text/javascript" src="menu.js"></script>

<div id="center">
<script language="javascript" type="text/javascript" src="movie1.js"></script></div>

Here is the Javascript from movie1.js

document.write('<div id="moviecenter">');
document.write('<div id="boxcover">');
document.write('<img src="http://internet.blah/picture.jpg" width="175" height="250" alt="Picture"></div>');
document.write('<div id="performers"><a class="heading">Performers: </a><a class="roll" href="http://planmagic.com">Lyllit, </a>');
document.write('<a class="roll" href="http://planmagic.com">Katrine, </a><a class="roll" href="http://planmagic.com">Moni, </a>');
document.write('<a class="roll" href="http://planmagic.com">Christine, </a><a class="roll" href="http://planmagic.com">Jewel, </a>');
document.write('<a class="roll" href="http://planmagic.com">Atlantis, </a> <a class="roll" href="http://planmagic.com">Aggy</a></div>');
document.write('<div id="categories"><a class="heading">Category: </a><a class="roll" href="http://planmagic.com">Category 1, </a>');
document.write('<a class="roll" href="http://planmagic.com">Category 2, </a><a class="roll" href="http://planmagic.com">Category 3, </a>');
document.write('<a class="roll" href="http://planmagic.com">Category 4, </a><a class="roll" href="http://planmagic.com">Category 5, </a>');
document.write('<a class="roll" href="http://planmagic.com">Category 6, </a><a class="roll" href="http://planmagic.com">Category 7</a></div>');
document.write('<div id="studio"><a class="heading">Producer: </a><a class="roll" href="http://planmagic.com">Production Company</a></div>');
document.write('<div id="title"><a class="title">The Title</a></div>');
document.write('<div id="scene1label"><a class="scenetitle" href="http://planmagic.com">Scene 1</a></div>');
document.write('<div id="scene1performers"><a class="roll" href="http://planmagic.com">Lyllit</a></div>');
document.write('<div id="scene2label"><a class="scenetitle" href="http://planmagic.com">Scene 2</a></div>');
document.write('<div id="scene2performers"><a class="roll" href="http://planmagic.com">Moni</a></div>');
document.write('<div id="scene3label"><a class="scenetitle" href="http://planmagic.com">Scene 3</a></div>');
document.write('<div id="scene3performers"><a class="roll" href="http://planmagic.com">Katrine</a></div>');
document.write('<div id="scene1pic"><img src="file:///C:/website_new/new_test/jeff/thumbs/00084.jpg" width="150" height="112"></div>');
document.write('<div id="scene2pic"><img src="file:///C:/website_new/new_test/jeff/thumbs/00239.jpg" width="150" height="112"></div>');
document.write('<div id="scene3pic"><img src="file:///C:/website_new/new_test/jeff/thumbs/00425.jpg" width="150" height="112"></div>');
document.write('<div id="scene4label"><a class="scenetitle" href="http://planmagic.com">Scene 4</a></div>');
document.write('<div id="scene4performers"><a class="roll" href="http://planmagic.com">Aggy</a></div>');
document.write('<div id="scene5label"><a class="scenetitle" href="http://planmagic.com">Scene 5</a></div>');
document.write('<div id="scene5performers"><a class="roll" href="http://planmagic.com">Jewel, </a><a class="roll" href="http://planmagic.com">Atlantis</a></div>');
document.write('<div id="scene6label"><a class="scenetitle" href="http://planmagic.com">Scene 6</a></div>');
document.write('<div id="scene6performers"><a class="roll" href="http://planmagic.com">Christine</a></div></div>');
document.write('<div id="scene4pic"><img src="file:///C:/website_new/new_test/jeff/thumbs/00531.jpg" width="150" height="112"></div>');
document.write('<div id="scene5pic"><img src="file:///C:/website_new/new_test/jeff/thumbs/00663.jpg" width="150" height="112"></div>');
document.write('<div id="scene6pic"><img src="file:///C:/website_new/new_test/jeff/thumbs/00824.jpg" width="150" height="112"></div>');

Here is the CSS that styles the inserted HTML in movie1.js

A { COLOR: red}
A.visited { COLOR: #ff0000}
A:hover { COLOR: #ffdd00}
A.heading {color:red; font-size: 9pt; font-family:verdana; text-decoration:none; font-weight: bold; }
A.title { color:red; font-size:14pt; font-family: verdana; text-decoration:none; font-weight: bold; }
A.roll { COLOR: red; FONT-SIZE: 9pt; FONT-FAMILY: verdana; TEXT-DECORATION: none;}
A.roll:hover { COLOR: #FF6600; background: #303030; TEXT-DECORATION: none;}
A.scenetitle { COLOR: red; FONT-SIZE: 9pt; FONT-FAMILY: verdana; TEXT-DECORATION: none; font-weight: bold;}
A.scenetitle:hover { COLOR: #FF6600; background: #303030; TEXT-DECORATION: none;}
A.nav { COLOR: #000000; FONT-SIZE: 7pt; TEXT-DECORATION: none}
A.nav:hover { COLOR: #ff0000}
body { margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; padding-left: 0px; padding-right: 0px;
#moviecenter { position: relative; top: 0px; margin-left: 11px; height: 445px; width: 755px; background:#000000;

#boxcover { position: relative; top: 10px; margin-left: 10px; width: 175px; height: 250px;
#performers { position: relative; top: 15px; margin-left: 10px; width: 195px; height: 65px;
#categories {position: relative; margin-left: 10px; top: 15px; width: 195px; height: 65px;
#studio {position: relative; margin-left: 10px; top: 15px; width: 195px; height: 35px;
#title {position: relative; margin-left: 200px; width: 550px; height: 30px; top: -410px; text-align: center;

#scene1label, #scene1pic, #scene1performers {position: relative; margin-left: 240px; width: 150px; text-align: center;
#scene2label, #scene2pic, #scene2performers {position: relative; margin-left: 415px; width: 150px; text-align: center;
#scene3pic, #scene3label, #scene3performers {position: relative; margin-left: 590px; width: 150px; text-align: center;
#scene4pic, #scene4label, #scene4performers {position: relative; margin-left: 240px; width: 150px; text-align: center;
#scene5pic, #scene5label, #scene5performers {position: relative; margin-left: 415px; width: 150px; text-align: center;
#scene6pic, #scene6label, #scene6performers {position: relative; margin-left: 590px; width: 150px; text-align: center;

#scene1label {top: -370px; height: 20px;
#scene1performers {top: -370px; height: 20px;
#scene2label {top: -410px; height: 20px;
#scene2performers {top: -410px; height: 20px;
#scene3label {top: -450px; height: 20px;
#scene3performers {top: -450px; height: 20px;
#scene1pic {top: -450px; height: 115px;
#scene2pic {top: -565px; height: 115px;
#scene3pic {top: -680px; height: 115px;
#scene4label {top: -655px; height: 20px;
#scene4performers {top: -655px; height: 20px;
#scene5label {top: -695px; height: 20px;
#scene5performers {top: -695px; height: 20px;
#scene6label {top: -735px; height: 20px;
#scene6performers {top: -735px; height: 20px;
#scene4pic {top: -150px; height: 115px;
#scene5pic {top: -265px; height: 115px;
#scene6pic {top: -380px; height: 115px;

A lot of the numbers in the CSS don't really make sense because of the relational positioning but all I can say is that they work for FireFox but not for IE. There is a very large gap between scene4pic, scene5pic, scene6pic and the rest of the DIVs (maybe 1000px).
Does anyone see what could be causing this in one browser and not another?


03-18-2005, 02:41 AM
This is what it looks like in each. I have distorted the naughty stuff.
For the IE graphic, notice the scrollbar that is not present in the FF graphic. That is how far down the bottom row of pics has dropped.

Any help would be appreciated.
Pictures changed to links. Remember that CF has minors among it's users. // David
FireFox (http://img.photobucket.com/albums/v474/cbouchar/sitehelp/ff.gif)

Internet Explorer (http://img.photobucket.com/albums/v474/cbouchar/sitehelp/ie.gif)

03-19-2005, 01:48 PM
Desperate bump. Still hoping someone can help :(