|
|
|
|
03-05-2005, 08:44 PM
|
#1 |
DIV height - IE6 workaround?
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 |
|
|
|
03-05-2005, 08:50 PM
|
#2 |
|
Posts: n/a
|
Re: DIV height - IE6 workaround?
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. |
|
|
|
03-05-2005, 09:06 PM
|
#3 |
|
Posts: n/a
|
Re: DIV height - IE6 workaround?
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 |
|
|
|
03-05-2005, 09:20 PM
|
#4 |
|
Posts: n/a
|
Re: DIV height - IE6 workaround?
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. |
|
|
|
03-05-2005, 09:27 PM
|
#5 |
|
Posts: n/a
|
Re: DIV height - IE6 workaround?
"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 |
|
|
|
03-05-2005, 09:35 PM
|
#6 |
|
Posts: n/a
|
Re: DIV height - IE6 workaround?
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. |
|
|
|
03-05-2005, 10:00 PM
|
#7 |
|
Posts: n/a
|
Re: DIV height - IE6 workaround?
Lauri Raittila <> wrote:
> Thanks. I see it. Thanks for having a look!  )> 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 |
|
|
|
03-05-2005, 10:00 PM
|
#8 |
|
Posts: n/a
|
Re: DIV height - IE6 workaround?
"Spartanicus" <> wrote:
> It will, remove the white space. It only works here if I set the font size to a small value. |
|
|
|
03-05-2005, 10:14 PM
|
#9 |
|
Posts: n/a
|
Re: DIV height - IE6 workaround?
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. |
|
|
|
03-05-2005, 11:04 PM
|
#10 |
|
Posts: n/a
|
Re: DIV height - IE6 workaround?
"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 |
|
|
