Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Mar 2005
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Huge space appearing in IE, but not in FF?

    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'.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>Two Column CSS Layout with Header</title>
    
    <LINK 
    href="qstyle.css" rel=stylesheet type="text/css">
    <LINK 
    href="movies.css" rel=stylesheet type="text/css">
    <LINK 
    href="list.css" rel=stylesheet type="text/css">
    <SCRIPT language=JavaScript src="script_files/wrapscript.js"></SCRIPT>
    <SCRIPT language=JavaScript>
    
    <!--
    bAgent=navigator.userAgent;
    btype=bAgent.substring(8,9);
    isMac=(bAgent.indexOf("Mac")>=0);
    isIE=(bAgent.indexOf("MSIE")>=0);
    useframes=((isMac && isIE && btype<="3") || (btype<="2" && !(bAgent.indexOf("MSIE 3")>=0)));
    function loader() {
    	if(!useframes) nsloading();
    }
    //-->
    </SCRIPT>
    
    </head>
    <body bgcolor="#333333">
    <div id="header" style="width: 350px"><img border="0" src="NewHeader1.jpg" width="350" height="100"></div>
    
    <div id="leftheader">
    </div>
    
    <div id="ablogo">
    </div>
    
    <div id="topleft">
    </div>
    
    <div id="centerleftborder" style="z-index: 1">
    </div>
      
    <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>
    
    <div id="center">
    <script language="javascript" type="text/javascript" src="movie1.js"></script></div>
    </body>
    </html>
    Here is the Javascript from movie1.js
    Code:
    <!--
    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
    Code:
    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?

    Thanks

  • #2
    New Coder
    Join Date
    Mar 2005
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Edit: Pictures changed to links. Remember that CF has minors among it's users. // David

    FireFox

    Internet Explorer
    Last edited by liorean; 03-18-2005 at 02:18 AM. Reason: Forum rules §1.5

  • #3
    New Coder
    Join Date
    Mar 2005
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Desperate bump. Still hoping someone can help


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •