DIV height - IE6 workaround?

Discussion in 'HTML' started by Jens Lenge, Mar 5, 2005.

  1. Jens Lenge

    Jens Lenge Guest

    I just noticed that setting a DIV to an exact height of 5px will not work in
    IE6 (while it does work with Firefox).
    It seems that IE6 will not let me specify a height of less than approx.
    20px.

    However, I need my DIV 5px high.
    What can I do to fix/work around this?

    Cheers, Jens

    Example:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Test</title>
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
    </head>
    <body>

    <div style="background-color: black; height: 5px"></div>

    </body>
    </html>
     
    Jens Lenge, Mar 5, 2005
    #1
    1. Advertising

  2. in alt.html, Jens Lenge wrote:
    > I just noticed that setting a DIV to an exact height of 5px will not work in
    > IE6 (while it does work with Firefox).


    Aha.

    > It seems that IE6 will not let me specify a height of less than approx.
    > 20px.


    Sounds strange. URL?

    > However, I need my DIV 5px high.


    Why? Are you sure you are not looking for border?

    --
    Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
    Utrecht, NL.
     
    Lauri Raittila, Mar 5, 2005
    #2
    1. Advertising

  3. Jens Lenge

    Jens Lenge Guest

    Lauri Raittila <> wrote:

    > Sounds strange. URL?


    The small example code from my posting shows it.
    You can see the page at http://www.photoss.de/test/test.htm

    >> However, I need my DIV 5px high.

    > Why? Are you sure you are not looking for border?


    In this specific case, no.
    I could use an image as a workaround, but I would like to understand how to
    do it with a div.

    BTW, I hav also tried not setting any height (so it will be zero height) and
    specifiyng a 5px top border instead. But this also does not work for IE6.

    Jens
     
    Jens Lenge, Mar 5, 2005
    #3
  4. in alt.html, Jens Lenge wrote:
    > Lauri Raittila <> wrote:
    >
    > > Sounds strange. URL?


    > You can see the page at http://www.photoss.de/test/test.htm


    Thanks. I see it.

    > >> However, I need my DIV 5px high.

    > > Why? Are you sure you are not looking for border?

    >
    > In this specific case, no.


    So, what are you doing?

    > I could use an image as a workaround, but I would like to understand how to
    > do it with a div.


    That should work. It seems that IE is buggy when div is empty, or only
    contains whitespace. If it contains something else, it works if you set
    line-height to 5px.

    > BTW, I hav also tried not setting any height (so it will be zero height) and
    > specifiyng a 5px top border instead. But this also does not work for IE6.


    This works here:

    <div style="border-top:5px solid #f00;backgrounf="#000;"></div>

    As does this:

    <div style="background:#000;padding-top:5px;"></div>




    --
    Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
    Utrecht, NL.
     
    Lauri Raittila, Mar 5, 2005
    #4
  5. Jens Lenge

    Spartanicus Guest

    "Jens Lenge" <> wrote:

    >I just noticed that setting a DIV to an exact height of 5px will not work in
    >IE6


    It will, remove the white space.

    --
    Spartanicus
     
    Spartanicus, Mar 5, 2005
    #5
  6. in alt.html, Lauri Raittila wrote:

    > <div style="border-top:5px solid #f00;backgrounf="#000;"></div>


    Should be:

    <div style="border-top:5px solid #000;"></div>

    --
    Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
    Utrecht, NL.
     
    Lauri Raittila, Mar 5, 2005
    #6
  7. Jens Lenge

    Jens Lenge Guest

    Lauri Raittila <> wrote:

    > Thanks. I see it.


    Thanks for having a look! :eek:)

    > So, what are you doing?


    I am trying to create a CSS equivalent to the table-based layout from my
    previous posting ("Tables vs. CSS - Need advice"). After a lot of trying and
    grabbing tips from online tutorials I have achived something that works
    exactly the way I want for both Firefox and IE6. (However, my solution
    contains 3 little "hacks" that work, but are not really elegant. The DIV
    from this posting is one of them.)

    I will present my approach here for discussion when I have finished it.
    Hopefully, some of you professionals will add some comments or suggestions
    that help me further improve it.

    Thank you for your solutionsm both of them work! (I suppose
    backgrounf="#000;" is a typo and should be background:#000, right?)
    Playing around with them, I have found a third solution that seems to show
    why IE is buggy here:

    IE will always set a DIV to a minimum height that is enough to contain
    characters of the current font size. If you choose smaller or larger font
    sizes in IE, the height of the DIV will be decreased or increased
    accordingly. So, if you set "font-size:0px" inside the DIV, you can also
    make it 5px high.

    Thanks again,
    Jens
     
    Jens Lenge, Mar 5, 2005
    #7
  8. Jens Lenge

    Jens Lenge Guest

    "Spartanicus" <> wrote:

    > It will, remove the white space.


    It only works here if I set the font size to a small value.
     
    Jens Lenge, Mar 5, 2005
    #8
  9. in alt.html, Jens Lenge wrote:

    > Playing around with them, I have found a third solution that seems to show
    > why IE is buggy here:
    >
    > IE will always set a DIV to a minimum height that is enough to contain
    > characters of the current font size. If you choose smaller or larger font
    > sizes in IE, the height of the DIV will be decreased or increased
    > accordingly. So, if you set "font-size:0px" inside the DIV, you can also
    > make it 5px high.


    That is the same issue what I tried to solve with line-height. Remember
    that user might ignore your font-size settings. (IE don't know how to
    ignore line-height, so that would still work...)

    --
    Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
    Utrecht, NL.
     
    Lauri Raittila, Mar 5, 2005
    #9
  10. Jens Lenge

    Spartanicus Guest

    "Jens Lenge" <> wrote:

    >"Spartanicus" <> wrote:
    >
    >> It will, remove the white space.

    >
    >It only works here if I set the font size to a small value.


    Time to provide an url.

    --
    Spartanicus
     
    Spartanicus, Mar 5, 2005
    #10
  11. Jens Lenge

    Jim Royal Guest

    In article <d0da69$b4o$05$-online.com>, Jens Lenge
    <> wrote:

    > It only works here if I set the font size to a small value.


    I have noted the same problem, and the same solution: Internet Explorer
    has a problem with DIVs that are smaller than the body font size, even
    if the DIV is empty.

    For example, on this site: <http://www.ccmustang.com/>

    The red topbar above the photo is a DIV with a tiled background. The
    DIV is empty otherwise, and there's no whitespace. IE will force it to
    be 20 pixels high (rather than the 10 pixels I wanted) unless I reduce
    the font size.

    As far as I can tell, this is the only workaround.

    --
    Jim Royal
    "Understanding is a three-edged sword"
    http://JimRoyal.com
     
    Jim Royal, Mar 6, 2005
    #11
  12. Jens Lenge

    kchayka Guest

    Jim Royal wrote:
    >
    > For example, on this site: <http://www.ccmustang.com/>
    >
    > The red topbar above the photo is a DIV with a tiled background. The
    > DIV is empty otherwise, and there's no whitespace. IE will force it to
    > be 20 pixels high (rather than the 10 pixels I wanted) unless I reduce
    > the font size.


    The extra space is probably caused by line-height, along with IE's
    broken overflow behavior which automatically expands an element to fit
    the content, regardless of any specified dimensions.

    Set overflow:hidden

    --
    Reply email address is a bottomless spam bucket.
    Please reply to the group so everyone can share.
     
    kchayka, Mar 8, 2005
    #12
  13. Jens Lenge

    Jim Royal Guest

    In article <>, kchayka <>
    wrote:

    > > For example, on this site: <http://www.ccmustang.com/>
    > >
    > > The red topbar above the photo is a DIV with a tiled background. The
    > > DIV is empty otherwise, and there's no whitespace. IE will force it to
    > > be 20 pixels high (rather than the 10 pixels I wanted) unless I reduce
    > > the font size.

    >
    > The extra space is probably caused by line-height, along with IE's
    > broken overflow behavior which automatically expands an element to fit
    > the content, regardless of any specified dimensions.
    >
    > Set overflow:hidden



    Whadda you know -- it works.

    Any real difference between setting the font size versus setting
    overflow? or is it just six of one / half-dozen of the other?

    --
    Jim Royal
    "Understanding is a three-edged sword"
    http://JimRoyal.com
     
    Jim Royal, Mar 8, 2005
    #13
  14. Jens Lenge

    Jens Lenge Guest

    > Time to provide an url.

    I already did some postings above.
     
    Jens Lenge, Mar 8, 2005
    #14
  15. Jens Lenge

    Spartanicus Guest

    "Jens Lenge" <> wrote:

    >> Time to provide an url.

    >
    >I already did some postings above.


    No you posted code requiring us to copy it, open an editor, paste it,
    save it, open a browser and open the document. All that trouble to help
    you solve a problem, and even then there are several unknown variables
    that remain such as server content type and the risk of differences
    between the actual code and the copy.

    kchayka posted a work around, note that the cure may cause more problems
    than it solves.

    --
    Spartanicus
     
    Spartanicus, Mar 8, 2005
    #15
  16. Jens Lenge

    Jens Lenge Guest

    Spartanicus <> wrote:

    > No you posted code requiring us to copy it, open an editor, paste it,
    > save it, open a browser and open the document.


    I did that in the first place, yes.
    But as Lauri asked for an URL in the first response, I supplied one:

    --Cite from my posting above--
    >> Sounds strange. URL?

    >The small example code from my posting shows it.
    >You can see the page at http://www.photoss.de/test/test.htm

    --Cite end--

    So, as said, I *did* supply an URL a few postings above.
    Sorry I you didn't find it. Maybe I should have referred to it in the first
    place.

    Cheers, Jens
     
    Jens Lenge, Mar 8, 2005
    #16
  17. Jens Lenge

    kchayka Guest

    Jim Royal wrote:
    > In article <>, kchayka <>
    > wrote:
    >>
    >> Set overflow:hidden

    >
    > Any real difference between setting the font size versus setting
    > overflow? or is it just six of one / half-dozen of the other?


    font-size is unreliable, since users may have author-defined font sizes
    turned off, or set a minimum font-size that would override it.

    You do need to be careful with the overflow property, though. MacIE's
    overflow handling is quite buggy, for example. Safari has an overflow
    bug or two as well.

    --
    Reply email address is a bottomless spam bucket.
    Please reply to the group so everyone can share.
     
    kchayka, Mar 8, 2005
    #17
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Just Me

    IE6 Bug Workaround ?????

    Just Me, Mar 28, 2008, in forum: ASP .Net
    Replies:
    7
    Views:
    2,700
    Just Me
    Mar 29, 2008
  2. Replies:
    1
    Views:
    2,769
    Adrienne Boswell
    Sep 24, 2008
  3. emerson.marini

    IE6 vs. DIV height 100%

    emerson.marini, Jul 3, 2009, in forum: HTML and CSS
    Replies:
    0
    Views:
    1,107
    emerson.marini
    Jul 3, 2009
  4. muggslab

    Div Height = Image height. help

    muggslab, Feb 1, 2010, in forum: HTML and CSS
    Replies:
    1
    Views:
    894
    muggslab
    Feb 1, 2010
  5. Don Vaillancourt

    How to tell height of div where height is not set?

    Don Vaillancourt, Jan 28, 2005, in forum: Javascript
    Replies:
    8
    Views:
    174
    Dietmar Meier
    Jan 31, 2005
Loading...

Share This Page