Renders properly in Chrome and Firefox, but not in Safari or IE

Having issues with a) buttons in this code and b) the footer.

In Firefox/IE the buttons don't work properly and the footer shrinks and gets thrown in the corner.

The buttons shift to a different part of the page when pressed and the footer is unreadable.

Any help would be appreciated.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "">



<style type="text/css">

.con {text-align:center; }

button a {text-decoration:none; color:#08233e; }

#wtf_title {font-family: "Garamond"; font-weight: bold; font-size: 200%; padding-top:50px;}

#intro_text {font-family: "Helvetica", serif; color: black; padding-top:10px; font-style: italic;}

#reason {font-family: "Helvetica", serif; color: white; padding-top:50px; padding-bottom:50px;}

#credit {font-family: "helvetica"; font-size: 20%; color: black; text-align:center; }

font:2.4em Futura, ‘Century Gothic’, AppleGothic, sans-serif;
background:url(overlay.png) repeat-x center #ffcc00;
border:1px solid #ffcc00;
border-bottom:1px solid #9f9f9f;
-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);


button:active{position:absolute;top:100px; left:50px}​



    <div class="con">
        <p id="wtf_title">SAMPLE</p>
        <hr noshade size=8 width="53%">
        <p id="intro_text">SAMPLE</p>
        <button><a href="WTFLBJ_Hate.html" class="button1">SAMPLE</a></button><br>
        <button><a href="WTFLBJ_Defend.html" class="button2">SAMPLE</a></button>            

    <div id="twitter-share-button"; style="position: absolute; top: 2px;" >
        <a href="" class="twitter-share-button" data-url="" data-text="Check this out:" data-count="none" data-hashtags="WTFLBJ">Tweet</a>
        <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);;js.src="";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

    <div id="fb_share"; style="position: absolute; top: 2px; left: 90px;" >
        <a name="fb_share"></a> 
            <script src="" 

    <div id="credit"; style="position: absolute; bottom: 5px;  " >
        This site was created by <a href="">Varun Shetty</a> and <a href="">Bobby Corp</a>. Inspired by LBJ and <a href="">WTF Obama</a>. 


In your style delete this line

button:active{position:absolute;top:100px; left:50px}

Demo :

I have checked only in chrome and internet explorer 9, but I think it works in all browsers

Need Your Help

How to run maven project using an ant script?

java maven ant

I have created the sample maven project and I am able to build maven project successfully using with maven plugin (mvn clean, mvn install ...) but I want to run the sample maven project using an ant

Setting up Jquery Mobile for Phone Gap

jquery-mobile cordova

I am looking to setup jquery mobile with phone gap and perform a very simple task to see if it is working. This is what I have so far: