5 Replies Latest reply on Dec 20, 2013 11:45 AM by osgood_

    Items not aligning in IE10

    LaurieWachter Level 1

      I am redesigning our website and have used CSS to align items on my home page.  I have IE9 on my system and everything aligns well, this:

      AlignmentGood.jpg

      When I test in IE10, the items no longer align.  "Success Stories" moves over to the right and everything else is a disaster.  I have used <br /> to move things down when the bullet points in each row differ, and IE10 must not read this anymore.  I do not know how to solve this so it looks correct in all versions of IE.  All other browsers look fine.  Is this possible to do in CSS or should I use a table instead?

      The site is here:  preview.stpha.org

      Thanks for any help you can provide.  I wanted to put this site out this weekend and hope to get this fixed today.

        • 1. Re: Items not aligning in IE10
          osgood_ Level 8

          Try wrapping each row of 3 sections in a <div> with a  class="rowWrapper" (as below). Use a class as the wrapper needs repeating another two times for the other 2 rows of sections:

           

           

           

          <div class="rowWrapper">

           

          First row of 3 sections go here.

           

          </div><!-- end rowWrapper -->

           

           

           

          <div class="rowWrapper">

           

          2nd row of 3 sections go here.

           

          </div><!-- end rowWrapper -->

           

           

          <div class="rowWrapper">

           

          Last row of 3 sections go here.

           

          </div><!-- end rowWrapper -->

           

           

          Then add this css:

           

          .rowWrapper {

          overflow: hidden;

          }

           

           

          What most likely is happening is the height of the sections slightly varies so when a section turns to another line it gets stuck against the side of a taller section. Wrapping the rows in a <div> and using overflow:hidden; should clear any obstacle in the way.

          • 2. Re: Items not aligning in IE10
            LaurieWachter Level 1

            Can I just add the overflow: hidden to one of my current classes or do I need an entirely new class?  If I need a new class, I am confused as to where it should go  My CSS for each row is below.  The innerleft/mid/righttop is for the image and the .entry is for the bullet points.

             

            .outer {

            width: 720px;

            position: relative;

            margin-left: 280px;

            /* clear: both; */

            }

            .innerlefttop {
            width: 31%;
            position: relative;
            float: left;
            background-image: url(infobar_ph1.png);
            background-repeat: no-repeat;
            padding-top: 88px;
            }

            .innerlefttop .entry {
            text-align: left;
            margin-bottom: 0px;
            padding: 0px 0px 0px 0px;
            }

            .innermidtop {
            width: 31%;
            position: relative;
            float: left;
            background-image: url(infobar_s81.png);
            background-repeat: no-repeat;
            padding-top: 88px;
            margin-left:  27px;
            }

            .innermidtop .entry {
            text-align: left;
            margin-bottom: 0px;
            padding: 0px 0px 0px 0px;
            }

            .innerrighttop {
            width: 31%;
            position: relative;
            float: right;
            background-image: url(infobar_homeownership1.png);
            background-repeat: no-repeat;
            padding-top: 88px;
            }

            .innerright .entry {
            text-align: left;
            margin-bottom: 0px;
            padding: 0px 0px 0px 0px;
            }

            • 3. Re: Items not aligning in IE10
              osgood_ Level 8

              LaurieWachter wrote:

               

              Can I just add the overflow: hidden to one of my current classes or do I need an entirely new class?

               

               

               

              You need to wrap each of the (4) rows in its own wrapper:

               

              Below is your first row. Do the same for row 2, 3 and 4 then add the new css to your stylesheet:

               

              .rowWrapper {

              overflow: hidden;

              }

               

               

              <div class="rowWrapper">

               

              <div class="innerlefttop">

              <div class="entry">

                        <ul>

                <li><a href="forms/factsheet.pdf" target="new">Fact sheet</a></li>

                                  <li><a href="ph_phas.html" target="_self">PHAS scores</a></li>

                                  <li><a href="forms/mgmtrpt.pdf" target="_blank">Production statistics</a></li>

                                  <li><a href="ph_waitinglist.html" target="_self">Application</a></li>

                               </ul>

              </div>

                           </div>


              <div class="innermidtop">

              <div class="entry">

                               <ul>

                <li><a href="forms/factsheet.pdf" target="new">Fact sheet</a></li>

                                  <li><a href="s8_semap.html" target="_self">SEMAP</a></li>

                                  <li><a href="s8_otherinfo.html#pbv" target="_self">PBV / Supportive Housing</a></li>

                                  <li><a href="s8_otherinfo.html#vash" target="_self">VASH</a></li>

                               </ul>

              </div>

                           </div>

                          
                          
              <div class="innerrighttop">

              <div class="entry">

              <ul>

                <li><a href="forms/residentresources_homeownership_stories.pdf" target="_blank">Family Housing Fund report</a></li>

                                      <li><a href="forms/residentresources_homeownership_statistics.pdf" target="_blank">HOME Program statistics</a></li>

                                      <li><a href="forms/residentresources_homeownership_basics.pdf" target="_blank">Contact information</a><br /><br /></li>

                                  </ul>

                           </div>

                      </div>


               

              </div><!-- end rowWrapper -->

              • 4. Re: Items not aligning in IE10
                LaurieWachter Level 1

                Thank you SO MUCH.  That works fantastically.  I soooo appreciate your help, thank you!!!

                • 5. Re: Items not aligning in IE10
                  osgood_ Level 8

                  LaurieWachter wrote:

                   

                  Thank you SO MUCH.  That works fantastically.  I soooo appreciate your help, thank you!!!

                   

                  You're welcome.