Min-height, and IE

**DM3Dan** · Jun 15, 2005 06:45

I know IE doesn't support 'Min-height'( :'( ), but my content box doesn't even go behind my text in IE. You'll see if you look at the site this is for, Dpbvids.

**Egor** · Jun 15, 2005 06:47

IE treats height as min-height anyway.

**zcorpan** · Jun 15, 2005 06:48

IE does support "min-height", but it calls it "height". IE doesn't support the real "height" property described in the spec.

**DM3Dan** · Jun 15, 2005 06:58

Ok, thanks it works now.

However, instead of having orange nav links, they are grey?

Edit:

Also, the box doesn't stretch to fit the text as it gets longer, as I wanted it to.

**Paul O'B** · Jun 15, 2005 07:05

Hi,

For your first question you would need to construct the code like this to work properly.

Code:

#box {
position: relative;
width: 650px;
min-height: 500px;
background-color: #fff;
}
/* mac hide \*/
* html #box{height:500px}
/* end hide*/

You would need to give the height just to ie or other browers will override the min-height with height as its the same size.

The main problem is that the box won't stretch automatically around the text because all of your content has been placed absolutely. Absolute elements are removed from the flow and will exert no pressure on other elements.

You need to bring some flow back into the document with static and floated positioning so that the parent can be forced downwards

**Paul O'B** · Jun 15, 2005 07:27

Also, the box doesn't stretch to fit the text as it gets longer, as I wanted it to.

Assuming that your navigation is always to be smaller than the content then you can just put the content back in the flow like this.

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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
h1 {
 font-size: 125%;
}
h2 {
 font-size: 105%;
}
body {
 background-color: #666;
 font-family: Tahoma, Trebuchet MS, Arial;
 color: #555;
 text-align:center;
}
/*--- Misc Info -------------------------------------------*/
#header {
 background-image: url(http://dpbvids.com/Dpbvids/header.jpg);
 width: 650px;
 height: 125px;
 position:relative;
}
#box {
 position: relative;
 width: 650px;
 min-height: 500px;
 background-color: #fff;
 margin:auto;
 text-align:left;
}
/* mac hide \*/
* html #box{height:500px}
/* end hide*/
#headtext1 {
 position: absolute;
 left: 18px;
 top: 8px;
}
#headtext2 {
 position: absolute;
 left: 100px;
 top: 75px;
}
/*--- Text Info ------------------------------------------*/
#right {margin-left: 150px;}
#regtext{font-size: 75%;}
#title {
 font-size: 155%;
 padding:20px 0 0 0;
}
/*--- Link Info -----------------------------------------*/
.navlink {
 position: absolute;
 font-size: 80%;
 left: 40px;
 top: 150px;
 font-family: Tahoma, Trebuchet MS;
 display: block;
 width:75px;
 height:110px;
 border-right:1px solid #ccc;
 margin:0;
 padding:0;
 list-style:none;
}
#navline {
 position: absolute;
	top: 150px;
 left: 110px;
 width: 1px;
 height: 85px;
}
a:link {
 color: #F90;
 text-decoration: none;
}
a:visited {
 color: #333;
 text-decoration: none;
}
a:hover {
 color: #666;
 text-decoration: none;
}
</style>
</head>
<body>
<div id="box"> 
  <div id="header"> 
	<div id="headtext1"> 
	  <h1>Dpbvids.com</h1>
	</div>
	<div id="headtext2"> 
	  <h2>Digital Paintball Skins, Videos, and more!</h2>
	</div>
  </div>
  <div id="right"> 
	<div id="title"> Home </div>
	<div id="regtext">
	  <p>Dpbvids.com has returned! After taking a 2 month break we have returned 
		to the Digital Paintball scene. Soon to come on Dpbvids: </p>
	  <ul>
		<li>Suggest skins </li>
		<li>Search for skins </li>
		<li>News page </li>
		<li>Tons of skins </li>
		<li>Maps and misc other</li>
	  </ul>
	</div>
	<ul class="navlink">
	  <li><a href="#">Home</a></li>
	  <li> <a href="#">Skins</a></li>
	  <li> <a href="#">Videos</a></li>
	  <li><a href="#">Misc</a></li>
	  <li> <a href="#">Contact</a></li>
	</ul>
  </div>
</div>
</body>
</html>

If your left nav column is to get longer then you will need to change it to being floated and then make sure you clear the elements underneath (clear:both).

Hope that helps.

**DM3Dan** · Jun 15, 2005 09:23

Wow, Paul thanks a lot. I will make sure to give that a shot later. Now I see why you are an Advisor!

**Jaffa The Cake** · Jun 15, 2005 14:38

Just so you know, IE does support min-height for table cells.

**Paul O'B** · Jun 15, 2005 14:59

IE does support min-height for table

What's a table

Yes it does support min-height/width on table/cells which is all the more infuriating that it doesn't apply it elsewhere

User Tag List

Thread: Min-height, and IE

Thread Tools

Display

Min-height, and IE

Bookmarks

Bookmarks

Posting Permissions