Blue 'overflow'

Hi objects,

The famous objects!! =)
I know you have background color there, probably for the text, but you also have a margin-bottom: 15px.  If you remove the bottom margin does that fix the problem?

Joe P

Actually looking at it farther with the DOM inspector it looks like that is the last <li> element.  The background color is transparent and maybe that is showing the background-color set by the <div> it is currently in.  You could try background-color: #FFFFFF;
I'm off to bed!

Joe P

changing the margin does help :(
I need the background colour for the menu.

thanks for having a look

Yah, just read that last comment about the img height and the ul height
Joe P

Thanks for pointing out that the image was inside the list, it wasn't meant to be there :)
Have corrected that, but unfortunately isn't hasn't fixed the problem at hand :(

Objects,

I am getting fairly confused here.

When I surround your img with a div with a solid background color, the blue overflow colors to that colour:

<div style="background:green;"><img src="objects_bestanden/menu-bottom.jpg" height="60" width="120" style="border:solid 1px red;"/></div>

But nowhere in your code I can find margins or paddings defined for your img tag. Could there be some javascript involved in this as far as you can tell?

-r-

theres js to populate the menu, but the problem exists without the js. I might just remove the js now to simplify things.

A workaround might be to assign a padding bottom to the menu div, and position the image absolute with bottom:0;left:0;. But that doesn't solve this issue in the future.

-r-

stripped down now.

I also changed the background-color property of the menu div to confirm thats where the strip is coming from.

Fixed it!!!  That was a tough one, but I finally figured out it's because the <img> element is inline.  Add this:

#menu img { display:block; xborder: 2px solid #ff00ff; }

By the way, you don't have an id="menulist" in the source, so all of your #menulist rules do nothing.

Roonaan,

Excellent :) that fixes it, what does changing it to block display do exactly?

Actually, I don't have a clue. :(
I was messing around with your code, and noticed that display:block removed the additional padding. It might have been that the image as inline element was of less height than a default line, but as I also tested changing the line-height, something else is also triggered by the display block.

-r-

Thanks, hope u don't mind me giving some points to BogoJoker for pointing out my unclosed list.

=)!
I thought display block actually puts a <br> above and below the blocked group.
For instance a <p> paragraph, just by putting <p> starts a new line, and ending with a </p> also means any text that comes after it will be a new line of its own.
For instance this html:
Joe P<p>is</p>BogoJoker
Displays on three lines.  But if you do:
Joe P<p style="display: inline;">is</p>BogoJoker
Then it appears on a single line.

I don't understand how putting display block actually fixed the problem by putting more space above and below, but I guess that kept the background color of that section a little above and below. =)

The <p> has an additional margin to it, whereas a default element with display:block just acts like a <div>, linebreak before and after, but no spacing.

-r-

Well it does have an addition margin, but even with that margin removed, like we both said there will be that linebreak before and after.