Velocity Reviews

Velocity Reviews (http://www.velocityreviews.com/forums/index.php)
-   HTML (http://www.velocityreviews.com/forums/f31-html.html)
-   -   DIV height - IE6 workaround? (http://www.velocityreviews.com/forums/t161151-div-height-ie6-workaround.html)

Jens Lenge 03-05-2005 08:44 PM

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>


Lauri Raittila 03-05-2005 08:50 PM

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.

Jens Lenge 03-05-2005 09:06 PM

Re: DIV height - IE6 workaround?
 
Lauri Raittila <lauri@raittila.cjb.net> 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


Lauri Raittila 03-05-2005 09:20 PM

Re: DIV height - IE6 workaround?
 
in alt.html, Jens Lenge wrote:
> Lauri Raittila <lauri@raittila.cjb.net> 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.

Spartanicus 03-05-2005 09:27 PM

Re: DIV height - IE6 workaround?
 
"Jens Lenge" <Spampot@gmx.net> 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

Lauri Raittila 03-05-2005 09:35 PM

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.

Jens Lenge 03-05-2005 10:00 PM

Re: DIV height - IE6 workaround?
 
Lauri Raittila <lauri@raittila.cjb.net> wrote:

> Thanks. I see it.


Thanks for having a look! :o)

> 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 03-05-2005 10:00 PM

Re: DIV height - IE6 workaround?
 
"Spartanicus" <me@privacy.net> wrote:

> It will, remove the white space.


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

Lauri Raittila 03-05-2005 10:14 PM

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.

Spartanicus 03-05-2005 11:04 PM

Re: DIV height - IE6 workaround?
 
"Jens Lenge" <Spampot@gmx.net> wrote:

>"Spartanicus" <me@privacy.net> 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


All times are GMT. The time now is 12:36 AM.

Powered by vBulletin®. Copyright ©2000 - 2014, vBulletin Solutions, Inc.
SEO by vBSEO ©2010, Crawlability, Inc.