Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > DIV height - IE6 workaround?

Reply
Thread Tools

DIV height - IE6 workaround?

 
 
Jens Lenge
Guest
Posts: n/a
 
      03-05-2005
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>

 
Reply With Quote
 
 
 
 
Lauri Raittila
Guest
Posts: n/a
 
      03-05-2005
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.
 
Reply With Quote
 
 
 
 
Jens Lenge
Guest
Posts: n/a
 
      03-05-2005
Lauri Raittila <(E-Mail Removed)> 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

 
Reply With Quote
 
Lauri Raittila
Guest
Posts: n/a
 
      03-05-2005
in alt.html, Jens Lenge wrote:
> Lauri Raittila <(E-Mail Removed)> 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.
 
Reply With Quote
 
Spartanicus
Guest
Posts: n/a
 
      03-05-2005
"Jens Lenge" <(E-Mail Removed)> 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
 
Reply With Quote
 
Lauri Raittila
Guest
Posts: n/a
 
      03-05-2005
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.
 
Reply With Quote
 
Jens Lenge
Guest
Posts: n/a
 
      03-05-2005
Lauri Raittila <(E-Mail Removed)> 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

 
Reply With Quote
 
Jens Lenge
Guest
Posts: n/a
 
      03-05-2005
"Spartanicus" <(E-Mail Removed)> wrote:

> It will, remove the white space.


It only works here if I set the font size to a small value.
 
Reply With Quote
 
Lauri Raittila
Guest
Posts: n/a
 
      03-05-2005
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.
 
Reply With Quote
 
Spartanicus
Guest
Posts: n/a
 
      03-05-2005
"Jens Lenge" <(E-Mail Removed)> wrote:

>"Spartanicus" <(E-Mail Removed)> 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
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Div Height = Image height. help muggslab HTML 1 02-01-2010 07:41 PM
IE6 vs. DIV height 100% emerson.marini HTML 0 07-03-2009 01:09 PM
Can't get DIV height in IE6 to set appropriately (IE7 works fine) Richard.Gohs@pa-tech.com HTML 1 09-24-2008 08:14 AM
child div blocks parent div, height problem... HJ HTML 5 09-01-2006 04:37 PM
How to tell height of div where height is not set? Don Vaillancourt Javascript 8 01-31-2005 11:32 AM



Advertisments