Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Making a layer height: 100% minus 330px in IE 1

Status
Not open for further replies.
krigbert

krigbert

Programmer
Jun 2, 2005
95
NO
I want the layer "scene" to be streched from top:80px to bottom:250px. With firefox, this code takes care of that, no problem:

Code: 
#scene {
	top: 80px;
	bottom: 250px;
	width: 100%;
	left: 0px;
	position: absolute;
}

IE, of course, doesn't have a clue, and simply places the, thick-like-a-line-of-text layer 80px from the top. I've tried different kinds of JavaScript sollutions, but they don't seem to do anything. How can I make IE understand me?
 
Sort by date Sort by votes
My doctype is HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional

I'm not all that hot on doctypes, but shouldn't that be good enough?
 
Upvote 0 Downvote
Well, I meant

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]

Of course, just didn't think it necessary to post the whole thing. Sorry about that.
 
Upvote 0 Downvote
Tried strict mode, tried without doctype, tried with 2.0 DTD, I think I can safely say that it's not the doctype :l

Seems to me that JavaScript is the only solution, but IE doesn't seem to want to tell the height of the document.
 
Upvote 0 Downvote
Interesting...

Hmm... Looked at what I was using and found I do have a special height declaration for IE only.
Try this css declaration - make sure that it is read by IE only:
Code: 
height:expression(document.body.clientHeight-parseInt(this.currentStyle.top,10)-parseInt(this.currentStyle.bottom,10)+'px');

That should set the height to match the correct height using the top/bottom that you already set.
 
Upvote 0 Downvote
Well, just pasting that in to a style declaration in the div tag didn't work. Could it be because everything else is in an external style sheet? Here's how the div tag is right now:

Code: 
<div id="scene" style="height:expression(document.body.clientHeight-parseInt(this.currentStyle.top,10)-parseInt(this.currentStyle.bottom,10)+'px');"></div>

Here's what's in the external style sheet:

Code: 
#scene {
	z-index: 1;
	top: 100px;
	bottom: 250px;
	width: 100%;
	left: 0px;
	position: absolute;
	background-image: url(baggrunn.png);
}

Also, I have a tingling that even if it were to work in IE6, I don't suppose expression is supported in anything below that :\
 
Upvote 0 Downvote
Hmmm... I don't know about pasting that in the div tag.

Take a look at my website:
I use two stylesheets, one for standards and one for IE, this code is used in the ie.css file. Maybe taking a look at it will help you out.
 
Upvote 0 Downvote
Hm, it's strange, I'm trying to implement it, but I think there's something I don't understand. Let's try do do this minimally. The way I've understood this, this should work:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]
<html lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
	<title>test</title>

<!--[if IE}>
<style type="text/css">
#scene {
  height:expression(document.body.clientHeight-parseInt(this.currentStyle.top,10)-parseInt(this.currentStyle.bottom,10)+'px');
  overflow-x:hidden;
}
</style>
<endif-->

</head>
<body>
<div id="scene" style="top:30px; bottom:40px; background-color:#990000; width:100%; position:absolute;"></div>
</body>
</html>

Of course, it doesn't. So what's done wrong?
 
Upvote 0 Downvote
It's possible that by setting the style in the div tag you're overriding the height:expression.

Try moving the styles that are in the style tag to above the IE only style declaration. This way the top and bottom are set, before the expression runs.
 
Upvote 0 Downvote
That does make sense, sadly, IE doesn't care about sense.

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]
<html lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
	<title>test</title>
<style type="text/css">
#scene {
	top:30px; 
	bottom:40px; 
	background-color:#990000; 
	width:100%; 
	position:absolute;"
}
</style>

<!--[if IE}>
<style type="text/css">
#scene {
  height:expression(document.body.clientHeight-parseInt(this.currentStyle.top,10)-parseInt(this.currentStyle.bottom,10)+'px');
  overflow-x:hidden;
}
</style>
<endif-->

</head>
<body>
<div id="scene"></div>
</body>
</html>

And it's still the same. Strange... I can't see any real differences between how you've done it (and that works!) and how I've done it above, except that you use external css files.
 
Upvote 0 Downvote
Your code (as posted here) has numerous little typos that will prevent it from running as desired. Also, you need not enclose the style within IE if tags, since expressions are only supported in IE and will be gingerly ignored by other browsers. Try this:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <title>test</title>
<style type="text/css">
#scene {
    top: 30px; 
    bottom: 40px; 
    background-color: #990000; 
    width: 100%; 
    position: absolute;
    height: expression(document.body.clientHeight-parseInt(this.currentStyle.top,10)-parseInt(this.currentStyle.bottom,10)+'px');
    overflow-x: hidden;
}
</style>
</head>
<body>
<div id="scene"></div>
</body>
</html>
 
Upvote 0 Downvote
Try this (worked for me):
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <title>test</title>
    <style type="text/css">
    html {
 overflow:hidden;
}
body {
 margin:0;
 padding:0;
 background:#FFF;
 height:100%;
}
#scene {
 position: absolute;
 top: 25px;
 bottom: 50px;
 width: 100%;
 background: #000;
 color: #15C5FF;
 overflow: auto;
}
    </style>
	<!--[if IE]>
	<style type="text/css">
	#scene {
  height:expression(document.body.clientHeight-parseInt(this.currentStyle.top,10)-parseInt(this.currentStyle.bottom,10)+'px');
  overflow-x:hidden;
}

	</style>
	<![endif]-->
</head>
<body>
<div id="scene">here</div>
</body>
</html>
It's possible you needed to set the html, body tag styles.
 
Upvote 0 Downvote
Just tried moving the height:expression out of the IE section (and removing the section) - and it does still seem to work.

Thanks for pointing that out Vragabond - althought I tested that example of yours and it didn't seem to work.
 
Upvote 0 Downvote
Heaps of thanks, Borvik, I'd almost given up hope there :D

it now works perfectly.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
814
spamjim
spamjim
scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
767
3esolar
3
Alt255
  • Locked
  • Question
Searching for a string that contains brackets
Replies
0
Views
229
Alt255
Alt255
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
1K
Chris Miller
Chris Miller
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
1K
Mike Lewis
Mike Lewis

Part and Inventory Search

Sponsor

Back
Top