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;

(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
(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>

You should probably make the lines above and below the links a colored DIV and not an image, that would prevent you from having to load images when it's just a solid color anyhow. — leigero, Mar 01 '15 at 20:34
sounds like you need a css reset/normalize to remove those default spaces that the browser adds — RGLSV, Mar 01 '15 at 20:39
That way of designing a website (tables for layout, deprecated elements for styling instead of CSS) is as _jurassic_ as the content the site promotes … — CBroe, Mar 01 '15 at 20:48
haha I figured my html would be quite jurassic. The amount of change I've come across is a little overwhelming. A majority of commands are no longer supported and I'm having to juggle all the new ones. — Damian, Mar 01 '15 at 22:30

score 0 · Answer 1 · answered Mar 01 '15 at 20:54

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.

score 0 · Answer 2 · edited May 23 '17 at 12:06

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/

Thank you very much! Some of this was quite new to me but I'm pretty sure I understand how most of what you added works :) I'm going to use the CSS border method, try and update my design techniques. I'll get the basic site up and then continue to learn and update the rest, such as the tables issue. Thanks again — Damian, Mar 01 '15 at 22:43
Quick question. I was forced to remove a tiny bit of the css code you'd added, the ul padding part, as it forces my second list (a drop down) to change position outside of the table etc. However I am unable to position this second list at the top? I created a second div id for it, vertically aligned it to the top etc... no luck? — Damian, Mar 02 '15 at 20:17
ul padding - the reason that the "ul" padding affacted your side dropdown is because it's affecting all the "ul" on the websites when using it as a "ul", make it ".categories_wrap ul" instead so it will affact only the "ul" elements that are children of ".categories_wrap" ("ul" elements in the top menu). sub menu - every new level in the drop down menu needs to be a "ul" element (inside "li" parent), take a look at this example: http://stackoverflow.com/questions/28221429/how-can-i-make-the-sub-menu-in-fusion-mega-menu-only-show-on-hover/28236270#28236270 — Eran.E, Mar 02 '15 at 23:21
Ok, I think I understand. However removing the ul padding and ul li parts of the css didn't effect the top list (as both those settings were already present) and fixed the side list. However I'm still unable to set the side list to the top of the td, no matter what code I add? — Damian, Mar 04 '15 at 13:47

Unwanted space above img and below li html css

2 Answers2