By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,025 Members | 2,118 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,025 IT Pros & Developers. It's quick & easy.

DIV height and overflow

P: n/a
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>
Jun 27 '08 #1
Share this Question
Share on Google+
2 Replies


P: n/a
On 2008-05-06, Randall <we*********@gmail.comwrote:
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).
Jun 27 '08 #2

P: n/a
On May 6, 11:06*am, Ben C <spams...@spam.eggswrote:
On 2008-05-06, Randall <weber.ra...@gmail.comwrote:
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

Jun 27 '08 #3

This discussion thread is closed

Replies have been disabled for this discussion.