footer getting cut off/lost rounded edge in main section

teriyaki_tofu_steak@ · 09-20-2006, 09:04 AM

Hey everyone,

I've just started a blog for the library where I work. I've slowly been modifying a pre-made template. I just added a header and footer background to the template. However, the footer image keeps getting cut off. I assume this is because there is a pre-defined amount of space allotted for the footer in the template, and I'm exceeding it. How can I increase the amount of space allotted for the footer to keep this from happening? Or is it getting cut off for another reason?

Also, I suddenly lost the rounded corners on the right-hand edge of the main posting area. I must've accidentally deleted something in the template... can anyone tell me what in the template code is causing this to happen?

Any help on these two problems would be much appreciated. Thanks so much!

-Vicky

chicgeek · 09-20-2006, 09:10 AM

The Posting section corner problem is only in IE, not in FF.

I'll take a look at this. Hold tight.

chicgeek · 09-20-2006, 09:17 AM

In your CSS for the footer you have a lot of repetition:

Code:

/* Footer
----------------------------------------------- */
#footer {
  clear:both;
  margin:0;
  padding:15px 0 0;
  }
@media all {
  #footer div {
    background:url("http://www.perrotlibrary.org/blog/blogfooter2.gif") no-repeat;
    color:#fff;
    }
  #footer div div {
background:url("http://www.perrotlibrary.org/blog/blogfooter2.gif") no-repeat;
    }
  }
@media handheld {
  #footer div {
background:url("http://www.perrotlibrary.org/blog/blogfooter2.gif") no-repeat;
    }
  #footer div div {
background:url("http://www.perrotlibrary.org/blog/blogfooter2.gif") no-repeat;    
}
  }
#footer hr {display:none;}
#footer p {margin:0;}
#footer a {color:#fff;}

Replace that section with:

Code:

/* Footer
----------------------------------------------- */
#footer {
  clear:both;
  margin:0;
  padding:15px 0 0;
  height: 33px;
    background:url("http://www.perrotlibrary.org/blog/blogfooter2.gif") no-repeat;
    color:#fff;
    }
#footer p {margin:0;}
#footer a {color:#fff;}

Also, in your page code, replace:

Code:

<!-- Begin #footer -->

<div id="footer"><div><div><hr />


<center>
  <p>Please visit our website at <a href="http://www.perrotlibrary.org/">PerrotLibrary.org</a></p>

</center>

</div></div></div>

<!-- End #footer -->

With:

Code:

<!-- Begin #footer -->

<div id="footer">
<center>
  <p>Please visit our website at <a href="http://www.perrotlibrary.org/">PerrotLibrary.org</a></p>
</center>
</div>

<!-- End #footer -->

Try that and let me know how you fare. I'll look at the other problem now.

teriyaki_tofu_steak@ · 09-20-2006, 09:19 AM

Thanks so much!

I'll test that right now.

-Vicky

teriyaki_tofu_steak@ · 09-20-2006, 09:29 AM

Thanks-- that kept the footer from getting cut off. However, now the text is at the bottom at the footer instead of the center. The footer is also flush up against the body. How can I bump the footer down a little bit, and keep the text centered in it? I really appreciate your help!

chicgeek · 09-20-2006, 10:08 AM

Try this:

Code:

#footer {
  clear:both;
  margin: 8px 0;
  padding: auto;
  height: 33px;
    background:url("http://www.perrotlibrary.org/blog/blogfooter2.gif") no-repeat;
    color:#fff;
    }

The margin is to create some space above that graphic between the footer and the conent.

Now the IE/FF discrepancy. Sorry, I got distracted.

chicgeek · 09-20-2006, 10:32 AM

Right, so IE is being non standards compliant again. This graphic is 485px wide as is the div labelled "main". So.... here's what you try:

Code:

  #main {width:483px; float:left; background:#fff; }
html>body #main {width:485px; float:left; background:#fff; }

Find the similar section in your CSS and replace it with the above. The first line is for IE. I'm guessing it's a 2px difference - you may have to change the 483 value. The second is for all other browsers.

Let me know if it works. I'm crossing my fingers. IE hacks are always iffy.

teriyaki_tofu_steak@ · 09-20-2006, 11:03 AM

okay, that got rid of the extra piece of white stuff, but there's no border on that side now. i'm okay with that, except that the body section is now flush up against the header. how can i move it back down? also, now the rounded corners on the bottom of the body are gone. thanks for your help. i understand if you have other things you need to work on.. sheesh! can you recommend a book on blog template editing? or what can i read up on that would make this any easier? i know HTML and i am okay with CSS. thanks!

-vicky

chicgeek · 09-20-2006, 11:36 AM

Looks like your pasted it in incorrectly. Your code looks like this and you're missing some targeters and brackets in the CSS.

Code:

  #main {
    width:481px; float:left; background:#fff; }
    html>body #main {width:485px; float:left; background:#fff; } 
    background:#fff url("http://www.blogblog.com/rounders/corners_main_bot.gif") no-repeat left bottom;
    margin:15px 0 0;
    padding:0 0 10px;
    color:#000;
    font-size:85%;
    line-height:1.5em;
    }

I'm not sure what your original CSS looked like... but with the new changes added, I'm guessing it's something like this. Paste it in and see where we get:

Code:

#main {
    width:483px; 
    float:left; 
    background:#fff url("http://www.blogblog.com/rounders/corners_main_bot.gif") no-repeat left bottom;
    margin:15px 0 0;
    padding:0 0 10px;
    color:#000;
    font-size:85%;
    line-height:1.5em;
    }
html>body #main {
    width:485px; 
    float:left; 
    background:#fff url("http://www.blogblog.com/rounders/corners_main_bot.gif") no-repeat left bottom;
    margin:15px 0 0;
    padding:0 0 10px;
    color:#000;
    font-size:85%;
    line-height:1.5em;
    }

Oh, and you put 481px. I changed to 483. Try that.

teriyaki_tofu_steak@ · 09-20-2006, 12:36 PM

yeah, i was trying to tweak the pixel numbers to see how it affected the layout.

thanks again! there's still like a one-pixel wide line along the side of the body, but i can deal with that. it seems like it's not worth it to fix.

thanks so much for all your time! again, i really appreciate your help.

chicgeek · 09-20-2006, 12:42 PM

Try 482 now. If it doesn't work, then no biggie.

In FF there is no space between the content and the footer. Try this:

Code:

#footer {
  clear:both;
  margin-top: 10px;
  padding: auto;
  height: 33px;
    background:url("http://www.perrotlibrary.org/blog/blogfooter2.gif") no-repeat;
    color:#fff;
    }

Glad to help. Great looking blog, in content and design. *thumbs up*

teriyaki_tofu_steak@ · 09-20-2006, 01:51 PM

Thanks! That fixed the footer, and got rid of the extra line on the side of the body.

You've saved me countless hours of frustration and swearing under my breath!

teriyaki_tofu_steak@ · 09-20-2006, 01:52 PM

chicgeek · 09-21-2006, 06:01 PM

Glad it worked out for you.