Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 447
  • Last Modified:

gap in sliced image between header and content area

Please look at the following link:

http://www.markstewart-architect.co.uk/dev/home.html

The picture of st Pauls is a sliced image. The bottom part is a background image to the content area and the top part with the client's name is an image. When I look at it in my browser, there is a gap between the two parts of the sliced image (a small white gap towards the top of the spire). Can anyone tell me why and how to fix. Thanks.
0
mattybrown
Asked:
mattybrown
  • 2
  • 2
1 Solution
 
Tom BeckCommented:
I would avoid the slicing and just put the title in a div that is 400px wide and inside the contentWrapper rather than outside. This avoids any misalignment of sliced images.

Here's my test code using inline styles which you can easily incorporate into your css definitions.

<div id="outerWrapper">
  <div id="contentWrapper" style="position:relative;">  
  <div id="header" style="width:400px;height:66px;position:relative;top:0;left:0"><img src="images/mark-stewart.jpg" alt="" style="border:0;width:400px;height:66px"></div>
    <div id="content">
      <ul id="MenuBar1" class="MenuBarVertical">
        <li><a href="building-repairs.html">Repairs</a> </li>
        <li><a tabindex="-1" href="#">Adaptations</a></li>
        <li><a tabindex="-1" href="#">New buildings</a></li>
        <li><a tabindex="-1" href="#">Planning</a> </li>
        <li><a tabindex="-1" href="#">Grants</a></li>
        <li><a tabindex="-1" href="#">News</a></li>
        <li><a tabindex="-1" href="#">The practice</a> </li>
        <li><a tabindex="-1" href="#">Contact</a></li>
      </ul>
      <h1>&nbsp;</h1>
    </div>
  </div>
  <div id="footer">© Mark Stewart 2011 | www.markstewart-architect.com</div>
</div><!--end of Outerwrapper -->
0
 
user_nCommented:
One of the problems is in
body {
    color: #666666;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 14px;
    line-height: 20px;
}

line-height:20px; style.css line 13. If you remove it the gap will stay but it will be smaller.
0
 
user_nCommented:
In fact it is the problem
And you can add line-height: 20px; here
ul.MenuBarVertical {
    cursor: default;
    font-size: 100%;
    line-height: 20px;
    list-style-type: none;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    width: 10em;
0
 
mattybrownAuthor Commented:
This solution worked perfectly.

Thank you for your advice.
0
 
Tom BeckCommented:
You're welcome, thanks for the points.
0

Featured Post

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!

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