Improve company productivity with a Business Account.Sign Up

x
?
Solved

gap in sliced image between header and content area

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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

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

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

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?
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
It is a freely distributed piece of software for such tasks as photo retouching, image composition and image authoring. It works on many operating systems, in many languages.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

608 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