SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Evangelist
    Join Date
    Oct 2006
    Posts
    408
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE Issue - Height

    Hi,

    My webpage displays correctly in Firefox. However, in IE9 the wrapper height is too large so contains too much whitespace.

    To get it to display correctly in IE9 I have to change height: 100%; /* IE hack */ to 80%. But this in turn messes the view in Firefox.
    Why is this? Sorry I am unable to post link at this time.

    Thanks!

    Code:
    html{
    height:99%;
    }
    
    body {
    background: #eee url('../images/bg.jpg') repeat-x;
    background-position: 20px 10px;
    margin: 0;padding:0;  /* remove default margin being applied by the browser */
    font-family: verdana, helvetica, sans-serif;
    height: 100%; /* IE hack */
    color: /*#71a200*/ #666;
    }
    
    p, ul{
    	 font-size: 0.8em;
    }
    
    #wrapper {
    				 position: relative;
    				 margin: 50px auto;
    				 padding: 0;			 
    				 width: 800px;
    				 border: 2px solid #ccc;
    				 background: #F7F7F5 url('../images/main1.jpg') no-repeat;
    				 min-height:100%; /* Mozilla Hack */
    	       height:auto; /* Mozilla Hack */
    }
    
    * html #wrapper{height:100%;} /* IE - ensures min height */

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,797
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    The QUICK FIX, if setting the height solves your issue, would be to use a conditional comment and load a style sheet for IE 9.

    I don't see the logic in your CSS.

    html {height:99%;} ( why only 99% of the browser window? whats with the other 1%?)
    body {height: 100%; /* IE hack ?!?!?*/} really is needed everywhere, also it will only be 100% of the previous 99%

    #wrapper {min-height:100%; /* Mozilla Hack... no it's not */
    height:auto; /* Mozilla Hack, no it's not, it's a default ... get rid of this it's redundant */
    }
    * html #wrapper{height:100%;} /* IE - ensures min height ( this is the HACK for old IE. Because OLD IEs dont understand min-height and treat height as min-height anyway)*/

    OK...
    I am thinking that it's your HTML markup that's at fault. different browsers compensate for faulty markup differently and simple typos can cause catastrophic inconsistencies. I recommend you validate your HTML; you may find you an open tag somewhere, or something of that sort , is what is causing this error.

  3. #3
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    What exactly are you trying to do? Set a wrapper to the full size of the viewport? Because there's a very easy way to do it that works in IE6, IE9, Firefox, etc:

    Code CSS:
    html, body, #wrapper { height:100%; margin:0 }

    What about that doesn't work? If I completely misunderstood, then we (or I, anyway) really are going to need a link to something.
    Last edited by sdleihssirhc; Oct 15, 2011 at 22:01. Reason: formatting
    I'm the web overlord for Graphic Business Systems

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,797
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    In compliant browsers, you can't set #wrapper to height:100%; as that would prevent #wrapper from expanding vertically when its content is more than the height of the viewport window.

    The principle I was trying to explain before to use is this:

    html, body { height:100%; margin:0 ; padding:0}
    #wrapper {min-height:100%}
    * html #wrapper, * + html #wraper { height:100%}/* for legacy IE: 6 & 7 */

    Still I loathe hacks I would suggest conditional comments instead.

  5. #5
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    Still I loathe hacks I would suggest conditional comments instead.
    While I'm the exact reverse and would use EXACTLY what you have listed for code... since conditional comments are markup bloat and an extra handshake. Also, 7 has min-height so you don't have to send it to 7, just to 6-

    Code:
    html, body {
      height:100%;
      margin:0;
      padding:0
      position:relative; /* fix oddball Opera bug */
    }
    
    #wrapper {
      min-height:100%
    }
    
    * html #wrapper {
      /* IE 6- knows not the min-height, but incorrectly treats height as such */
      height:100%
    }
    NO reason to have the "* + html" version for 7.

    Though really I think we need to see more of what it is the OP is trying to do -- we're guessing wildly here as the posted code makes little if any sense.

  6. #6
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I ran into this exact issue myself, and discovered that having bottom margin on the wrapper with the min-height, is the problem. Remove it, and you should be set!


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
  •