• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 350
  • Last Modified:

Why is my header reigion being pushed down

My header area/div with the banner is being pushed down about 10 pixels in this website .....  cocktailcornerband.com

When I created the layout with CSS I placed the header div at the beginning of wrapper div and it was correctly placed at the very top of the wrapper. However, somewhere in the design process this error occurred. I cannot see how this is happening.

All pages are produced from a template. I have enclosed the code for the template and 3 css files
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<link href="../_css/main_layout.css" rel="stylesheet" type="text/css" media="screen, projection" />
<!--[if IE 5]>
<style type="text/css"> 
/* place css box model fixes for IE 5* in this conditional comment */
.twoColFixLtHdr #sidebar1 { width: 230px; }
</style>
<![endif]-->
<!--[if IE]>
<style type="text/css"> 
/* place css fixes for all versions of IE in this conditional comment */
.twoColFixLtHdr #sidebar1 { padding-top: 30px; }
.twoColFixLtHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->
<script type="text/javascript" src="../p7mbm/p7MBscripts.js"></script>
<link href="../p7mbm/p7MBM01v.css" rel="stylesheet" type="text/css" media="all" />
<link href="../_css/Styles.css" rel="stylesheet" type="text/css" /></head>
<body>
<div class="p7MBfirst" id="wrapper">
  <div id="header">
    <p><img src="../clipart/cocktail.gif" width="940" height="88" /></p>
  </div>
  <div id="mainBody"><!-- TemplateBeginEditable name="EditRegion1" -->
    <h2>HEADING</h2>
    <p>Text information space</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
  <!-- TemplateEndEditable --></div>
  <p class="yellowTextCentIndent">Last Update:<br />
    1st October 2011
  </p>
  <div id="sidebar">
    <div id="p7MBM_1" class="p7MBM01v">
      <ul>
        <li><a href="../index.html">HOME PAGE</a></li>
        <li><a href="../docs/gallery.html">GALLERY</a></li>
        <li><a href="../docs/setlist1.html">SETLIST 1</a></li>
        <li><a href="../docs/setlist2.html">SETLIST 2</a></li>
        <li><a href="../docs/videos.html">VIDEO</a></li>
        <li><a href="../docs/packages.html">PACKAGES</a></li>
        <li><a href="../docs/contact.html">CONTACT</a></li>
        <li><a href="../docs/links.html">LINKS</a></li>
      </ul>
      <!--[if lte IE 6]>
<style>.p7MBM01v li, .p7MBM01v li a {height: 1%;}</style>
<![endif]-->
      <script type="text/javascript">
<!--
P7_MBop('p7MBM_1',1,0,0,0,-300,0,300,200,1,1);
//-->
      </script>
    </div>
    <p><img src="../pics/groupt_humb.jpg" width="130" height="80" /></p>
</div>
  <div id="footer"><a href="../index.html" class="justYellow">GO TO HOME PAGE</a>&nbsp;&nbsp; |&nbsp; &nbsp;&copy; Corner Cocktail Band 2011</div>
</div>
</body>
</html>

Open in new window

main-layout.css
Styles.css
p7MBM01v.css
0
Eirman
Asked:
Eirman
2 Solutions
 
jtwcsCommented:
There is a <p> tag wrapped around the image in the header.  If you remove it, the space will go away.

<div id="header">
    <p><img src="../clipart/cocktail.gif" width="940" height="88" /></p>
 </div>
0
 
Andrew DerseIT ManagerCommented:
Change main-layout.css line 20:

from:

margin: 0;

to:

margin-top: -15px;

Also, I would check into Firebug if I were you.  It's a plugin for Mozilla Firefox that allows you to modify css code directly in the browser so you can see that changes you need to make...
0
 
Andrew DerseIT ManagerCommented:
jtwcs's comment works as well...remove the <p> tag...why is it there?
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LZ1Commented:
Inside your header, you have your image, which is wrapped inside a <p> tag.  Eliminate the <p> tags and see if that helps.
<div id="header">
    <img src="../clipart/cocktail.gif" width="940" height="88" />
  </div>

Open in new window

0
 
EirmanAuthor Commented:
Thanks jtwcs .... that worked perfectly!

I'll give you your 2000 points after midnight which will be a good start to your October quota.
0
 
EirmanAuthor Commented:
Wow ... I didn't expect more comments and another solution!

Will assign points after midnight
0
 
EirmanAuthor Commented:
Many To Thanks Everyone
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now