8 Replies Latest reply on Aug 24, 2010 10:02 AM by iggyshey123

    Divs jumping out of container in Firefox

    The Walking Dude

      Hi there,

       

      I'm a complete web design noob building my first web page. The problem i'm experiencing at the moment is that some of my divs move outwith their container div when previewing in Firefox (IE is fine for some reason)

       

      screengrab.jpg

       

      Just to clarify, the wood coloured area is the background, which is contained in the body tag. The orangey brown area is the main content div, into which I've inserted three panels. As can be seen in the picture, they are jumping right out when viewed in FF. Is there any way to fix this?

       

      Code for the main content and panel divs is below and thanks in advance for any help.

       

       

       

      HTML

       

      <div id="main-content">
        <div class="panel" id="aboutcasks">
          <p>About Casks</p>
          <p>
            <input type="image" name="casks" id="casks" src="IMAGES/boximage2.jpg">
          </p>
        </div>
          <div class="panel" id="caskofthemonth">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consequat,   metus ac posuere euismod, orci eros ullamcorper mi, sed suscipit sem   turpis nec orci. Nulla vel arcu a augue suscipit consectetur nec sit   amet libero. Aliquam vitae viverra libero. Etiam leo purus, pellentesque   commodo malesuada ut, mattis sed ante. Fusce magna eros, scelerisque ut   rutrum ac, imperdiet vitae massa. Nunc cursus, lacus ut interdum   tempor, lectus risus bibendum leo, ac tempus ante libero ut sem.</p>
            <p> </p>
            <p> </p>
            <p> </p>
            <p> </p>
            <p> </p>
            <p> </p>
            <p> </p>
          </div>
          <div class="panel" id="distilleries">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consequat,   metus ac posuere euismod, orci eros ullamcorper mi, sed suscipit sem   turpis nec orci. Nulla vel arcu a augue suscipit consectetur nec sit   amet libero. Aliquam vitae viverra libero. Etiam leo purus, pellentesque   commodo malesuada ut, mattis sed ante. Fusce magna eros, scelerisque ut   rutrum ac, imperdiet vitae massa. Nunc cursus, lacus ut interdum   tempor, lectus risus bibendum leo, ac tempus ante libero ut sem.</p>
          </div>
         
      </div>

       

      CSS

       

      #main-content {
      margin: auto;
      width: 963px;
      height: 1000px;
      background-color:#993300;
      }
             
              #aboutcasks {
              position: absolute;
              top: 461px;
              left: 360px;
              width: 274.1px;
              height: auto;
              border-style: solid;
              border-width: medium;
              border-color: #FFFFCC;
              background-color: #ffcc99;
              }
             
              #distilleries {
              position: absolute;
              top: 461px;
              left: 672px;
          width: 274.1px;
          height: auto;
          border-style: solid;
          border-width: medium;
          border-color: #FFFFCC;
          background-color: #ffcc99;
              }
             
              #caskofthemonth {
          position: absolute;
          top: 461px;
          left: 976px;
          width: 274.1px;
          height: auto;
          border-style: solid;
          border-width: medium;
          border-color: #FFFFCC;
          background-color: ffcc99;
              }

        • 1. Re: Divs jumping out of container in Firefox
          MurraySummers Level 8

          Get rid of all absolute positioning and try again.

          • 2. Re: Divs jumping out of container in Firefox
            The Walking Dude Level 1

            Hi Murray, thanks for responding. I have removed the absolute positioning and this is the result. How can I return them to being lined up in a row?

             

            ps: I posted a thread here the other day, you responded but I didn't get back to you. My sincere apologies!

             

            screengrab2.jpg

            • 3. Re: Divs jumping out of container in Firefox
              MurraySummers Level 8

              Hi Murray, thanks for responding. I have removed the absolute positioning and this is the result. How can I return them to being lined up in a row?

               

              Good - that's exactly what you should have gotten.  Now, float:left each of those interior divs that were absolutely positioned.

              • 4. Re: Divs jumping out of container in Firefox
                The Walking Dude Level 1

                I am now getting these results.

                 

                screen4.jpg

                 

                ^Internet Explorer

                 

                screen3.jpg

                 

                ^Firefox

                 

                I reckon I must be missing something else somewhere!

                • 5. Re: Divs jumping out of container in Firefox
                  MurraySummers Level 8

                  That's a good start.  How do you want it to look?

                   

                  Can you post a link to the live page so we can see the behavior of the page and its underlying code?

                  • 6. Re: Divs jumping out of container in Firefox
                    The Walking Dude Level 1

                    Hi Murray,

                     

                    Ideally I would like there to be three "panel" divs in a row, just inside the orange content area. I had this set up previously in DW using floats and margins to create space between them but Firefox wouldnt display this correctly.

                     

                    The page can be seen here http://thehuntly.com/Indexcopy

                     

                    Thanks again.

                    • 7. Re: Divs jumping out of container in Firefox
                      MurraySummers Level 8

                      But this page looks different from the image you posted.  And the code is a horror.  You can't really start working on layout issues with code that is so incomplete and badly formed.  Please fix these errors - http://validator.w3.org/unicorn/check?ucn_uri=http://thehuntly.com/Indexcopy&ucn_task=conf ormance

                       

                      The page must have a doctype, an <html></html> pair, and a <head> pair as well.

                       

                      Then we can work on the layout.

                      • 8. Re: Divs jumping out of container in Firefox
                        iggyshey123

                        I am having the same problem! I've been searching forums everywhere and haven't been able to find a solution. My divs aren't exactly jumping out of the container, but they're jumping whenever i refresh the page in firefox.

                         

                        Here's what the page looks like when i load it:

                         

                        Picture 5.png

                         

                        Then when i refresh it in Firefox the div jumps up like this:

                        [this does not happen in Safari or IE, only Firefox]

                         

                        Picture 6.png

                         

                         

                        HTML

                         

                         

                         

                        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

                          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

                        <html xmlns="http://www.w3.org/1999/xhtml">

                        <head>

                        <title>Webpage</title>

                         

                         

                        <!--[if IE]>

                          <style type="text/css" media="screen">

                            div,

                            li {

                            zoom: 1;

                         

                        }

                         

                          </style>

                        <![endif]-->

                         

                        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

                         

                        <style type="text/css">

                        <!--

                        body,td,th {

                        color: #999;

                        font-size: 12px;

                        }

                        a:link {

                        color: #b9b8b8;

                        text-decoration: none;

                        }

                        a:visited {

                        color: #b9b8b8;

                        text-decoration: none;

                        }

                        a:hover {

                        color: #FFF;

                        text-decoration: none;

                        }

                        a:active {

                        color: #FFF;

                        }

                         

                        ul li { display: inline; }

                         

                        .wide {

                        border-bottom: 1px #000 solid;

                        width: 4000px;}

                         

                        -->

                        </style>

                        </head>

                         

                        <body>

                        <div class="bg-cut-ProductsPage">

                        <div class="left_col-flash-new" id="left">

                             navagation  </div>

                         

                         

                         

                         

                        <div id="wrapper">

                          <div class="venue-img">

                          

                            <div id="VenueTitle">

                        Venue DI</div>

                          

                          

                            <div class="navigation">

                            

                              <div class="overview-link"><a href="#overview">Overview</a></div>

                              <div class="features-link"><a href="#features">Features</a></div>

                              <div class="images-link"><a href="#specs">Specs</a></div>

                              <div class="reviews-link"><a href="#images">Images</a></div>

                              <div class="productManual-link"><a href="#reviews">Reviews</a></div>

                              <div class="BuyitNow-link"><a href="www.ebay.com" target="_blank"> Manual</a></div>

                               <div class="findDealer-link"><a href="#buyitnow">Buy it</a></div>

                              </div></div>

                          

                         

                            <div class="panels2">

                              <div id="overview" class="panel">

                                <div class="Line">

                                <div id="dot"></div>

                                </div>

                              

                         

                                <h2>Overview</h2>

                                TEXT HERE</div>

                            

                            

                              <div id="features" class="panel">

                                TEXT HERE</div>

                            

                              <div id="specs" class="panel">

                                TEXT HERE </div>

                            

                            

                              <div id="images" class="panel">

                        IMAGES HERE

                            

                          </div>

                            

                          

                              <div id="reviews" class="panel">

                                TEXT HERE

                              </div>

                              

                              

                              <div id="buyitnow" class="panel">

                             TEXT HERE

                            </div>      

                            </div>

                        </div>

                         

                        </div>

                         

                         

                        //then all my javascript code is down here

                          

                        </body>

                        </html>

                         

                         

                         

                         

                        CSS

                         

                         

                        /* Sliding Tabs */


                        body {

                        font-family: "Arial",Verdana,sans-serif;

                        font-size: 11px;

                        line-height: 16px;

                        padding: 10px;

                        background-color: #121212;

                        }


                        h2 {

                          margin-top: 0;

                        }


                        #wrapper {

                          width: 470px;

                          float: right;

                          margin-right: 240px;

                          margin-top: 140px;

                        }


                        #content {

                          padding: 0 10px;

                          background: url(images/content.png) repeat-y;

                        }


                        #content ul {

                          float: left;

                          display: block;

                          width: 450px;

                          margin: 0;

                          padding: 0;

                          background: url(images/networks.png) repeat;

                          list-style: none;


                        }


                        #content li {

                          float: left;

                          height: 60px;

                          width: 225px;

                          position: relative;


                        }


                        #content a {

                          font-size: 1em;

                          color: #666;

                          text-decoration: none;

                          padding: 10px 0 5px;

                          display: block;

                          width: 225px;

                          height: 45px;

                          position: relative;

                          z-index: 2;

                        }


                        a img {

                          border: 0;

                          float: left;

                          margin: 0 0px;

                        }


                        .fader {

                          opacity: 0;

                          -moz-opacity: 0;

                          filter:alpha(opacity=0);

                          position: absolute;

                          top: 0;

                          left: 0;

                          width: 100%;

                          height: 60px;

                          background-color: #A4ADB7;

                        }


                        a:hover img {

                          margin-left: 0px;

                        }


                        a strong {

                          display: block;

                          font-size: 18px;

                          color: #000;

                        }


                        .clear {

                          clear: left;

                          background-image:url(../Images/VenuePage.png);

                          background-repeat:no-repeat;

                          height: 269px;

                        }

                        .venue-img {

                          clear: left;

                          background-image:url(../Images/VenuePage.png);

                          background-repeat:no-repeat;

                          height: 269px;

                          width: 432px;

                        }


                        #datacontent {

                          padding: 20px 10px;

                         

                        }


                        #datacontent ul {

                          list-style: none;

                          margin: 0;

                          padding: 5px;

                          display: block;

                          height: 30px;

                          background: none;

                          -webkit-border-top-left-radius: 10px;

                          -webkit-border-top-right-radius: 10px;

                        }


                        #datacontent li {

                          float: left;

                        }


                        #datacontent li a {

                          outline: 0;

                          display: block;

                          background: none;

                          color: #666;

                          text-decoration: none;

                          padding: 1px 5px;

                          margin: 5px;

                          border: 1px solid;

                        }


                        #datacontent li a:hover {

                          border: 1px solid;

                          background: none;

                          color: #000;

                          -webkit-border-radius: 10px;

                        }


                        #datacontent li a.selected {

                          background: none;

                          -webkit-border-radius: 10px;

                          border: 1px inset #fff;

                          color: #fff;

                        }


                        .panels2 {

                          overflow: hidden;

                          margin-top: -104px;

                          width: 432px;


                        }


                        #datacontent .panelsInner {

                          overflow: hidden;

                        }


                        #datacontent .panel {

                          padding-left: 0px;

                          padding-right: 20px;

                          width: 432px;

                         

                        }

                        .overview-link {

                        width: 60px;

                        height: 20px;

                        margin-top: 11px;

                        margin-left: 295px;

                        float: left;


                        }

                        .features-link {

                        width:120px;

                        height: 20px;

                        margin-top: 38px;

                        margin-left: -52px;

                        float: left;


                        }

                        .images-link {

                        width: 40px;

                        height: 20px;

                        margin-top: 64px;

                        margin-left: -110px;

                        float: left;


                        }

                        .reviews-link {

                        width: 30px;

                        height: 20px;

                        margin-top: 91px;

                        margin-left: -110px;

                        float: left;


                        }

                        .productManual-link {

                        width: 130px;

                        height: 20px;

                        margin-top: 157px;

                        margin-left: 310px;

                        float: left;

                        position: absolute;


                        }

                        .BuyitNow-link {

                        width: 130px;

                        height: 20px;

                        margin-top: 181px;

                        margin-left: 300px;

                        float: left;

                        position:absolute;

                        }

                        #buyitnow {

                        height: 710px;

                        }

                        .findDealer-link {

                        width: 130px;

                        height: 20px;

                        margin-top: 205px;

                        margin-left: 283px;

                        float: left;

                        position:absolute;

                        }