jkeebler
asked on
Percent height of a DIV with an image inside, Mozilla/Netscape issue
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
<?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
html { width: 100%; height: 100%; margin: 0; padding: 0; } might do the job.
ASKER
Didn't seem to do anything. Thanks for the attempt, dorward.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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.
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.
ASKER
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("t
}
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
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("t
}
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
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.c
Cd&
For IE use document.body.clientHeight
IE in strict mode (caused by the doctype) will not work with either, it will require:
document.documentElement.c
Cd&
Why are you using XHTML anyway?
<script>
<!--
This is actually commented out if you are using XHTML!
-->
</script>
http://hixie.ch/advocacy/xhtml
<script>
<!--
This is actually commented out if you are using XHTML!
-->
</script>
http://hixie.ch/advocacy/xhtml
ASKER
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.
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.
J, It's a long shot i know, but have you tried WINE?