3 Replies Latest reply on Feb 6, 2010 5:20 AM by midnitenew

    Position of elements after AP div in IE

    midnitenew

      I'm familiar with all Adobe products except DW - I've read, researched and spent hours hands-on to learn all I could but I've come up against the IE brick wall and can't climb over, go around or bash it down!

       

      My  page begins with overlapping images (think curvy header with photos peeking out). They are in an AP div, wrapped up tight ito keep them where I want them and in the order they need to be.

       

      Next down on the page I have a "menu bar" also in a div with a top margin that locates it directly under the AP div. Another div similar to the menu bar and then content which is 3 columns (left float, right float and center).

       

      My problem is that in Firefox this layout is perfect. In IE 7 (the only other browser I've tested), the menu bars and main content moves up under the AP header.  I've played around with every combination I can think of and haven't been able to solve the problem.  I apologize if this is already addressed in the forums somewhere - I've searched and couldn't find it.

       

      Thanks in advance for saving what little bit of my hair I haven't already pulled out!!

        • 1. Re: Position of elements after AP div in IE
          John Waller Adobe Community Professional & MVP

          Can you provide a link?

           

          We really need to see the code in action.

          • 2. Re: Position of elements after AP div in IE
            midnitenew Level 1
            John Waller wrote:
            
            Can you provide a link?
            
            We really need to see the code in action.
            
            Thank you John - I was afraid someone would ask for the code -I'm sorry - I can't provide a link
            and have to remove all references to what the website is but I've posted the code below.  I can only
            hope that the experienced folks who see this live far enough away so that I won't be able to hear
            the laughter at my first attempts!!
            
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
            <!-- saved from url=(0014)about:internet -->
            <html xmlns="http://www.w3.org/1999/xhtml">
            <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>removed</title>
            <link href="removed.css" rel="stylesheet" type="text/css" />
            <!--[if IE 5]>
            <style type="text/css"> 
            /* place css box model fixes for IE 5* in this conditional comment */
            .thrColFixHdr #sidebar_left { width: 190px; }
            .thrColFixHdr #sidebar_right { width: 190px; }
            </style>
            <![endif]-->
            <!--[if IE]>
            <style type="text/css"> 
            /* place css fixes for all versions of IE in this conditional comment */
            .thrColFixHdr #sidebar_right, .thrColFixHdr #sidebar_left { padding-top: 15px; }
            .thrColFixHdr #mainContent { zoom: 1; }
            /* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
            </style>
            <![endif]-->
            <style type="text/css">
            <!--
            body,td,th {
             font-family: Tahoma, Geneva, sans-serif;
            }
            body {
             
            }
            a:link {
             text-decoration: none;
            }
            a:visited {
             text-decoration: none;
            }
            a:hover {
             text-decoration: none;
            }
            a:active {
             text-decoration: none;
            }
            h1 {
             font-size: 130%;
            }
            h2 {
             font-size: 110%;
            }
            h3 {
             font-size: 90%;
             margin: 0;
            }
            
            -->
            </style>
            <script type="text/javascript">
            <!--
            // Dynamic Images by Kaosweaver
            // Copyright 2007, All rights reserved
            var rI = {
             init:function(o,t) {rI.obj=o;rI.rT=t;},
             addImg:function() {
             var a=arguments;rI.imgList.push(a[0]);rI.altList.push((a[1]?a[1]:''));
             rI.linkList.push((a[2]?a[2]:''));rI.tgtList.push((a[3]?a[3]:''));},
             showImg:function() {
             if (rI.rT==0){var j=parseInt(Math.random()*rI.imgList.length);
             j=(isNaN(j))?0:j;}else{var oneDay=60*60*24*1000, d=new Date();
             jk=d.getTimezoneOffset()*60*1000;
             j=(parseInt((d.getTime()-jk)/oneDay))%rI.imgList.length;}
             d=document;     newImg=d.createElement("img");
             newImg.src=rI.imgList[j];newImg.alt=rI.altList[j];
             tO=d.getElementById(rI.obj);if (tO) {if (rI.linkList[j]!='') {
             newLink=d.createElement("a");newLink.href=rI.linkList[j];
             newLink.target=rI.tgtList[j];newLink.appendChild(newImg);
             tO.appendChild(newLink);} else {tO.appendChild(newImg);}}},
             addEvent: function(o,evt, fn) {
             if (o.addEventListener) {o.addEventListener(evt, fn, false);
             } else if (o.attachEvent) {o.attachEvent('on'+evt, fn);
             } else {o['on'+evt]=fn;}},
             imgList:[],altList:[],linkList:[],tgtList:[],obj:"",rT:0
            }
            rI.init("randomImage",0);
            rI.addImg("images/Header images/removed.jpg","","","");
            rI.addImg("images/Header images/removed.jpg","","","");
            rI.addImg("images/Header images/removed.jpg","","","");
            rI.addImg("images/Header images/removed.jpg","","","");
            rI.addImg("images/Header images/removed.jpg","","","");
            rI.addEvent(window,'load',rI.showImg);
            //-->
            </script>
            </head>
            
            <body class="thrColFixHdr">
            
            <div id="container">
            <div id="header2">
            <div id="logoimage"><img src="images/Header images/header_logo.gif" width="980" height="200" alt="Removed" /></div></div>
             <div id="header1">
             
             <div id="randomImage">
             <noscript>
             <img src="images/Header images/removed.jpg" alt="Dynamic Image" />
             </noscript>
             </div>
             
            <!-- end #header --></div>
             
             <div id="menu">
            test
             <!-- end #menu --></div>
             <div id="messagecenter">
             test
             <!--end #messagecenter --> </div>
             
             <div id="wrapper">
             <div id="sidebar_left">
             <h3>Sidebar1 Content</h3>
             <p>fake content</p>
             
             <!-- end #sidebar_left --></div>
             
             <div id="sidebar_right">
             <h3>Sidebar2 Content</h3>
             <p>fake content</p>
             <p> </p>
             
             <!-- end #sidebar_right --></div>
             
             <div id="mainContent">
             <h1> Main Content </h1>
             <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at,  odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. </p>
             <h2>H2 level heading </h2>
             <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
             <!-- end #mainContent --></div>
             <!-- end #wrapper --></div>
            
            <!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats -->
            <br class="clearfloat" />
             <div id="footer">
             <p></p>
             <p></p>
             <!-- end #footer --></div>
            <!-- end #container --></div>
            </body>
            </html>
            
            
            • 3. Re: Position of elements after AP div in IE
              midnitenew Level 1

              Persistence pays off!

               

              After posting here (obviously with not enough information to get help) and continuing to play with code and styles to try to find the culprit, I removed a "height" setting from the div immediately following the AP div and everything fell into place in IE.

               

              I don't think I actually needed the height set - I simply set it so that I could see this section when previewing in the browser but if anyone can tell me why the height setting caused this entire div and everything under it to move up under the AP div, I'd be grateful - I'd love to understand !!