4 Replies Latest reply on Apr 1, 2010 11:55 AM by Eliminateur

    broken footer/header



      i'm trying to fix a footer for IE6(urgh) and it breaks the top of it, after some testing i got it right the other day but with some new edits it broke and i have no idea why.

      in Firefox and IE8 it works great, take this page for example: http://www.espiralcalipso.com.ar/Prensa.html


      IE briefly shows the top part then puts it in black...


      the problem i had before with IE was the background being chopped and repeated when the table containing the images started(i removed the table ever since and set a repeat-x value in CSS)


      The header has a "similar problem" that with IE has a extra space bottom that i have no idea how to get rid of.


      any ideas?


      i've tried several combinations of margin, padding, manual indents, everything to no avail

        • 1. Re: broken footer/header
          osgood_ Level 8

          To correct the 'header' issue remove the <p> </p> after the 'MenuBar2' closing </ul>


          <li><a href="#">Espiral Blog</a></li>
              <p> </p>


          AND replace it with <br style="clear: both;" /> inserted BEFORE the closing 'MenuBar2' </ul> as shown below:


          <li><a href="#">Espiral Blog</a></li>

          <br style="clear: both;" />


          THEN add padding-bottom: 6px; to the 'header' css selector as shown below:


          .twoColHybLtHdr #header {
              text-align: center;
              background-image: url(la2.png);
              color: #00F;
              margin-bottom: 15px;
              padding-right: 20px;
              padding-left: 10px;
              padding-bottom: 6px;
              -moz-border-radius: 20px;
              -webkit-border-radius: 20px;

          1 person found this helpful
          • 2. Re: broken footer/header
            osgood_ Level 8

            You will also need to re-adjust IE 8 to show some space below the menu by way of an IE specific conditional comment (see below)


            Add the following to the pages code. Insert directly before the closing </head> tag as shown.


            <!--[if IE 8]>
            <style type="text/css">
            #MenuBar2 {
            padding-bottom: 10px;


            <body class="twoColHybLtHdr">



            I can't replicate the issue with your footer. Seems to be showing ok for me locally when testing.

            1 person found this helpful
            • 3. Re: broken footer/header
              Eliminateur Level 1


              first the footer, here's what it should look like in firefox:

              footer ie8.jpg

              This is how it looks on IE6:

              footer ie6.jpg

              notice how the whole top is cropped and the word "auspiciantes" does not appear.


              On the header case, i've replaced my code with:

                    <li><a href="#">Espiral Blog</a></li>
                  <br style="clear: both;" />


              but the changes are doing nothing, the padding-bottom added a padding beneath the menubar in firefox, but IE still shows a huge blank below the menu, when seeing the source file from IE or FF side, the padding does not appear in the CSS, but other changes i do show....

              i've used a testing page for this: http://www.espiralcalipso.com.ar/pruebas.html


              hmm there is a conditional comment for IE6 that already adds padding on the #header, i commented it to no avail, IE6 still shows a huge "pad" whilst firefox does not

              • 4. Re: broken footer/header
                Eliminateur Level 1

                i've solved the footer problem, it was a weird interaction between curvycorners and the background-position: 200px; of the BG image, once i removed that property it works completely.

                the only problem is that i have to test different values to see how can i offset the background now.


                so this leaves me with the header problem alone