Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    IE and min-height

    Hi all!

    Ok, I've finally reached my limit. I just can't figure this out. I know that IE has all kinds of problems with CSS, but for the life of me, can't understand this one. I am testing this on IE8 and the min/max-height and widths work just fine for my wrapper div. The problem lies in that ap divs contained inside of this wrapper change position when the browser window is resized and the min-height is reached. This seems to only happen when I use the bottom property to position the inner div. Of course everything works fine in FF. I've included some simple code to show what I mean, because explaining this seems more difficult than I thought it would be.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    body {
    	margin:0;
    	padding:0;
    	height:100%;
    	background-color: #000000;
    } 
    html {height: 100%;}
    #Layer1 {
    	position:relative;
    	width:100%;
    	height:70%;
    	z-index:1;
    	border: solid green;
    	min-height:300px;
    	min-width:600px;
    	overflow:hidden;
    }
    #Layer2 {
    	position:absolute;
    	width:200px;
    	height:50px;
    	z-index:2;
    	right: 100px;
    	bottom:50px;
    	overflow: visible;
    	border: solid blue;
    }
    -->
    </style>
    </head>
    
    <body>
    <div id="Layer1">
      <div id="Layer2"></div>
    </div>
    
    </body>
    </html>
    If you resize the browser smaller than the min-height of the green box, then the red box changes position. Any help is greatly appreciated!
    Last edited by krash; 01-11-2010 at 01:56 PM.

  • #2
    Regular Coder Candygirl's Avatar
    Join Date
    Apr 2008
    Location
    Switzerland
    Posts
    183
    Thanks
    3
    Thanked 56 Times in 56 Posts
    Hello,

    It looks like IE takes the height as reference for the absolute position instead of the min-height.

    I had a look at your code searching if something could be a reason for IE to get lost and I saw the overflow:hidden. That seams to be IE's problem. If you remove it, it acts correctly. Do you really need the overflow here ?
    "Imagination was given to man to compensate for what he is not;
    a sense of humour to console him for what he is."
    -Francis Bacon

  • #3
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Wow, thanks! I've been pulling my hair out for hours with this and that works perfectly. Well except for not being able to hide my overflow. I might just place a big black empty div below the wrapper to hide any graphical overflow. Unless someone could suggest a better way. There will be several divs inside and some will be larger than the wrapper. They are part of a graphical fluid layout frame that contains the content. Again, thank you so much!

  • #4
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well, adding that div at the bottom to hide my overflow is causing scrollbars on the body and that's exactly what this design is supposed to avoid unless the window size is too small to display the contents in a readable way. Any other thoughts on a workaround for the overflow:hidden bug?

  • #5
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok, I got it! It requires wrapping the wrapper in a wrapper...lol In other words, I put the whole thing inside of another div which has overflow:hidden while omitting it from the normal wrapper. Aside from sloppier looking code, everything now works as intended. Thanks again for the help!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •