www.webdeveloper.com
Results 1 to 13 of 13

Thread: The best solution to correcting IEs empty DIV height

  1. #1
    Join Date
    Mar 2004
    Location
    Sheffield, UK
    Posts
    176

    The best solution to correcting IEs empty DIV height

    I was just wanting to clear up a problem that comes up quite often, when you specify a height on an empty DIV - say less than 15px - and the lunacy that is IEs CSS engine dictates it should be more than this .

    So usually I put something like font-size:0px; in, but there is a variance in the different versions of IE and for the problem that I have at the moment, I need it to be pixel perfect.

    So what is the difinitive technique to sort this bug out perfectly through IE5 to IE6?

  2. #2
    Join Date
    Aug 2004
    Location
    Ankh-Morpork
    Posts
    19,614
    I do both "font-size: 0; line-height: 0;", plus I explicitly set "padding: 0" if that is appropriate.
    "Please give us a simple answer, so that we don't have to think, because if we think, we might find answers that don't fit the way we want the world to be."
    ~ Terry Pratchett in Nation

    eBookworm.us

  3. #3
    Join Date
    Mar 2004
    Location
    Sheffield, UK
    Posts
    176
    Cheers Nog Dog. Unfortunately I've already tried that combination:

    HTML Code:
    #div {
    	margin:0;
    	padding:0;
    	height:8px;
    	background:url(/gfx/bg.gif) repeat-y 0% 0%;
    	font-size:0;
    	line-height:0;
    	}
    and the results were:

    IE6 = 8px
    IE5.5 = 2px
    IE5.01 = 22px

    I mean really, what the hell is all that about? Don't know whether to get mad again or just laugh because there's no logic behind it.

    Are there other methods for the earlier IE versions? I use a separate stylesheet for the other crap I'm forced to use to fix issues these pieces of junk throw up, so it wont conflict with the code the proper browsers see.

  4. #4
    Join Date
    May 2005
    Location
    UK
    Posts
    18
    Have you thought of using IE Conditional statements?

    http://www.quirksmode.org/css/

  5. #5
    Join Date
    Mar 2004
    Location
    Sheffield, UK
    Posts
    176
    Yeah I used to use them but not anymore. I'm not sure how using them would help solve the problem though. I would still need the css code to make the empty div render properly in IE 5.

  6. #6
    Join Date
    Aug 2004
    Location
    Ankh-Morpork
    Posts
    19,614
    Are you using a HTML 4.01 Strict doctype?
    "Please give us a simple answer, so that we don't have to think, because if we think, we might find answers that don't fit the way we want the world to be."
    ~ Terry Pratchett in Nation

    eBookworm.us

  7. #7
    Join Date
    Mar 2004
    Location
    Sheffield, UK
    Posts
    176
    XHTML 1.0 Strict and w3c valid. Why?

  8. #8
    Join Date
    Mar 2004
    Location
    Sheffield, UK
    Posts
    176
    It's fixed and sorry. In my previous mentioned ie5 only css file I had the div assigned with a height of 1% and had forgotten to take it out.

    I found that all versions get the height correct with only font-size:0; and in this case it didn't need the line-height:0;

    So I learnt that font-size:0; is the best method for correcting an empty div's height in IE and that I should check my code before posting a message and wasting people's time.

  9. #9
    Join Date
    Aug 2004
    Location
    Ankh-Morpork
    Posts
    19,614
    Glad you got it fixed.

    I was asking about the doctype to make sure IE wasn't running in quirks mode. XHTML strict should do the job, too (and apparently does).
    "Please give us a simple answer, so that we don't have to think, because if we think, we might find answers that don't fit the way we want the world to be."
    ~ Terry Pratchett in Nation

    eBookworm.us

  10. #10
    Join Date
    Jun 2005
    Posts
    1
    I find this is quite a neat method of fixing this:

    div#mydiv {
    height: 5px;
    background: #369;
    overflow: hidden;
    }

  11. #11
    Join Date
    Dec 2002
    Location
    Seattle, WA
    Posts
    1,843
    it is good practice when working with older browsers to set the font-size and line-height to 1px or 0px for selectors when the element's height is smaller than the inherited font-size or line-height

  12. #12
    Join Date
    Jun 2010
    Location
    Tilburg, Netherlands
    Posts
    2
    The beste way to use a clear div cross browser is like this:

    Code:
    <style>
    .clear { clear:both; height:0; overflow:hidden; }
    </style>
    
    <div class="clear">&nbsp;</div>
    The "&nbsp;" is needed for IE6 to let the "overflow" style work.

    If you need more solutions voor CSS just post me!

  13. #13
    Join Date
    Jun 2010
    Location
    Tilburg, Netherlands
    Posts
    2

    correction

    Clear is only needed is you have to clear something. You can leave that style of course. But to clear a div this is the best code i think.

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