Footer acting strange … time to ask for help on this one.
-
For some reason, my footer is not displaying correctly, and I am not sure what is going on with that. I have been looking into this all day and have come up with nothing. Any ides?
style.css
* { margin: 0; padding: 0; } body { text-align: left; font: 13px Verdana; color: #566777; background: #ffffff url(../images/headerbg.gif) repeat-x 0 0; } a { text-decoration: none; color: transparent; } a:hover { text-decoration: underline; color: transparent; } img { border: 0; } .break { font-size: 0; width: 0; height: 0; clear: both; } .alignleft { float: left; margin: 4px 10px 5px 0; } .alignright { float: right; margin: 4px 0 5px 10px; } .aligncenter { text-align: center; } .hidden { display: none; } /** BEGIN wrapper **/ .wrapper { width: 885px; margin: auto auto; text-align: left; } /** END wrapper **/ /** BEGIN header **/ #header { height: 178px; } #header .search { float: right; margin-top: 11px; } #header .search form { background: url(../images/search.png) no-repeat 0 0; height: 49px; width: 284px; } #header .search form input { float: right; background-color: transparent; border: 0; font-size: 0.8em; color: #FFFFFF; height: 38px; width: 223px; margin-top: 5px; text-transform: uppercase; } #header .search form button { float: left; width: 59px; height: 49px; background-color: transparent; border: 0; color: transparent; text-indent: -9999px; } #header .subscribe { position: relative; top: 75px; left: 635px; float: left; text-align: center; color: #ffffff; } #header .purchase { clear: both; position: relative; bottom: 21px; left: 725px; } #header .logo { clear: both; } #header .logo h1 { padding-bottom: 32px; } #header .logo h1 a { position: relative; bottom: 15px; background: url(../images/logo.png) no-repeat 0 0; display: block; text-indent: -9999px; height: 62px; width: 352px; } #header ul { list-style-type: none; } #header ul li { float: left; margin-right: 15px; } #header ul li a { padding: 5px 8px; color: #FFFFFF; text-transform: uppercase; text-decoration: none; font-size: 0.9em; font-weight: bold; } #header ul li a:hover { background-color: #b9c3cf; } /** END header **/ /** BEGIN featured **/ #featured { padding: 43px 53px 0 53px; background: #b7c3cf; } #featured .l { float: left; margin-right: 22px; margin-top: 75px; } #featured .items { width: 650px; height: 240px; overflow: hidden; margin-right: 10px; float: left; } #featured .feat { width: 650px; } #featured .featuredimg { display: block; float: left; border: 5px solid #ffffff; margin-bottom: 45px; margin-right: 25px; width: 240px; height: 190px; overflow: hidden; } #featured .feat img { width: 240px; } #featured .feat .text { float: right; width: 375px; padding-top: 5px; } #featured .feat .text h2 a { text-decoration: none; color: #566777; font-size: 1.9em; font-family: Arial; padding-bottom: 10px; } #featured .feat .text p { color: #5f6168; font-size: 0.9em; } #featured .r { float: right; margin-top: 75px; } /** END featured **/ /** BEGIN top **/ #top { clear: both; padding: 20px 0; } #top .box { width: 240px; float: left; margin: 0 40px 0 14px; } #top .box .name { height: 58px; background: url(../images/border.gif) repeat-x 0 bottom; } #top .box .name img { float: left; padding-bottom: 5px; padding-right: 9px; } #top .box .name .title { color: #566777; text-transform: uppercase; text-decoration: none; font-weight: bold; font-family: Arial; font-size: 1.1em; } #top .box .name .title2 { text-transform: uppercase; text-decoration: none; font-family: Arial; color: #5f6168; font-size: 0.8em; } #top .box .text2 { clear: both; margin: 15px 0 40px 6px; } #top .box .text2 p { color: #76848f; font-size: 0.8em; margin-bottom: 20px; } #top .box .text2 .more { font-size: 0.8em; color: #38b5c4; text-decoration: underline; } /** END top **/ /** BEGIN body **/ #body { clear: both; } /** END body **/ /** BEGIN content **/ #content { width: 511px; float: left; } #content .post { margin-bottom: 22px; margin-top: 37px; clear: both; } #content .post h2 { font-size: 1.8em; text-transform: uppercase; font-family: Arial; font-weight: bold; padding-bottom: 18px; background: url(../images/border.gif) repeat-x 0 bottom; } #content .post h2 a { color: #566777; text-decoration: none; } #content .post img { float: left; padding: 5px; background-color: #FFFFFF; margin: 17px 11px 19px 4px; } #content .post p { margin-top: 20px; font-size: 0.9em; line-height: 1.5em; color: #566777; } #content .post .date { color: #566777; height: 20px; padding-top: 5px; clear: both; } #content .post .category a { background: url(../images/category.gif) no-repeat 0 0; color: #566777; padding-left: 29px; padding-right: 10px; text-decoration: underline; height: 16px; } #content .post .comments a { background: url(../images/comments.gif) no-repeat 0 0; color: #566777; padding: 0 10px 5px 23px; text-decoration: underline; height: 20px; } #content .entry { font-weight: bold; color: #00a5b6; text-decoration: none; text-transform: uppercase; background: url(../images/previous.gif) no-repeat 0 6px; padding-left: 15px; } #content .last { margin-bottom: 70px; } #content .postnav { text-transform: uppercase; font-weight: bold; padding: 20px 0; } #content .postnav a { text-decoration: none; } /** END content **/ /** BEGIN sidebar **/ #sidebar { float: right; width: 326px; padding-bottom: 40px; } #sidebar .box2 h2 { text-transform: uppercase; color: #566777; font-size: 1.1em; font-family: Arial; padding-bottom: 11px; margin-top: 32px; background: url(../images/border.gif) repeat-x 0 bottom; } #sidebar .sub ul { list-style-type: none; } #sidebar .sub ul li { float: left; margin-top: 11px; margin-bottom: 17px; margin-right: 6px; margin-left: 10px; } #sidebar .ad { clear: both; } #sidebar .ad img { float: left; margin-right: 10px; } #sidebar .ad p { font-size: 0.8em; color: #81848a; margin: 5px 0 20px 0; } #sidebar .ad .time { text-decoration: none; font-size: 0.8em; color: #00a5b6; } #sidebar .pop ul { list-style-type: none; } #sidebar .pop ul li { float: left; width: 320px; margin: 10px 0 10px 10px; } #sidebar .pop ul li img { background-color: #FFFFFF; padding: 5px; margin-right: 11px; float: left; width: 50px; height: 50px; } #sidebar .pop ul li .title { color: #5f6168; font-weight: bold; text-decoration: none; } #sidebar .pop ul li .artcom { color: #3ab7c5; text-decoration: none; font-size: 0.8em; } #sidebar .pop ul li p { margin-top: 15px; margin-bottom: 5px; } #sidebar .flick img { width: 80px; height: 80px; margin: 5px; } #sidebar .flick h2 { margin-bottom: 7px; } #sidebar .video { margin: 15px 0; } #sidebar .cat { width: 135px; float: left; margin-right: 20px; } #sidebar .cat ul { list-style-type: none; margin-left: 10px; } #sidebar .cat ul li { padding-top: 18px; } #sidebar .cat ul li a { color: #5f6168; font-size: 0.9em; text-decoration: none; } #sidebar .cat ul li a:hover { color: #00a5b6; } /** END sidebar **/ /** BEGIN footer **/ #footer { background: #000000 url(../images/footerbg.gif) repeat-x 0 0; height: 400px; clear: both; padding: 15px 0; } #footer #reviews { float: left; border-right; color: #999999; } #footer #info { padding-left: 10px; float: right; color: #999999; border-left: 1px solid #515151; } #info a { text-decoration: none; color: #007fff; } #info a:hover { text-decoration: underline; color: #007fff; } } /** END footer **/ /** BEGIN reviews **/ #reviews { padding: 43px 53px 0 53px; background: #000000; } #reviews .l { float: left; margin-right: 22px; margin-top: 75px; } #reviews .items { width: 540px; height: 150px; overflow: hidden; margin-right: 10px; float: left; } #reviews .feat { width: 650px; } #reviews .featuredimg { display: block; float: left; border: 1px solid #999999; margin-bottom: 45px; margin-right: 25px; width: 126px; height: 100px; overflow: hidden; } #reviews .feat img { width: 240px; } #reviews .feat .text { float: right; width: 375px; padding-top: 5px; } #freviews .feat .text h2 a { text-decoration: none; color: #566777; font-size: 1.9em; font-family: Arial; padding-bottom: 10px; } #reviews .feat .text p { color: #5f6168; font-size: 0.9em; } #reviews .r { float: right; margin-top: 75px; } /** END reviews **/ /** begin pages submenu **/ #header li ul { clear: both; position: absolute; list-style-type: none; display: none; z-index: 200; height: auto !important; padding-top: 1px; padding-left: 0 !important; margin-left: -1px; background-image: none !important; border-width: 0 0 1px !important; border-color: #ffffff; border-style: solid; } #header li ul li { clear: both; margin: 0 !important; background-image: none !important; border-width: 1px 1px 0; border-style: solid; border-color: #ffffff; padding: 0 !important; } #header li ul li a { padding: 4px 15px !important; line-height: 1.5em; width: 170px; background-color: #015A77; } #header li ul li a:hover { background-color: #000033 !important; background-image: none !important; } /** end pages submenu **/ /** BEGIN miscellaneous **/ #content .single { padding: 20px; margin-bottom: 50px; } #content .single p { line-height: 1.5em; margin-bottom: 10px; } #content .single ul, #content .single ol { list-style-position: inside; margin-bottom: 10px; } #content .single li { line-height: 1.5em; padding: 2px 0; } #content .single blockquote { padding: 10px 10px 5px; margin-bottom: 10px; background-color: #eeeeee; border-width: 1px 0; border-style: solid; border-color: #bbbbbb; } #content .single h3, #content .single h4, #content .single h5, #content .single h6 { font-size: 1.2em; margin-bottom: 5px; } #content .single h2 { font-size: 2em; } #comments { padding: 20px; } #comments a { text-decoration: none; } #comments h2 { font-size: 1.2em; margin: 10px 0; } #comments p { margin-bottom: 10px; line-height: 1.6em; } #comments form { } #comments form p { margin-bottom: 5px; } #comments form input { margin-right: 5px; } #comments form input, textarea { border: 1px solid #bbbbbb; font-size: 0.9em; font-family: Verdana; padding: 4px; background-position: 4px 4px; background-repeat: no-repeat; } #comments form input { width: 240px; border: 1px solid #bbbbbb; } #comments form textarea { width: 350px; padding: 4px 4px !important; border: 1px solid #bbbbbb; } #comments form button { border: 1px solid #a0a0a0; font-size: 1em; font-family: Verdana; padding: 2px 6px; } .commentdetails { margin-top: 25px; } .commentauthor { margin-bottom: 5px !important; font-weight: bold; } .commentdate { font-size: 0.8em; margin-bottom: 5px; color: #909090; } .required { color: #ff0000; } h2.title { font-size: 1em !important; text-transform: uppercase; color: #565656; padding-top: 30px; } .notfound { padding: 40px; } .notfound h2 { font-size: 18px; font-weight: normal; margin-bottom: 10px; } /** END miscellaneous **/ /** BEGIN wordpress 2.7 comments **/ #comments ol { list-style-type: none; clear: both; padding: 0; margin: 0; } #comments .buffer { padding: 10px; } #comments ol li { margin-bottom: 10px; } #comments ol li ul li { border: 1px solid #eeeeee; padding: 10px; } #comments ol li .avatar { float: right; } #comments ol li .comment-author { } #comments ol li .comment-author .fn { font-weight: bold; font-size: 1.2em; } #comments ol li .comment-meta { font-size: 0.9em; color: #999999; margin: 5px 0 10px; } #comments ol li .reply { font-size: 0.9em; font-weight: bold; padding-bottom: 10px; } #comments .children { list-style-type: none; } #comments .navigation { padding: 0 0 40px; font-size: 0.9em; } #comments .navigation a { color: #999999; padding: 3px 8px; border: 1px solid #bbbbbb; } #comments .navigation a:hover { color: #000000; border-color: #000000; text-decoration: none; } #comments .says { display: none; } /** END wordpress 2.7 comments **/
footer.php
<div class="break"></div> </div> <!-- END body --> </div> <!-- END wrapper --> <!-- BEGIN bottom --> <div id="footer"> <!-- BEGIN wrapper --> <div class="wrapper"> <div align="center"> <img src="<?php bloginfo('template_url'); ?>/assets/images/partners.png" alt="PLEASE VISIT OUR PARTNERS"/></div> <!-- BEGIN top --> <div id="top"> <div class="box"> <div class="name"> <a href="#"><img align="center" alt="top" src="<?php bloginfo('template_url'); ?>/assets/images/comingsoon.png"/></a> <a class="title">Partner #1</a> <br /> <a class="title2">Coming Soon</a> </div> <div class="text2"> <p>This is where the partner synopsys will be located for this partner when completed.</p> <a href="#" class="more">Read More >></a> </div> <div class="break"></div> </div> <div class="box"> <div class="name"> <a href="#"><img alt="top" src="<?php bloginfo('template_url'); ?>/assets/images/comingsoon.png"/></a> <a class="title">Partner #2</a> <br /> <a class="title2">Coming Soon</a> </div> <div class="text2"> <p>This is where the partner synopsys will be located for this partner when completed.</p> <a href="#" class="more">Read More >></a> </div> <div class="break"></div> </div> <div class="box"> <div class="name"> <a href="#"><img alt="top" src="<?php bloginfo('template_url'); ?>/assets/images/comingsoon.png"/></a> <a class="title">Partner #3</a> <br /> <a class="title2">Coming Soon</a> </div> <div class="text2"> <p>This is where the partner synopsys will be located for this partner when completed.</p> <a href="#" class="more">Read More >></a> </div> <div class="break"></div> </div> </div> <!-- END top --> </div> <!-- END wrapper --> <!-- BEGIN wrapper --> <div class="wrapper"> <!-- BEGIN wrapper --> <div class="wrapper"> <!-- BEGIN reviews --> <div id="reviews"> <a class="prev" href="#"><img class="l" alt="featured title" src="<?php bloginfo('template_url'); ?>/assets/images/left.gif"/></a> <div class="items"> <?php $tmp_query = $wp_query; query_posts('cat=' . get_cat_ID(dp_settings('featured1'))); if (have_posts()) : while (have_posts()) : the_post(); ?> <div class="feat"> <a class="featuredimg" href="<?php the_permalink(); ?>"><?php dp_attachment_image($post->ID, 'full', 'alt="' . $post->post_title . '"'); ?></a> <div class="text"> <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> <?php the_excerpt(); ?> </div> <div class="break"></div> </div> <?php endwhile; endif; $wp_query = $tmp_query; ?> </div> <a class="next" href="#"><img class="r" alt="featured title" src="<?php bloginfo('template_url'); ?>/assets/images/right.gif"/></a> </div> <!-- END reviews --> <p id="info">© 2010 The Billboard Family<br />All Rights Reserved <br /><br /> → <a href="http://billboardfamily.com/" target="_blank">Submit A Review</a><br /> → <a href="/terms-and-conditions">Terms & Conditions</a><br /> → <a href="/partners">Partners</a><br /> → <a href="/contact">Contact Us</a></p> </div> <!-- END wrapper --> </div> <!-- END bottom --> </body> </html>
-
Can you provide a link to an example page where the header is failing to work correctly?
the header is working fine….it is the footer that has the issue.
http://www.billboardfamily.com
thanks
Sorry, yes…the footer. Sorry about that!
What are you expecting it to do that it is not doing?
it is not extending all the way across the page, like the header does. It did yesterday, and I do not know what I did to make it not work properly. I need some help, lol.
BACKUP YOUR CODE BEFORE ANY CHANGES.
I looked at your site, and if you can find the code that says <!– END bottom –> and cut the </div> that is DIRECTLY after that.
Then, paste it just before the <!– BEGIN bottom –>.
Save and checkout your site!
That worked, almost. Now the footer is good on the left side, but fails to extend all the way to the right. Now what??? LOL.
This is what I see: http://skitch.com/mkbernier/dmca6/billboard-family
It looks like it is extending to both sides when I look at it in Firefox and Safari on a Mac.What about if you scroll all the way tot he RIGHT with the horizontal scroll bar at the bottom….when I do that, I get a white space on the right of the footer. Also, that scroll bar should not be there (the horizontal one at the bottom, but not sure why it is there). Here is what the theme looks like on the demo site:
I have been tinkering with this since I posted this, and I am getting close, but I just can not seem to get it right. If anyone can give me the extra push I need, I would be eternally grateful. Thanks in advance!
Got it, thanks!
Was it just another Div tag out of place?
No, actually. I had an image in the header that was too large, and it pushed everything. I changed the size of the container of the image, and that fixed it.
Nice work!
- The topic ‘Footer acting strange … time to ask for help on this one.’ is closed to new replies.