Weird menu problem

I'm working on a website and a gap has appeared and I cannot figure out why or how to get rid of it. The gap only appeared after I put a horizontal menu in place of some normal text. I've tried adding padding:none & margin: none to both the ul & li tags but get the same results.

Here's a URL to my site, If anyone can help me I'd be very grateful.

Clicky

Edit: forgot to include the css file, here

try adding overflow: hidden;
to the ul div

Didn't help but thanks anyway!

your unordered list has padding or margin:

just add:

Code: Select all

<div id="menu">
    <ul style="padding:0px; margin:0px;">
        <li><a href="">home</a></li> 
        <li><a href="">portfolio</a></li>
        <li><a href="">about</a></li>
        <li><a href="">contact</a></li>
        <li><a href="">blog</a></li>
   </ul>
</div>
}

or put that style in your css document. Problem fixed! Somehow that is always the problem when you get "weird spacing"!

It was the margin, thank you. I swore I already tried that, it must have been the only tag I didn't set margin to 0 on xD

Thanks!

to find things like that out, get this addon for Firefox (if you don't have it yet):

Firebug: https://addons.mozilla.org/en-US/firefox/addon/1843

Thats how I say that one: I moused over the <ul> tag, and it showed me that little bit of padding! That is the best addon I have ever had, along with the Web Developer Toolbar!