www.webdeveloper.com
Results 1 to 3 of 3

Thread: IE CSS issue with min-height DIV

  1. #1
    Join Date
    Oct 2007
    Posts
    161

    IE CSS issue with min-height DIV

    I have created DIVs in CSS which layout my page - all going fairly well, until I test in IE6 (horrid)

    I have a main content DIV with sub-DIVs floated - the main #content style is set to:

    Code:
    #content {
    	width:100%;
    	margin-top:5px;
    	padding-bottom:5px;
    	background-color: #666666;
    	font-size: x-small;
    	overflow: hidden;
    	border: 1px solid #000000;
    	min-height: 380px;
    }
    This was making the content within this DIV (including all the floated sub-DIVs) have a min-height as specified, which then grows when the content is larger..... except it didn't work in IE6. The min-height was being ignored so it looked all squashed up.

    Having searched Webdeveloper.com I found that adding the following:

    Code:
    height: auto !important;
    height: 380px;
    To the style made the min-height attribute work in IE6, but it doesn't seem to allow any expansion - so it may as well just have a 'height' set!

    Any ideas how to get around this - I hate being forced by IE to workaround these problems, but since they have the majority share in browser usage, I suppose I have to (and I know alot of users still use the older version due to dislikes over some of the new features

    Help!!

    LP

  2. #2
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    The overflow: hidden; is what is locking the height and not allowing expansion. If the overflow is required to force float enclosure, then I would put the IE6 specific stuff in a separate style rule:
    Code:
    #content {
    	width:100%;
    	margin-top:5px;
    	padding-bottom:5px;
    	background-color: #666666;
    	font-size: x-small;
    	overflow: hidden;
    	border: 1px solid #000000;
    	min-height: 380px;
    }
    
    * html #content {
    	height: 380px;
    	overflow: visible;
    }

  3. #3
    Join Date
    Oct 2007
    Posts
    161
    Thanks - thats exactly what I needed (and yes, I needed to have overflow: hidden on the main style so that the background grows in height for the sub-DIVs (I think this was something you may have recommended on a previous post?!)

    Wouldn't it be nice if IE joined the rest of the browsers and fully supported CSS!

    LouPhi

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles