Topmargin 0 not working? Caching issue?

1 Views

I can’t seem to get my margin-top:0; property to work in my style sheet. I’m not sure why, but when I clear my browser’s cache, the property will work temporarily, and then go right back to leaving a space at the top of my page (take a look: www.sunporchhomes.com). I’m using WordPress to build. Here’s the top half of my code, any help would be greatly appreciated.

CSS

Read More
body
{
margin:0;
padding:0;
background-image:url("http://www.sunporchhomes.com/sphbg5.png");
}

a:link {color:#ffffff;}      /* unvisited link */
a:visited {color:#ffffff;}  /* visited link */
a:hover {color:#808080;}  /* mouse over link */
a:active {color:#ffffff;}  /* selected link */

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:none;}
a:active {text-decoration:none;}

#logo {
    margin: 0;
    width: 1000px;
    z-index: 26;
}

.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */
}

#header {
    width: 1000px;
    height: 175;
    position: absolute;
    top: 0;
    left: 0;
    padding-left:70px;
}

#banner {
            position: absolute;
            top: 0px;
            left: 0px;
            right: 0px;
            width: 100%;
            height: 419px;
            z-index: -1;
        }

#navigationtable {
    position:absolute;
    padding-left:730px;
    z-index: 10;
    padding-top:20px;
}

HTML 

<body>

<div id="wrapper" class="hfeed">

   <img id="banner" src="http://sunporchhomes.com/spmain1.png" alt="Banner Image"/>

       <div id="navigationtable">
<table class="tg" width="400">
  <tr>
    <th class="tg-lhfu"><a href="http://sunporchomes.com">HOME</a></th>
    <th class="tg-031e"></th>
    <th class="tg-031e"><a href="http://sunporchhomes.com/warranty.html">WARRANTY</a></th>
    <th class="tg-031e"></th>
  </tr>
 <tr>
    <th class="tg-lhfu"><a href="http://sunporchhomes.com/features-3.html">FEATURES</a></th>
    <th class="tg-031e"></th>
    <th class="tg-031e"><a href="http://sunporchhomes.com/faq-2.html">ROWHOME FAQ</a></th>
    <th class="tg-031e"></th>
  </tr>
 <tr>
    <th class="tg-lhfu"><a href="http://sunporchhomes.com/floor-plan-2.html">FLOORPLAN</th>
    <th class="tg-031e"></th>
    <th class="tg-031e"><a href="http://sunporchhomes.com/about.html">ABOUT US</a></th>
    <th class="tg-031e"></th>
  </tr>
 <tr>
    <th class="tg-lhfu"><a href="http://sunporchhomes.com/neighbourhood.html">NEIGHBOURHOOD</a></th>
    <th class="tg-031e"></th>
    <th class="tg-031e"><a href="http://sunporchhomes.com/contact.html">CONTACT</a></th>
    <th class="tg-031e"></th>
  </tr>

</table>
</div>

 <div id="boxplus">
 <img src="http://sunporchhomes.com/boxplus.png" />
 </div>

 <div id="logo">   
    <img src="http://sunporchhomes.com/splogo13.png" /> 

    </div>
 </div>
Post Views: 1

Related posts

Leave a Reply

1 comment

  1. The issue you are experiencing is not your css, but rather is your WordPress admin bar.

    When you are logged into WordPress, it attempts to “forcefully” draw an admin bar across the top 32 pixels of your browser window.

    When your css conflicts with how WP tries to do this (which your css I believe does, due to your heavy use of position: absolute), you can be left with a blank space at the top rather than the admin bar.

    You can disable the admin bar by editing your user profile, and unchecking “Show Toolbar when viewing site”

    I’ve tested in Firefox, Chrome, and Internet Explorer – they all render your site properly, without the space you described.