SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Addict DM3Dan's Avatar
    Join Date
    Sep 2004
    Location
    Albany, NY
    Posts
    204
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Min-height, and IE

    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.

  2. #2
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    IE treats height as min-height anyway.

  3. #3
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    IE does support "min-height", but it calls it "height". IE doesn't support the real "height" property described in the spec.
    Simon Pieters

  4. #4
    SitePoint Addict DM3Dan's Avatar
    Join Date
    Sep 2004
    Location
    Albany, NY
    Posts
    204
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.

  7. #7
    SitePoint Addict DM3Dan's Avatar
    Join Date
    Sep 2004
    Location
    Albany, NY
    Posts
    204
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, Paul thanks a lot. I will make sure to give that a shot later. Now I see why you are an Advisor!

  8. #8
    SitePoint Enthusiast
    Join Date
    May 2005
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just so you know, IE does support min-height for table cells.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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


Bookmarks

Posting Permissions

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