473,624 Members | 2,478 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

IE6 (of course) Vs. DIV Height 100%

2 New Member
I’ve worked around a couple of times with DIVs using height:100% and I had no problems at all, testing on many browsers (IE7, FF3, FF2, Opera, Safari and Chrome).
Now I’ve tried the same idea on a new website and I can’t see what’s going wrong on IE6. The DIV never covers the entire page.

Any ideas? Thanks for your help,

Emerson

The entire code:

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
  2.  
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4.     <head>
  5.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6.  
  7.         <style type="text/css">
  8.             body {background-color:#999999;}
  9.  
  10.             html, body {margin:0; padding:0; height:100%;}
  11.  
  12.             .outerContainer {width:100%; min-height:100%; position:absolute; display:block;}
  13.  
  14.             /* IE6 Hack */
  15.  
  16.             * html .outerContainer {height:100%;}
  17.  
  18.             .mainDiv {width:1000px; margin:0 auto 0 auto; display:block; background-color:#C0C0C0;}
  19.  
  20.             .lockerContainer {width:100%; height:100%; position:absolute; top:0px; left:0px; background-color:transparent; background-color:#000000; opacity:.6; filter:alpha(opacity=60); z-index:20;}
  21.         </style>
  22.     </head>
  23.     <body>
  24.         <div class="outerContainer">
  25.             <div class="mainDiv">
  26.                 <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  27.                 <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  28.                 <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  29.                 <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  30.                 <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  31.                 <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  32.             </div>
  33.             <div class="lockerContainer"></div>
  34.         </div>
  35.     </body>
  36. </html> 
  37.  
Jul 7 '09 #1
2 5540
drhowarddrfine
7,435 Recognized Expert Expert
I don't have IE6 available right now to look but 'min-height' has never worked in IE6 while 'height' is treated as min-height.
Jul 7 '09 #2
EmersonUK
2 New Member
@drhowarddrfine
Yes, I know that. That's why I'm using the star hack:

Expand|Select|Wrap|Line Numbers
  1. /* IE6 Hack */
  2.  
  3. * html .outerContainer {height:100%;}
  4.  
Thanks anyway.
Jul 7 '09 #3

Sign in to post your reply or Sign up for a free account.

Similar topics

1
11268
by: Ron Bott | last post by:
I have a layout that has a fixed size #container <div> with a shadow running along the right side that encloses the content area. I would like the shadow background to extend to the full height of the page, not just the viewport. Here is some code: html, body { height: 100%; margin: 0; padding: 0;
2
22992
by: patrick h. | last post by:
Greetings, I am encountering some issues regarding using float while desiring to set the height to 100%. This is likely due to my own misunderstanding of the way things actually function -- any guidance would be appreciated. To summarize, I would like to have a variable-width, 100% height, left-floating column. However, it seems as though with Mozilla/Netscape that height: 100% is not interpreted as I would
5
1667
by: esingley | last post by:
I've done a lot of poking around the web and this newsgroup and have seen a number of answers to this question. But, I wanted to appeal to the experts here one last time before I decide to let the issue go and move on. Here's the deal: I have a DIV that I want to stretch to 100% of the height the page. Not just the viewport, but the page. When there is content that extends past the viewport, I have to remove all the height: 100%...
6
6011
by: jslaybaugh | last post by:
I'm working on an ASP.NET 2.0 application and am having trouble with a very simple table layout. Using ASP.NET 2.0 it defaults to XHTML 1.0 Transitional and I am trying to comply. However, I cannot seem to get my table to render properly, so I pulled out all the server controls and just made a very simple HTML only page and am having the same problem still. The problem can bee seen in the code below. The top row is 100px high and the...
4
12524
by: reycri | last post by:
I have a page that works as I intend in IE but not in Firefox: <html> <head> <title>Overflow Test</title> </head> <body style='overflow:hidden; margin:0; padding:0;'> <table border='0' cellpadding='0' cellspacing='0' style='border-collapse:collapse; width:100%; height:100%;'> <tr><td colspan='2' style='height:3em; border-bottom:1px solid
0
2135
by: Markus Olderdissen | last post by:
i want to create my page with 100% height. <table height="100%"works but is not correct by default. i saw various information how to do it with stylesheet. i really have problems to create my page. i want to have header on top and footer on bottom. content should be on top of the middle part. i always got scrollbars, even if my page isn't too large. perhaps, someone can show me to do it right. the following code describes my wish. ...
5
12413
by: Dag Sunde | last post by:
I ran into a problem i just *know* I've seen described a 100 times before I have an empty (so far) div with ist height: set to 100%. The main reason for this div is to show its white border-right across the whole browser window from top to bottom. And so it does in FF, but IE shows only 1em's worth of it at the top of the screen http://dagsunde.com/GaiaSoft/index.html
7
4677
by: msoliver | last post by:
Okay, I believe this is one of the biggest issues found using CSS/DIV layout. But, I haven't found a non-Javascript solution. I would like two DIVs - first DIV, say with a height of 20px. The second DIV with a height of 100% (the rest of the viewport). If I do this <div style="height:20px>
11
6651
tusovka
by: tusovka | last post by:
I have a container and 4 div’s inside it. My container is stretched to fill the entire window. In IE, if you resize the window all the content resizes correctly, with all 4 margins around the container visible. I’m trying to get the same behavior in FF, yet I can’t seem to find the right CSS recipe. Note, if you past the HTML and CSS code and examine the behavior in the IE, I’m trying to achieve the same behavior in FF. <!DOCTYPE...
0
8233
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
8675
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
8619
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
0
8474
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
7158
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
6108
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5561
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4173
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
1784
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.