Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

gap in sliced image between header and content area

Posted on 2011-09-24
5
Medium Priority
?
445 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 2000 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

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

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

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
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…
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…

705 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