8 Replies Latest reply: Sep 3, 2013 4:52 AM by KINNEY201 RSS

    Outside container in place, yet contents moving when zooming and in IE.

    KINNEY201 Community Member

      Hello,

       

      Been working on a new page for about a week and have hit a brick wall.

       

      Placed a div container around my entire contents in hopes to keep them locked at all times, however, this is not the case.

       

      In Chrome and Firefox, when zooming in and out, you can see the right side shifting. (And is it me, or does the right column look longer than the left by just a hair???

       

      And in IE, it doesn't even look like my page.  WHY?

       

      http://www.saintleo.edu/VirtualTour/demo6.html

       

      I hope you can see what I'm asking for.  As always, I appreciate your time and assistance.

       

      Kind regards,

      JK

        • 1. Re: Outside container in place, yet contents moving when zooming and in IE.
          Nancy O. MVP

          Remove this:

          div#container {

            left: 0;

            margin: auto;

            position: absolute;

            top: 0;

            right: 0;

            width: 1160px;

            height: 384px;

          }

           

          Replace it with this:

           

          body {

          background:#275d39;

          width:1160px;

          margin: 0 auto;

          position:relative;

          }

           

          And this:

           

          /*thumbnails*/

           

          #thumbs {

          color: #666;

          font-family:Arial, helvetica, sans-serif;

          font-size: 13px;

          width: 230px;

          }

          #thumbs .thumb {

          padding:11px 8px;

          background:#275d39;

          min-height:55px;

          }

           

           

           

          Nancy O.

          • 2. Re: Outside container in place, yet contents moving when zooming and in IE.
            KINNEY201 Community Member

            Hi Nancy,

             

            Thank you for your response.

             

            I tried your suggestion, however, all it seemed to do was change my color scheme.

             

            There is still significant movement when zooming in and out within any of the browsers.

             

            Just can't seem to pinpoint the problem.

             

            Thanks again for looking at it.

             

            http://www.saintleo.edu/VirtualTour/demo6.html

             

            JK

            • 3. Re: Outside container in place, yet contents moving when zooming and in IE.
              Nancy O. MVP

              You're still using position:absolute on your #thumbs. Absolute positioning removes content from the normal document flow and results in many layout problems for new web designers.  Default CSS positioning (static or unspecified) is usually the best approach.  APDivs are rarely used in layouts. 

               

              In terms of code errors, you have a stray </div> tag on line 116 of your markup. This could effect less forgiving browsers like IE10 and Chrome.   Check your code for other errors as well.

              http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.saintleo.edu%2FVirtualTour%2F demo6.html

               

               

               

              Nancy O.

              • 4. Re: Outside container in place, yet contents moving when zooming and in IE.
                KINNEY201 Community Member

                Nancy,

                 

                I am new to most of this and do appreciate your help.

                 

                I have removed the stray </div> and cleared the other errors in the validator.

                 

                Page seems to look the same now in all browsers, which is good.

                 

                I do not see the absolute positioning assigned to #thumbs, so I am still confused about that.

                 

                The only problem that seems to be remaining for me is zooming.....that right column always seems to want to move.

                 

                If it's the best I can get it to, I'll have to settle. 

                 

                Note:  I used a template for the page (MenuCool) and did not set the positioning myself.

                 

                http://www.saintleo.edu/VirtualTour/demo6.html

                • 5. Re: Outside container in place, yet contents moving when zooming and in IE.
                  Nancy O. MVP

                  IMO, you have a very poorly crafted template.   For something this simple, you should go back to basics. 

                   

                  Copy & paste this code into a new, blank document and play with it.  In the long run, you'll learn more from working with good code and a stable layout than you will with what you have now.

                   

                   

                  <!doctype html>
                  <html>
                  <head>
                  <meta charset="utf-8">
                  <title>HTML5, 3-columns</title>
                  
                  <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
                  
                  <style>
                  * {
                  box-sizing: border-box;
                  -moz-box-sizing: border-box;
                  -webkit-box-sizing: border-box;
                  margin: 0;
                  padding: 0;
                  }
                  
                  body {
                  font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
                  font-size: 100%;
                  background-color: #275d39;
                  color: #FFF;
                  }
                  
                  #wrapper {
                  width: 1000px;
                  margin: 0 auto;
                  overflow: hidden; /**float containment**/
                  }
                  
                  /**middle**/
                  section {
                  width: 56%;
                  float: left;
                  }
                  
                  /**left and right**/
                  aside {
                  width: 22%;
                  float: left;
                  }
                  
                  aside img {
                  vertical-align: middle;
                  border: 5px groove #FFF;
                  }
                  
                  aside p {
                  padding: 6px;
                  font-weight: bold;
                  min-height: 75px;
                  border: 2px solid #CCC;
                  border-bottom: none;
                  }
                  
                  /**add bottom border to last p only**/
                  aside p:last-child { border-bottom: 2px solid #CCC}
                  
                  /**on mouseover**/
                  aside p:hover {
                  cursor: pointer;
                  background: #e2ae0e;
                  color: #275d39;
                  }
                  
                  footer {
                  clear: both;
                  padding-top: 45px;
                  padding-left: 45px;
                  }
                  
                  </style>
                  </head>
                  
                  <body>
                  <div id="wrapper">
                  
                  <!--left column-->
                  <aside>
                  <p><img alt="description" src="http://placehold.it/70x44">
                  some text</p>
                  
                  <p><img alt="description" src="http://placehold.it/70x44">
                  some text</p>
                  
                  <p><img alt="description" src="http://placehold.it/70x44">
                  some text</p>
                  
                  <p><img alt="description" src="http://placehold.it/70x44">
                  some text</p>
                  
                  <p><img alt="description" src="http://placehold.it/70x44">
                  some text</p>
                  </aside>
                  
                  
                  <!--middle content area-->
                  <section>
                  <img alt="description" src="http://placehold.it/560x375">
                  </section>
                  
                  <!--right column-->
                  <aside>
                  <p><img alt="description" src="http://placehold.it/70x44">
                  some text</p>
                  
                  <p><img alt="description" src="http://placehold.it/70x44">
                  some text</p>
                  
                  <p><img alt="description" src="http://placehold.it/70x44">
                  some text</p>
                  
                  <p><img alt="description" src="http://placehold.it/70x44">
                  some text</p>
                  
                  <p><img alt="description" src="http://placehold.it/70x44">
                  some text</p>
                  </aside>
                  
                  <!--begin footer-->
                  <footer> Your footer goes here... </footer>
                  
                  <!--end wrapper-->
                  </div>
                  </body>
                  </html>
                  

                   

                   

                  Nancy O.

                  • 6. Re: Outside container in place, yet contents moving when zooming and in IE.
                    KINNEY201 Community Member

                    Hi Nancy,

                     

                    I trust your opinion and have always learned something from your advice.

                     

                    I've started with what you have given me, however, I'm almost afraid to touch anything as I'm prone to overthinking or complicating the code.

                     

                    For example, my current worries are:

                     

                    1. Do I have to create div's in order to add spacing between the thumb images and text since it falls under one big <p>?

                     

                    2. The design that you provided is clean and sharp and I love it.  But, will I still be able to ultimately have the thumbs populate the larger image in the middle area which will play the Vimeo files?

                     

                    I guess that's where things spun out of control with my first go at it.  I just don't want to move forward without checking with you first.

                     

                    Here's my current code:  (Thank you again, Nancy.  You are so very helpful and I can't thank you enough.)

                     

                    <!doctype html>

                    <html>

                    <head>

                    <meta charset="utf-8">

                    <title>HTML5, 3-columns</title>

                     

                    <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

                     

                    <style>

                    * {

                    box-sizing: border-box;

                    -moz-box-sizing: border-box;

                    -webkit-box-sizing: border-box;

                    margin: 0;

                    padding: 0;

                    }

                     

                    body {

                    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;

                    font-size: 100%;

                    background-color: #275d39;

                    color: #FFF;

                    }

                     

                    #wrapper {

                    width: 1000px;

                    margin: 0 auto;

                    overflow: hidden; /**float containment**/

                    }

                     

                    /**middle**/

                    section {

                    width: 56%;

                    float: left;

                    }

                     

                    /**left and right**/

                    aside {

                    width: 22%;

                    float: left;

                    }

                     

                    aside img {

                    vertical-align: middle;

                    border: 5px groove #FFF;

                    float: left;

                    }

                     

                    aside p {

                    padding: 6px;

                    font-weight: bold;

                    min-height: 75px;

                    border: 2px solid #CCC;

                    border-bottom: none;

                    }

                     

                    /**add bottom border to last p only**/

                    aside p:last-child { border-bottom: 2px solid #CCC}

                     

                    /**on mouseover**/

                    aside p:hover {

                    cursor: pointer;

                    background: #e2ae0e;

                    color: #275d39;

                    }

                     

                    footer {

                    clear: both;

                    padding-top: 45px;

                    padding-left: 45px;

                    }

                     

                    </style>

                    </head>

                     

                    <body>

                    <div id="wrapper">

                     

                    <!--left column-->

                    <aside>

                    <p><img alt="Overview" src="http://www.saintleo.edu/VirtualTour/Images/Overview-thumb.jpg">

                    Overview</p>

                     

                    <p><img alt="St. Leo Abbey" src="http://www.saintleo.edu/VirtualTour/Images/St.LeoAbbey-thumb.jpg">

                    1. St. Leo Abbey</p>

                     

                    <p><img alt="Athletics" src="http://www.saintleo.edu/VirtualTour/Images/Athletics-thumb.jpg">

                    Athletics</p>

                     

                    <p><img alt="Student Community Center" src="http://www.saintleo.edu/VirtualTour/Images/StudentCommunityCenter-thumb.jpg">

                    Student Community Center</p>

                     

                    <p><img alt="School of Education & Social Services" src="http://www.saintleo.edu/VirtualTour/Images/SchoolOfEducation&SocialServices-thumb.jpeg">

                    School of Education & Social Services</p>

                    </aside>

                     

                     

                    <!--middle content area-->

                    <section>

                    <img alt="description" src="http://placehold.it/560x375">

                    </section>

                     

                    <!--right column-->

                    <aside>

                    <p><img alt="Freshman Residence Halls" src="http://www.saintleo.edu/VirtualTour/Images/FreshmanResidenceHalls-thumb.jpg">

                    Freshman Residence Halls</p>

                     

                    <p><img alt="School of Arts & Sciences" src="http://www.saintleo.edu/VirtualTour/Images/SchoolOfArts&Sciences-thumb.jpg">

                    School of Arts & Sciences</p>

                     

                    <p><img alt="Residence Apartments" src="http://www.saintleo.edu/VirtualTour/Images/ResidenceApartments-thumb.jpg">

                    Residence Apartments</p>

                     

                    <p><img alt="Student Activities Building" src="http://www.saintleo.edu/VirtualTour/Images/StudentActivitiesBuilding-thumb.jpg">

                    Student Activities Building</p>

                     

                    <p><img alt="School of Business" src="http://www.saintleo.edu/VirtualTour/Images/SchoolOfBusiness-thumb.jpg">

                    School of Business</p>

                    </aside>

                     

                    <!--begin footer-->

                    <footer> Your footer goes here... </footer>

                     

                    <!--end wrapper-->

                    </div>

                    </body>

                    </html>

                    • 7. Re: Outside container in place, yet contents moving when zooming and in IE.
                      Nancy O. MVP

                      #1  To add space between thumbnails and text, add a margin-left to the aside img selector:

                       

                      aside img {

                      margin-right: 12px;  /**adjust value as needed**/

                      vertical-align: middle;

                      border: 5px groove #FFF;

                      }

                       

                      #2 I don't see why not providing you use some JavaScript onClick event triggers to show hide videos.

                       

                       

                       

                      Nancy O.

                      • 8. Re: Outside container in place, yet contents moving when zooming and in IE.
                        KINNEY201 Community Member

                        Hi Nancy,

                         

                        This has been a big help.  Probably need to tweak a few things but my biggest challenge right now is trying to figure out how to set the onclick correlation between the thumnails and the associated slide.

                         

                        http://www.saintleo.edu/VirtualTour/video.html

                         

                        Any ideas or pointers would be greatly appreciated.  I believe the the slider feature actually has the script included, just can't figure out how to call and apply it.

                         

                        Hope this makes sense.  Sorry, still a newbie.