5 Replies Latest reply on Jul 25, 2013 12:33 PM by Nancy OShea

    Divs, background images and overflow

    winrol

      Hi,

       

      I am having a problem in IE 8 with overflow.  When I try the page in all major browsers on my Mac and all major browsers in Windows, on my iPad and iPhone it will scroll and work fine all overflow will be hidden.  That is excerpt when I use IE 8.   All the div's with text will overflow on the menu and below.

       

      // main CSS

       

      .container {

           width: 90%;

           max-width: 1260px;

           margin: 0 auto;

      }

      .content {

           padding: 10px 0;

           border-radius: 10px;

           -moz-border-radius: 10px;

           -webkit-border-radius: 10px;

           color: #000;

           height: 700px;

           overflow: scroll;

           behavior: url(../js/PIE.htc);

      }

      .picshadow {

           border: medium solid #34FCCC;

           margin: 0 auto;

           padding-top: 5px;

           border-radius: 10px;

           -moz-border-radius: 10px;

           -webkit-border-radius: 10px;

           behavior: url(../js/PIE.htc);

           width: 95%;

           text-shadow: 0px 2px 3px  #666666;

           background-size: 100%;

           background-position: center;

           -moz-box-shadow: inset 0px 0px 28px 2px #777777;

           -webkit-box-shadow: inset 0px 0px 28px 2px #777777;

           box-shadow: inset 0px 0px 28px 2px #777777;

      }

      ..... Rest of CSS not included

       

      // end of CSS

       

       

       

      // php

       

      .... Database info

       

      <!doctype html>

      <html><!-- InstanceBegin template="/Templates/MainTemp.dwt.php" codeOutsideHTMLIsLocked="true" --><head>

       

      <meta charset="UTF-8">

      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

       

       

      <!-- InstanceBeginEditable name="doctitle" -->

      <title>Balanced | Testimonials</title>

      <!-- InstanceEndEditable -->

       

      ... Other links. Etc.

       

      <style>

      li#child6 {

           background: #3FC;

           border-radius: 5px 0px 5px 0px;

           -moz-border-radius: 5px 0px 5px 0px;

           -webkit-border-radius:5px 0px 5px 0px;

           behavior: url(js/PIE.htc);

      }

      li#child6 a {

           color:#000;

      }

      .content {

           background-color: #D0FFEF;

           border: solid thick #3FC;

           height: 2850px;     /*overflow: scroll;*/

      }

      @media screen and (max-width: 600px) {

           .nav ul {

                border: thin solid #3FC;     

           }

           li#child6 {

                background:none;

           }

           .nav ul:hover li#child6 {

           background: url(images/icon-check.png) no-repeat 10px 10px;

           }

           li#child6 a, li#child6:hover a{

                color: #3FC;

           }

      }

      </style>

      <!-- InstanceEndEditable -->

       

      </head>

       

      <body>

       

      <div class="container">

      <div class="header" >

          <div id="head1img"><img src="images/NewheadLogo.png" alt="imgBFHeader" name="Insert_logo" width="100%" >

          <!-- end .header -->

        </div>

        <div class="clearfloat"></div>

        <div class="nav center"> 

          <ul> 

              <li id="child1"><a href="newindex.php">Home</a></li> 

              <li id="child2"><a href="aboutus.php">About</a></li> 

              <li id="child3"><a href="groupclasses.php" >Group Classes</a></li>

              <li id="child4"><a href="services.php">Services</a></li> 

              <li id="child5"><a href="schedule.php">Calendar</a></li>

              <li id="child6"><a href="testimonials.php">Testimonials</a></li> 

              <li id="child7"><a href="blog.php">Blog</a></li>

              <li id="child8"><a href="contactus.php">Contact</a></li> 

              <li id="child9"><a href="register.php">Register</a></li> 

          </ul> 

        </div> 

       

        <div class="content">

             <!-- InstanceBeginEditable name="main" -->

           <div  >

        <div class="picshadow"  style="background-image:url(images/main/DSC_00022.JPG)">          

           <p><strong><i>"Let me tell you why for the last 3 years that I have been a regular member and why I love it!! The Proprietor/Trainer -- Pam -- exudes an endless, positive energy that radiates to create a close, comfortable environment. Because of this comfort zone, we cater to a very diverse group of individuals who have become kindred spirits, enhancing each other’s lives far beyond physical fitness."</i></strong></p>

        <p><strong><i>"Out of the  Classes I participate in, my faves are Kickboxing and Zumba. Pam turns mundane exercises like ‘The Bicycle’ into exciting and fun variations -- not to mention the ‘SUMO’ Burpees! Her tireless enthusiasm is infectious! So, if you think you can handle an intense workout (at your own level) mixed with a sense of social community</i></strong></p>

        <p><strong><i>"With Pam’s classes, I am motivated to be the best me I can be....my body, my mind, my soul, my community....!"</i></strong></p>

       

      .......

       

        </div>

      </div>

             <!-- InstanceEndEditable -->

        <!-- end .content -->

        </div>

      </body>

      </HTML >

       

      //

       

      Any help would be greatly appreciated.

       

      Thanks

       

      Whichrtmej