Solved

Percent height of a DIV with an image inside, Mozilla/Netscape issue

Posted on 2004-03-26
11
407 Views
Last Modified: 2012-05-04
I'm trying to create a DIV with an image inside it that fills 70%x70% of the browser window and is scrollable.  Here's a dumbed down version of what I have so far:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/
DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body {
        margin: 0;
        padding: 0;
        height: 100%;
        width:100%
</style>
</head>
<body>
<div id="theimage" style="
        margin-left: auto;
        margin-right: auto;
        width: 70%;
        height: 70%;
        overflow: auto;
        border: 2px solid black;
">
<img src="bigimage.jpg">
</div>
</body>
</html>

Everything looks great in Internet Explorer but in Firefox/Mozilla/Netscape, the DIV's height always ends up being the same as the image itself.  If I set the height to a value in pixels then the image scrolls vertically just like it should.

Is there some hack to get this working in the non-IE browsers?

Thanks a lot,
J
0
Comment
Question by:jkeebler
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 2
  • 2
  • +1
11 Comments
 
LVL 17

Expert Comment

by:dorward
ID: 10694426
html { width: 100%; height: 100%; margin: 0; padding: 0; } might do the job.
0
 

Author Comment

by:jkeebler
ID: 10694878
Didn't seem to do anything.  Thanks for the attempt, dorward.
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 125 total points
ID: 10695298
Height on body, html, and even on documentElement are not valid or logical.  100% implies 100 % of content, but content and screen height are unrelated.  Mozilla based browser are doing the rendering correctly.  Ie is not because it is non-standard, and encourages bad coding that does not work in any other browser.

If what you want is 70% of screen height, then you have to set it dynamically at load time.
That means using Javascript.  Users with JavaScript disabled will see the fill height div.

<body onload="document.getElementById('theimage').style.height=self.screen.availHeight*.7">

or you can leave it the way it is and support IE only with it until a later orelease of IE does it to standanrd and breaks you pages, like IE6 broke a lot IE5.5 only "enhanced" page, and IE 5.5 broke IE 5 pages.

Cd&
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:jkeebler
ID: 10695387
Adding height: 100% to the body style was the only solution I found out there on Google.  I'll try that JS and get back to you.

Is this a more correct way to do what I want to do then?  I tried iframes but the browser resizes the content to fit the frame.

0
 

Author Comment

by:jkeebler
ID: 10695842
Thanks for the attempt.  I just had to change 4 things in your code to get it working:
1) it has to come after the DIV
2) instead of availHeight, I had to use innerHeight to get the window height, not the screen
3) it needed to explicitly say that the value we're setting is in pixels.  
4) had to call itself again when the browser is resized.

Here's what seems to work under Firefox and Konqueror browsers.  I haven't tested under IE yet.  I placed it just after the </div> tag.

<script>
<!--//
function resizeDiv() {
        document.getElementById("theimage").style.height = window.innerHeight*0.7 + "px";
}
window.onresize = resizeDiv;
resizeDiv();
//-->
</script>

Boy I hate all these issues with XHTML between the browsers.  I thought it was bag in HTML <4 but this is much worse.

Any
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 10696097
window.innerHeight won't work in IE.

For IE use document.body.clientHeight
IE in strict mode (caused by the doctype) will not work with either, it will require:

document.documentElement.clientHeight

Cd&
0
 
LVL 17

Expert Comment

by:dorward
ID: 10696148
Why are you using XHTML anyway?

<script>
<!--
This is actually commented out if you are using XHTML!
-->
</script>

http://hixie.ch/advocacy/xhtml
0
 

Author Comment

by:jkeebler
ID: 10696294
I'm trying to be all XHTML compliant, etc.   Who knows, someone may want to view my website on a PDA or something :-)

I'll add in that IE code COBOL.  Have any links to IE emulators for Linux so I don't have to switch to Window$ to test this?

Thanks.
0
 
LVL 10

Expert Comment

by:Havin_it
ID: 10703146
J, It's a long shot i know, but have you tried WINE?
0

Featured Post

Enroll in May's Course of the Month

May’s Course of the Month is now available! Experts Exchange’s Premium Members and Team Accounts have access to a complimentary course each month as part of their membership—an extra way to increase training and boost professional development.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Add a little space on either side of a table. 12 32
HTML question 2 33
Can't Find the Homepage on my site 4 46
center text in div with CSS3 2 30
Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this. Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it i…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

751 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question