Solved

gap in sliced image between header and content area

Posted on 2011-09-24
5
441 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying 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

Suggested Solutions

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Learn the basics of inputting and editing your text components in Prezi. We will cover how to set styles, position, and group your text components. In your Prezi editor, click anywhere on the canvas to add text: A flashing cursor informs you that yo…

734 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