/    Sign up×
Community /Pin to ProfileBookmark

IE no 100%

Copy linkTweet thisAlerts:
Mar 03.2007

Can someone explain to me why IE doesn’t make the red, emptydiv the full 100%? FF works fine.

[code=html]<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<title></title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
</head>
<body>
<div style=”position: relative”>
<ul>
<li>Fee</li>
<li>Fie</li>
<li>Foe</li>
<li>Fum</li>
</ul>
<div id=”emptydiv” style=”position: absolute; top: 0; right: 0; width: 5px; height: 100%; background-color: red”></div>
</div>
</body>
</html>[/code]

to post a comment
CSS

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@The_Old_SargeMar 03.2007 — I'm no expert, but don't you also need some sort of "repeat" for the background?
Copy linkTweet thisAlerts:
@FeelLikeANutauthorMar 03.2007 — It repeats by default.
Copy linkTweet thisAlerts:
@WebJoelMar 03.2007 — Because IE is stupid. You need to add something like:

body {min-height:100%; height:100%;

}

in your STYLE section.

Try this:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html><head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<meta http-equiv="Content-Style-Type" content="text/css" />

<meta http-equiv="Content-Script-Type" content="text/javascript" />

<title></title>

<style type="text/css">

* {border:0; padding:0; margin:0;}/* Set everything to "zero" */

[B]body {min-height:100%; height:100%;[/B]

font:x-small Arial, Verdana, sans-serif;

voice-family: ""}"";voice-family:inherit;

font-size:small;/*for IE 5.5 */

} html>body {font-size:small;}

/*font-size: small; voice-family: ""}"";

voice-family: inherit; font-size: medium;*/} /* Assist IE rendering height, keyword-font sizes, etc. */

p {font-size: 90%; line-height:1.2em; margin-top:6px;}

h1, h2, h3, h4, h5, h6 {font-family: 'times new roman', arial, verdana, serif;

font-style:normal; font-variant:normal; font-weight:normal; margin:11px 0 0 10px;}

h1{font-size: 1.93em; margin-top:12px;}

h2{font-size: 1.72em; margin-top:12px;}

h3{font-size: 1.52em; margin-top:12px;}

h4{font-size: 1.42em; margin-top:12px;}

h5{font-size: 1.32em; margin-top:12px;}

h6{font-size: 1.21em; margin-top:12px;}

</style>

<script type="text/javascript"><!--

// -->

</script>

<link rel="shortcut icon" href="favicon.ico"><!-- path to your favicon -->

</head>

<body>

<body>

<div style="position: relative">

<ul>

<li>Fee</li>

<li>Fie</li>

<li>Foe</li>

<li>Fum</li>

</ul>

<div id="emptydiv" style="position: absolute; top: 0; right: 0; width: 5px; height: 100%; background-color: red"></div>

</div>


</body>

</html>[/QUOTE]
Copy linkTweet thisAlerts:
@grumpyoldtechsMar 03.2007 — and im pretty sure height:100%; does naff all anyway :S

i didn't think it was supported by div tags
Copy linkTweet thisAlerts:
@WebJoelMar 03.2007 — div style="height:100%" will work, if there is a parent with 100% height. By stating "body {height:100%;}" in STYLE, this is satisfied. (I beleive??) :o
Copy linkTweet thisAlerts:
@FangMar 03.2007 — In IE7 your document is displayed 'the same as' in Fx

In browsers prior to IE7 the element's percentage height is relative to it's parent. So in [B]WebJoel[/B]'s example the [I]emptydiv[/I] is the same as the body i.e. 100%.
Copy linkTweet thisAlerts:
@FeelLikeANutauthorMar 03.2007 — body {min-height:100%; height:100%;}[/quote]Nope. That didn't work. It just made IE mess up in a different way.

div style="height:100%" will work, if there is a parent with 100% height. By stating "body {height:100%;}" in STYLE, this is satisfied.[/quote]In browsers prior to IE7 the element's percentage height is relative to it's parent. So in WebJoel's example the emptydiv is the same as the body i.e. 100%[/quote]However, the body is not the parent of the emptydiv. The parent of the emptydiv is another div whose height is determined automatically. I need the empty div to span the full height of however tall the parent div is.
Copy linkTweet thisAlerts:
@FangMar 03.2007 — The body is the the only parent element in the hierarchy that the [I]emptydiv[/I] can determine it's height from.

To get [I]emptydiv[/I]'s height the same as the parent div you will have to define a height for it: [I]<div style="position: relative; height: 5em;"> [/I]
×

Success!

Help @FeelLikeANut spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.5,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...