Blue 'overflow'

Whats causing the horizontal blue strip at the bottom of the left hand menu, and how do I get rid of it?

http://www.objects.com.au:8088/service/webtemplate/index.html
LVL 92
objectsAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

BogoJokerCommented:
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
0
BogoJokerCommented:
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
0
BogoJokerCommented:
Although that may work, another thing I noticed is a height difference of 3 px.
<img src="images/menu-bottom.jpg" height="60" width="120"> <-- that is height 60.
But the <ul> that containst that <img> is height=63 in the DOM inspector
Setting the height to 60 would probably fix that line without background color changes.
<ul style="height: 60px"><img src="images/menu-bottom.jpg" height="60" width="120">

I think I was too hasty, so this will be the last time I comment otherwise I might embarass myself =)
Joe P
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

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

thanks for having a look
0
BogoJokerCommented:
Yah, just read that last comment about the img height and the ul height
Joe P
0
objectsAuthor Commented:
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 :(
0
RoonaanCommented:
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-
0
objectsAuthor Commented:
theres js to populate the menu, but the problem exists without the js. I might just remove the js now to simplify things.
0
RoonaanCommented:
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-
0
objectsAuthor Commented:
stripped down now.

I also changed the background-color property of the menu div to confirm thats where the strip is coming from.
0
RoonaanCommented:
One thing that worked is to change the style of the footer image to have display:block;

#menu img {display:block;}

-r-
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
tdterryCommented:
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.
0
objectsAuthor Commented:
Roonaan,

Excellent :) that fixes it, what does changing it to block display do exactly?
0
RoonaanCommented:
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-

0
objectsAuthor Commented:
Thanks, hope u don't mind me giving some points to BogoJoker for pointing out my unclosed list.
0
BogoJokerCommented:
=)!
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. =)
0
RoonaanCommented:
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-
0
BogoJokerCommented:
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.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

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.