?
Solved

Blue 'overflow'

Posted on 2006-04-13
18
Medium Priority
?
308 Views
Last Modified: 2012-05-05
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
0
Comment
Question by:objects
  • 6
  • 6
  • 5
  • +1
18 Comments
 
LVL 17

Expert Comment

by:BogoJoker
ID: 16451533
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
 
LVL 17

Expert Comment

by:BogoJoker
ID: 16451543
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
 
LVL 17

Assisted Solution

by:BogoJoker
BogoJoker earned 200 total points
ID: 16451571
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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 92

Author Comment

by:objects
ID: 16451572
changing the margin does help :(
I need the background colour for the menu.

thanks for having a look
0
 
LVL 17

Expert Comment

by:BogoJoker
ID: 16451575
Yah, just read that last comment about the img height and the ul height
Joe P
0
 
LVL 92

Author Comment

by:objects
ID: 16451616
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
 
LVL 49

Expert Comment

by:Roonaan
ID: 16451829
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
 
LVL 92

Author Comment

by:objects
ID: 16451836
theres js to populate the menu, but the problem exists without the js. I might just remove the js now to simplify things.
0
 
LVL 49

Expert Comment

by:Roonaan
ID: 16451851
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
 
LVL 92

Author Comment

by:objects
ID: 16451852
stripped down now.

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

Accepted Solution

by:
Roonaan earned 1800 total points
ID: 16451905
One thing that worked is to change the style of the footer image to have display:block;

#menu img {display:block;}

-r-
0
 
LVL 5

Expert Comment

by:tdterry
ID: 16453515
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
 
LVL 92

Author Comment

by:objects
ID: 16475753
Roonaan,

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

Expert Comment

by:Roonaan
ID: 16475849
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
 
LVL 92

Author Comment

by:objects
ID: 16476520
Thanks, hope u don't mind me giving some points to BogoJoker for pointing out my unclosed list.
0
 
LVL 17

Expert Comment

by:BogoJoker
ID: 16477642
=)!
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
 
LVL 49

Expert Comment

by:Roonaan
ID: 16477678
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
 
LVL 17

Expert Comment

by:BogoJoker
ID: 16477706
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

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Suggested Courses
Course of the Month13 days, 18 hours left to enroll

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question