help! div height problem code, netscape/mozilla

[geod]

Here's the code in question. Even as the only div in a page, mozilla e
al will render this as 100%. I tried removing the background image
removing padding, doing ANYTHING -- even hard-coding the height in th
HTML page itself. Nothing works. Help!
#right {
position : absolute;
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 11px;
line-height : 16px;
background-color : #fffaec;
background-image : url(images/logonew.jpg);
background-repeat : no-repeat;
background-position : 5px 20px;
left : 665px;
top : 15px;
width : 200px;
height : 516px;
text-align : justify;
padding : 100px 15px;
border-style : solid;
border-left-width : 10px;
border-left-color : #cabe8e;
border-top-width : 10px;
border-top-color : #cabe8e;
border-right-width : 10px;
border-right-color : #cabe8e;
border-bottom-width : 10px;
border-bottom-color : #cabe8e;
float : left;
display : inline;

-
geo
-----------------------------------------------------------------------
Posted via http://www.forum4designers.co
-----------------------------------------------------------------------
View this thread: http://www.forum4designers.com/message82548.htm

[Steve Pugh]

Re: help! div height problem code, netscape/mozilla

geod <geod.17er4x@ma il.forum4design ers.com> wrote:
[color=blue]
>Here's the code in question. Even as the only div in a page, mozilla et
>al will render this as 100%.[/color]

What screen resolution have you viewed it at? That div needs 751
pixels to be displayed so at anything that doesn't give you at least
that much vertical space it's going to appear to be 100% high.
[color=blue]
>#right {
>position : absolute;
>font-family : Verdana, Arial, Helvetica, sans-serif;
>font-size : 11px;
>line-height : 16px;[/color]

Don't specify font-size in pixels and really don't specify line-height
in pixels. Also try to avoid Verdana. Google this group for the
hundreds of previous discussions on why.
[color=blue]
>left : 665px;
>top : 15px;
>width : 200px;
>height : 516px;
>padding : 100px 15px;[/color]

So you have a block that's 526px tall, plus 100px padding top and
bottom, plus 10px borders top and bottom (from below) plus it's
positioned 15px down from the containing block. That's
516 + 100 + 100 + 10 + 10 + 15 = 751px. So no one using 1024x768 or
less is likely to be able to fit the whole thing into their browser
window.

Internet Explorer gets this wrong (always in IE5.x, if your doctype
trigger Quirks mode in IE6) and includes the padding and border inside
the width so the box only needs 516 + 15 = 531 pixels to be fully
seen.
[color=blue]
>border-style : solid;
>border-left-width : 10px;
>border-left-color : #cabe8e;
>border-top-width : 10px;
>border-top-color : #cabe8e;
>border-right-width : 10px;
>border-right-color : #cabe8e;
>border-bottom-width : 10px;
>border-bottom-color : #cabe8e;[/color]

You do realise that this could be shortened to
border: 10px solid #cabe8e;
[color=blue]
>float : left;
>display : inline;[/color]

What's the point of these? Absolutely positioned elements can not be
floated are automatically display: block; so these rules will be
ignored.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve@pugh.net > <http://steve.pugh.net/>