5 Replies Latest reply on May 21, 2010 3:01 PM by bobmail

    Vertical Alignment in Firefox




      This is a page layout problem.  We use Adode Dreamweaver CS4 to maintain the webiste for our small nonprofit affordable housing group.  All the pages are based on a template developed by a web designer back in 2005.  My skills are pretty much limited to updating the content, not the layout and I have minimal knowledge of HTML code.


      Anyway, the layout looks fine in Safari in Opera but not Firefox.  In Safari and Opera, the left side menu vertically aligns just below the header and navigation bar, as it was designed to. In Firefox, the left side menu aligns with the bottom of the page.  However, this only seems to happen on pages with content beyond a certain length.  If there is little content on the page, the alignment in Firefox looks as intended.


      For example, compare this page in Safari and Firefox: http://www.housingactionil.org/news-alerts/index.html


      Thanks for reading!

        • 1. Re: Vertical Alignment in Firefox
          osgood_ Level 8



          You may be able to salvage the construction. It's very badly built which is why the left content appears so far down the page.


          If youre willing to give it  a try here are the steps:


          As this page was made from a template the template would need correcting


          1) First and most importantly make a copy of the complete site folder (just incase you need to go back to the original at any time) including the template file.


          2) Open the template file.


          3) Select the whole table that your left link menu images are in. You can do that by clicking into the table with your  mouse and then choosing the <table> tag along the bottom of Dreamweavers Design View. You will know when the correct <table> has been chosen as you'll see a thicker line appear around the table you are trying to select. Cut the table from the page and paste it somewhere safe, in a new document, so you can go back and get the code later.


          4) Remove the rest of the content in the left column in a similar fashion. The rest of the content is in two <divs> so click somewhere in the first <div> in Design View and select the correct <div> tag along the bottom of Design View Window. Again you will know when the right <div> has been selected as it will become 'highlighted'. Cut this code from the page and paste it somewhere safe so you can return to it later. Repeat the procedure for the second <div>.


          5) Once all the content has been removed from the left table cell click your mouse cursor inside the top row in the cell. Go>Modify>Table>Delete Row. All three rows should disapear.


          6) Start pasting back into the left table cell the code that you cut from the page, the table code first, and then the code for the two <divs>.


          This may help solve the issue.


          The cause of the issue is that the left table cell has been split horizontaly. This causes the content to move down as you put more content into the centre column because both columns act as one unit instead of two seperate ones. The less content that is in the center column the more the left content moves up.

          • 2. Re: OT: Vertical Alignment in Firefox
            hans-g. Adobe Community Professional & MVP

            Hi osgood,


            your "Hummm" is more than justified, probably the site was built in due time with other standards. To save them, people need your great elaboration and their own resources.


            I don't want again bring the AddOn's into the game, but isn't it weird? IE shows this badly arranged website correct, despiting all the ups and downs of an imperfect website (very often I am happy it does cause of my own imperfections in DW), FF needs AddOn's or a perfect code!


            How could we finally bridge this gap?



            • 3. Re: OT: Vertical Alignment in Firefox
              osgood_ Level 8

              The issue regarding spliting and merging table cells was well known back in the days of sites being constructed exclusively by using tables, the preferred method.


              Even in those times you needed to know how to avoid such problems. Today it's just moved on a bit, you need to know the inconsistancies of css x-browser, but with each generation of brower release, which bring with them more standards compliancy,

              it gets easier.


              I have a simple approach. I view every thing as a set of simple unjoined boxes, which you fill with content. If you keep it simple it will work, if you start complicating matters it will fail.

              • 4. Re: OT: Vertical Alignment in Firefox
                hans-g. Adobe Community Professional & MVP

                Hi osgood,


                you are right, with CS5 became (also for me) everything, especially to create css, easier and even though after my long pause in designing websites. Yes, I now really become to understand the matter the "Faux Columns Liquid."But we spoke about our older sites. I think it's just a shame that we have to re-adjust all these old files. Fate!? Ok, I have to accept: πάντα ῥεῖ, but sometimes things come at an unfortunate time.



                • 5. Re: Vertical Alignment in Firefox
                  bobmail Level 1

                  Hi again.


                  Thanks for your directions.  I followed them but am still having problems with this part of the page: <!-- TemplateBeginEditable name="menu left side" -->.


                  I can't figure out how to paste back in the table and the <div> and make it work properly with the "menu left side".  If I totally delete the "menu left side" I can get everything to align at the top in Firefox, but the "menu left side" is necessary for pages such as http://www.housingactionil.org/training-technical/pages1-20/index06.html.