Twitter Badge destroyed my footer [closed]

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center开发者_开发问答. Closed 11 years ago.

In today's news, the official twitter widget (http://twitter.com/about/resources/widgets) destroyed my footer completely. And I don't know why, since that script doesn't have access to my style.css

or does it?

I have tried to rearrange and ever redo the footer, and still the nice white space that the twitter widget created still persists. WTF is happening? Of all the tweaking I've done, the only thing that seems to work is deleting the entire footer. fantastic solution!

Can anybody help me?

footer.php:

</div> <!-- End of pagewrap -->

    <footer class="group">
        <div id="logo"></div>
        <div id="twittertitle"><h3>The Director's Production Diary @iampineros</h3>   </div>
        <div id="twitterbox"><div id="winfo"></div></div>

        <div id="sociallist">
            <ul>               
                <li><a href="#"><div id="facebooklogo"><h3>Facebook</h3></div></a></li>
                <li><a href="#"><div id="twitterlogo"><h3>Twitter</h3></div></a></li>
                <li><a href="#"><div id="flickrlogo"><h3>Flickr</h3></div></a></li>
                <li><a href="#"><div id="vimeologo"><h3>Vimeo</h3></div></a></li>
                <li><a href="#"><div id="youtubelogo"><h3>Youtube</h3></div></a></li>
            </ul>                                
        </div>
            <div id="disclaimer">All material published in this website is property of Filmliga unless stated otherwise. Please, don’t mess with us, thank you. Copyright 2011 FIlmliga/Benjamin Piñeros. All rights reserved. This site is powored by Wordpress.</div>

</footer>            

<?php wp_footer(); ?>


</body>

</html>

style.css:

#page-wrap { width:1020px; margin: 0px 0px 0px 0px; padding: 0px 0px 20px 0px; background: white; }

footer { width: 1020px; height: 300px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; background-color: #1e1e1e; }

#logo { width: 221px; height: 222px;position:relative; bottom: -20px; left: 20px; padding: 0px 0px 0px 0px; background-image:url(images/logo.png); background-repeat:no-repeat;  }

#twittertitle { position:relative; bottom: 208px; left: 270px; padding: 0px 0px 0px 0px; }

#twitterbox { position:relative; top: -203px; left: 270px; padding: 0px 0px 0px 0px; background-image:url(images/twitterbox.png); background-repeat:no-repeat; width: 540px; height: 190px; }

#winfo { position:relative; top: 0px; left: 0px; padding: 0px 0px 0px 0px; background:none; width: 500px; height: 180px; }

#sociallist { position:relative; bottom: 393px; left: 837px; padding: 0px 0px 0px 0px; background-color:#282828; width: 140px; height: 190px; }

#sociallist ul { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; list-style-type:none; list-style-image:none; }

#sociallist li { margin: 0px 0px 0px 0px; text-decoration: none; padding: 0px 0px 0px 0px; }

#sociallist li h3:hover {color: #1ad4ff; }

#facebooklogo { background-position: center; background-image: url(images/facebooklogo.png); background-repeat:no-repeat; width: 26px; height: 26px; position:relative; top: 10px; left: 103px; }

#facebooklogo h3 { position:relative; bottom: 3px; right: 90px; }

#twitterlogo { background-position: center; background-image: url(images/twitterlogo.png); background-repeat:no-repeat; width: 33px; height: 25px; position:relative; top: 20px; left: 98px; }

#twitterlogo h3 { position:relative; bottom: 3px; right: 85px; }

#flickrlogo { background-position: center; background-image: url(images/flickrlogo.png); background-repeat:no-repeat; width: 26px; height: 26px; position:relative; top: 30px; left: 103px; }

#flickrlogo h3 { position:relative; bottom: 2px; right: 90px; }

#vimeologo { background-position: center; background-image: url(images/vimeologo.png); background-repeat:no-repeat; width: 27px; height: 24px; position:relative; top: 40px; left: 101px; }

#vimeologo h3 { position:relative; bottom: 2px; right: 87px; }

#youtubelogo { background-position: center; background-image: url(images/youtubelogo.png); background-repeat:no-repeat; width: 24px; height: 29px; position:relative; top: 50px; left: 104px; }

#youtubelogo h3 { position:relative; bottom: 2px; right: 90px; }

#disclaimer { position: relative; bottom: 0px; left: 0px; margin: 0px auto; padding: 0px 0px 0px 17px; text-align: left; font-size: 10px; word-spacing: 3px; }

---

The problem is that you're positioning things in a pretty strange way inside your footer... you're specifying lots of top, left, and bottom values on elements that have position: relative—these elements are still causing things to lay out as if they are in the normal flow of the document (which accounts for the huge bottom gap you see), and then they're also shifted by your positioning values.

A much more common (and easier) approach is to give your footer (or .group) position:relative and then apply position: absolute to the children—that way the children will be absolutely positioned relative to the parent.

---

The problem lies is your layout. Your extensive use of absolute/relative positioning is messing up subsequent div placements. Consider redoing your layout.

Here's a quick fix though: Apply to #disclaimer:

margin-top: -330px;