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

    broken footer/header

    Eliminateur

      Hello,

      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>
              </ul>
              <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;" />
               </ul>

           

          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;
            }
            </style>
            <![endif]-->

             

            </head>
            <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

              osgood,

              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;" />
                  </ul>
                </div>

               

              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