Solved

Why is my header reigion being pushed down

Posted on 2011-09-30
7
333 Views
Last Modified: 2012-05-12
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
Comment
Question by:Eirman
7 Comments
 
LVL 10

Accepted Solution

by:
jtwcs earned 370 total points
ID: 36891591
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
 
LVL 13

Assisted Solution

by:NUKIT
NUKIT earned 130 total points
ID: 36891605
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
 
LVL 13

Expert Comment

by:NUKIT
ID: 36891610
jtwcs's comment works as well...remove the <p> tag...why is it there?
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 30

Expert Comment

by:LZ1
ID: 36891642
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
 
LVL 23

Author Comment

by:Eirman
ID: 36891664
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
 
LVL 23

Author Comment

by:Eirman
ID: 36891672
Wow ... I didn't expect more comments and another solution!

Will assign points after midnight
0
 
LVL 23

Author Closing Comment

by:Eirman
ID: 36897379
Many To Thanks Everyone
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Basic CSS issues 6 20
How can I expand text with explaination 5 22
Hovering effect 9 30
Element alignment and word wrapping 9 28
This article is very specific and is only intended to help if you are installing Dreamweaver 8 in a Windows 7 environment with Office 2007 installed.   I'm not sure why Microsoft tends to release OS' that should not be released but they do.  Windows…
This article discusses four methods for overlaying images in a container on a web page
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now