Click here to get back home

DIV height and overflow

 HomeNewsGroups | Search | About
 comp.infosystems.www.authoring.html    Post an article   get this group's latest topics as an RSS feed add this group's latest topics to your My MSN content add this group's latest topics to your My Yahoo content
Subject Author Date
DIV height and overflow Randall 05-06-2008
Posted by Randall on May 6, 2008, 11:43 am
Please log in for more thread options
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>

Posted by Ben C on May 6, 2008, 12:06 pm
Please log in for more thread options
> 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).

Posted by Randall on May 7, 2008, 3:28 pm
Please log in for more thread options
>
> > 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=3D"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




Similar ThreadsPosted
overflow:auto (or scoll) and height:100% September 23, 2006, 8:03 pm
Overflow to the sides of a div October 17, 2005, 3:48 pm
overflow question July 21, 2006, 5:24 pm
Overflow Hidden not hiding in IE May 8, 2006, 11:44 am
Make textboxs height = the height of the cell it's in minus (n)px August 6, 2004, 6:37 am
Adjust height base on the the height of the browser window. October 20, 2006, 4:23 pm
Overflow: scroll scrollbar colors? November 19, 2005, 11:49 pm
aww, ciwah Regs only: overflow work April 5, 2008, 8:11 am
overflow:auto issue in XHTML standards mode October 11, 2006, 10:25 am
max height for tr? May 15, 2006, 1:48 pm

Our other projects:

Art Dolls, Fairies and Mermaids - Sunnyfaces.net

Roy's Linux, Programming and Search Engines messages

1-Script XML SitemapXML Sitemap