467,910 Members | 1,745 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 467,910 developers. It's quick & easy.

help! div height problem code, netscape/mozilla

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

Jul 20 '05 #1
  • viewed: 4347
Share:
1 Reply
geod <ge*********@mail.forum4designers.com> wrote:
Here's the code in question. Even as the only div in a page, mozilla et
al will render this as 100%.
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.
#right {
position : absolute;
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 11px;
line-height : 16px;
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.
left : 665px;
top : 15px;
width : 200px;
height : 516px;
padding : 100px 15px;
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.
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;
You do realise that this could be shortened to
border: 10px solid #cabe8e;
float : left;
display : inline;


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 <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

9 posts views Thread by Tom | last post: by
4 posts views Thread by Sarir Khamsi | last post: by
2 posts views Thread by Sudheer Kareem | last post: by
6 posts views Thread by wukexin | last post: by
reply views Thread by tbatwork828 | last post: by
3 posts views Thread by Colin J. Williams | last post: by
2 posts views Thread by BT Openworld | last post: by
8 posts views Thread by Mark | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.