Solved

gap in sliced image between header and content area

Posted on 2011-09-24
5
440 Views
Last Modified: 2013-11-19
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
Comment
Question by:mattybrown
  • 2
  • 2
5 Comments
 
LVL 38

Accepted Solution

by:
Tom Beck earned 500 total points
ID: 36592723
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
 
LVL 9

Expert Comment

by:user_n
ID: 36592893
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
 
LVL 9

Expert Comment

by:user_n
ID: 36592913
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
 

Author Closing Comment

by:mattybrown
ID: 36593392
This solution worked perfectly.

Thank you for your advice.
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 36593408
You're welcome, thanks for the points.
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
It’s easy to embed any of your public Prezi presentations on your website or social network to share with others. Learn how simple it is in this tutorial.
Illustrator's Shape Builder tool will let you combine shapes visually and interactively. This video shows the Mac version, but the tool works the same way in Windows. To follow along with this video, you can draw your own shapes or download the file…

749 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