Re: [css-d] IE Issue Causing me problems

[Ingo Chao]

Alan Chandler wrote:
 ...
 In firefox I can make this overall area position itself under the header 
 and fill the rest of the browser window with the following css
 
 #loginContent {
   position:absolute;
   top:140px;
   left:0px;
   bottom:0px;
   width:100%;
   min-height:300px;
 }
 
 In IE6 the size of this div appears to be one line.  How can I make it 
 fill the rest of the window?
 
 Similarly, the size of the internal boxes
 
 #chatList {
   position:absolute;
   left:20px;
   right:230px;
   top:50px;
   bottom:125px;
   overflow:auto;
 }
 
 Gives a fixed size box in firefox, but in IE6 it only has the size of 
 the content and so initially starts small and then grows as more and 
 more messages come in.  So how can I contain that box to the size 
 relative to its surrounding div?


You can't span an absolutely positioned element with opposite offsets in 
IE. Any solution would have to set it with top/left only, so you'll need 
a height and a width. Min-height is not supported in IE6, therefore, the 
first one collapses to one line by 100% width. The second one 
shrinks-to-fit its content without width and height. A dilemma is that 
you cannot tell a browser to do the math of 100%height minus 20px minus 
125px. Your absolute positioning attempt needs a general rethinking 
because of this dilemma.

Ingo


-- 
http://www.satzansatz.de/css.html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] IE Issue Causing me problems

[Alan Chandler]

On Monday 22 Oct 2007, Ingo Chao wrote:
 Alan Chandler wrote:
  ...
  In firefox I can make this overall area position itself under the
  header and fill the rest of the browser window with the following
  css
 
  #loginContent {
  position:absolute;
  top:140px;
  left:0px;
  bottom:0px;
  width:100%;
  min-height:300px;
  }
 
  In IE6 the size of this div appears to be one line.  How can I make
  it fill the rest of the window?
 
  Similarly, the size of the internal boxes
 
  #chatList {
  position:absolute;
  left:20px;
  right:230px;
  top:50px;
  bottom:125px;
  overflow:auto;
  }
 
  Gives a fixed size box in firefox, but in IE6 it only has the size
  of the content and so initially starts small and then grows as more
  and more messages come in.  So how can I contain that box to the
  size relative to its surrounding div?

 You can't span an absolutely positioned element with opposite offsets
 in IE. Any solution would have to set it with top/left only, so
 you'll need a height and a width. Min-height is not supported in IE6,
 therefore, the first one collapses to one line by 100% width. The
 second one shrinks-to-fit its content without width and height. A
 dilemma is that you cannot tell a browser to do the math of
 100%height minus 20px minus 125px. Your absolute positioning attempt
 needs a general rethinking because of this dilemma.

 Ingo

I actually discovered a solution using an expression

I create an additional stylesheet for ie 5 and 6

with

#loginContent {
height:expression(document.body.clientHeight-140);
}

#chatList {
height:expression(document.body.clientHeight-315);
width:expression(document.body.clientWidth-250);
}


Works great

-- 
Alan Chandler
http://www.chandlerfamily.org.uk

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/