DIV height and overflow

I am trying to create an filled rectangle using the div tag that is 5
pixels high. It appears to be taller than 5 pixels unless I use the
OVERFLOW: HIDDEN attribute.

Since the DIV is empty, why do I need the overflow attribute?

HTML to follow shows two divs that are identical except for the
overflow attribute. The one with the overflow attribute appears the
way I expect, but the other one does not.

Can someone please explain in detail if the overflow is necessary and
why, or how to achieve the same result without overflow?

Thanks in advance,

Randy

<style type="text/css">
<!--
div.tooTall{
left: 10; width: 300px; position: relative; top: 40px; height: 5px;
border: 1px solid #000; background: blue;
}

div.justRight{
left: 10; width: 300px; position: relative; top: 140px; height: 5px;
border: 1px solid #000; background: red;
overflow:hidden;
}

-->
</style>

<div class="tooTall">
</div>
<div class="justRight"></div>

On 2008-05-06, Randall <weber.randy (AT) gmail (DOT) com> wrote:

I am trying to create an filled rectangle using the div tag that is 5
pixels high. It appears to be taller than 5 pixels unless I use the
OVERFLOW: HIDDEN attribute.

Since the DIV is empty, why do I need the overflow attribute?

HTML to follow shows two divs that are identical except for the
overflow attribute. The one with the overflow attribute appears the
way I expect, but the other one does not.

Can someone please explain in detail if the overflow is necessary and
why, or how to achieve the same result without overflow?

It shouldn't be necessary. They should both be 5px high, and they seem
to be in Firefox.

What browser are you testing in?

Thanks in advance,

Randy

style type="text/css"
!--
div.tooTall{
left: 10; width: 300px; position: relative; top: 40px; height: 5px;
border: 1px solid #000; background: blue;
}

Should be left: 10px not 10 (although this doesn't solve your problem).

On May 6, 11:06*am, Ben C <spams... (AT) spam (DOT) eggs> wrote:

On 2008-05-06, Randall <weber.ra... (AT) gmail (DOT) com> wrote:

I am trying to create an filled rectangle using thedivtag that is 5
pixels high. It appears to be taller than 5 pixels unless I use the
OVERFLOW: HIDDEN attribute.

Since theDIVis empty, why do I need the overflow attribute?

HTML to follow shows two divs that are identical except for the
overflowattribute. The one with theoverflowattribute appears the
way I expect, but the other one does not.

Can someone please explain in detail if theoverflowis necessary and
why, or how to achieve the same result withoutoverflow?

It shouldn't be necessary. They should both be 5px high, and they seem
to be in Firefox.

What browser are you testing in?

Thanks in advance,

Randy

style type="text/css"
!--
div.tooTall{
left: 10; width: 300px; position: relative; top: 40px; height: 5px;
border: 1px solid #000; background: blue;
}

Should be left: 10px not 10 (although this doesn't solve your problem).

Good point. I've been testing in IE7 and Firefox 2, but forgot to
check this piece in Firefox. Firefox works well as you pointed out.
Any ideas for making it work in IE other than NOT using IE.

Randy