Unwanted space above img and below li html css

Question

I've noticed a white space above an image and it unfortunately throws off the neatness of the design. I'm not sure why its there, I've reduced image size and even removed tables, nothing fixes it. It almost appears affixed to the bottom of the td, but then it also has the space without a table. So I'm not sure what the issue is.

Second issue is a thick white space below my list and a smaller one above it. I have no margin or padding to the list, I have removed and increased padding to the font but it makes no difference.

Here are two examples;

1. (Plain examples with no tables, infact nothing but the basic code, problem is still apparent. Green lines are not uniform to the list (I'd like a small white space above and below, just a few pixels, not like this.) http://www.dinodeals.co.uk/test.html
2. (Here I have added a border to the table that will be present on the main design, purely to help highlight the issue. The spaces are far more apparent now. http://www.dinodeals.co.uk/fossils.html

So any ideas how to get the lines into the middle of the to allow an even white space above/below it. And how to remove all white space on the list?

Code is below:

h1 {font-size: 30px;} 
h2 {font-size: 20px;}
p {font-size: 14px;}

A.class1 {text-decoration: none; text-transform: uppercase; font-weight: bold; text-align: center; font-size: 30px; padding: 6px;}
A.class1:link, A.class1:visited {color: #FFFFFF; background-color: #0fa616;}
A.class1:hover, A.class1:active {color: #0fa616; background-color: #ffffff;}

A.class2 {text-decoration: none; text-transform: uppercase; font-weight: bold; text-align: left; font-size: 16px;}
A.class2:link, A.class2:visited {color: #0fa616;}
A.class2:hover, A.class2:active {color: #0fa616;}

#sub li {list-style-type: square;}

#categories li {list-style-type: none; margin: 0; padding: 0; overflow: hidden; display: inline;}`

I've removed the basic parts, like the html, body, doctype tags etc

<table border="1" bordercolor="#000000" cellspacing="5" cellpadding="0" width="1240">

<tr><td colspan="2"><center><img src="http://www.dinodeals.co.uk/images/logo2.jpg"></center></td></tr>

<tr><td colspan="2">
<img src="/images/line.jpg" width="100%"></td></tr>


<tr><td colspan="2"><center>
<img src="/images/line.jpg" width="100%"><br>
<ul id="categories">
<li><a href="/index.html" class="class1">Home</a></li>
<li><a href="/crystals.html" class="class1">Crystals</a></li>
<li><a href="/meteorites.html" class="class1">Meteorites</a></li>
<li><a href="/faq.html" class="class1">FAQ</a></li>
<li><a href="/encylopedia.html" class="class1">Encyclopedia</a></li>
<li><a href="/contact.html" class="class1">Contact</a></li>
</ul><br>
<img src="/images/line.jpg" width="100%"></center></td></tr>

<tr><td colspan="2">
<img src="/images/line.jpg" width="100%"></td></tr></table></body>

Answer 1

It looks like you issue is slight error in the HTML. This isn't a CSS issue and trying to fix it in CSS will drive you crazy.

Your HTML:

<div class="green-line"></div>
<ul id="categories">
    <li><a href="/index.html" class="class1">Home</a></li>
    <li><a href="/crystals.html" class="class1">Crystals</a></li>
    <li><a href="/meteorites.html" class="class1">Meteorites</a></li>
    <li><a href="/faq.html" class="class1">FAQ</a></li>
    <li><a href="/encylopedia.html" class="class1">Encyclopedia</a></li>
    <li><a href="/contact.html" class="class1">Contact</a></li>
<!-- NOTICE THE LINE BREAK -->
</ul><br>
<div class="green-line"></div>

You'll notice that just after your closing </ul> tag you placed an unnecessary line break, which prints a blank line to the screen. This blank line is the line you're seeing that you don't want I believe.

I took the liberty of making this into a JSFiddle and you can see that making the bars out of a <div> is probably the better way to go for loading and styling purposes.

Answer 2

i want to give you some guide line tips that will help you build your website better.

*generally, i don't recommend you to use images for borders design, every image you use for your website = more image to load for the client, the purpose is to set the page load time down as much as you can, even if there are returning clients who will use cache for faster loading, there are always new ones. use css borders.

if you want to use images anyway, images are set to display: inline; on default, set the "border images" to display: block;

*tables are not recommended for layout design either, if you want to learn about it, there is a lot of sources, here is one: Why not use tables for layout in HTML?

*use margin instead of <br /> tag to make some layout space - for example, let's say tomorrow you will want to change all the vertical space between the layout divs, you will need to search all over the website and add / remove <br /> tags, it's a lot of work and it will make you code more dirty, with CSS, if you are doing it right, you can do it with one simple action, change margin value.

example with border images:

HTML:

<div id="categories_wrap">
    <img src="http://www.dinodeals.co.uk/images/line.jpg" width="100%" />
    <ul id="categories">
        <li><a href="/index.html" class="class1">Home</a></li>
        <li><a href="/crystals.html" class="class1">Crystals</a></li>
        <li><a href="/meteorites.html" class="class1">Meteorites</a></li>
        <li><a href="/faq.html" class="class1">FAQ</a></li>
        <li><a href="/encylopedia.html" class="class1">Encyclopedia</a></li>
        <li><a href="/contact.html" class="class1">Contact</a></li>
    </ul>
    <img src="http://www.dinodeals.co.uk/images/line.jpg" width="100%" />
</div>

CSS:

#categories_wrap
{
    text-align: center;
}

#categories_wrap img
{
    display: block;
}  

Live: http://jsfiddle.net/5zzwxsbb/

example with css borders:

HTML:

<div id="categories_wrap">
    <ul id="categories">
        <li><a href="/index.html" class="class1">Home</a></li>
        <li><a href="/crystals.html" class="class1">Crystals</a></li>
        <li><a href="/meteorites.html" class="class1">Meteorites</a></li>
        <li><a href="/faq.html" class="class1">FAQ</a></li>
        <li><a href="/encylopedia.html" class="class1">Encyclopedia</a></li>
        <li><a href="/contact.html" class="class1">Contact</a></li>
    </ul>
</div> 

CSS:

#categories_wrap
{
    text-align: center;
    border-top: 3px solid #0fa616;
    border-bottom: 3px solid #0fa616;
}

Live: http://jsfiddle.net/5zzwxsbb/1/