DIV height - IE6 workaround?

J

Jens Lenge

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>
 
L

Lauri Raittila

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.
Click to expand...

Sounds strange. URL?
However, I need my DIV 5px high.
Click to expand...

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

Jens Lenge

Lauri Raittila said:
Sounds strange. URL?
Click to expand...

The small example code from my posting shows it.
You can see the page at http://www.photoss.de/test/test.htm
Why? Are you sure you are not looking for border?
Click to expand...

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
 
L

Lauri Raittila

You can see the page at http://www.photoss.de/test/test.htm
Click to expand...

Thanks. I see it.
In this specific case, no.
Click to expand...

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.
Click to expand...

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.
Click to expand...

This works here:

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

As does this:

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

Jens Lenge

Lauri Raittila said:
Thanks. I see it.
Click to expand...

Thanks for having a look! :eek:)
So, what are you doing?
Click to expand...

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
 
L

Lauri Raittila

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.
Click to expand...

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...)
 
J

Jim Royal

Jens Lenge said:
It only works here if I set the font size to a small value.
Click to expand...

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.
 
K

kchayka

Jim said:
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.
Click to expand...

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
 
J

Jim Royal

[QUOTE="kchayka said:
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.
Click to expand...

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[/QUOTE]


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?
 
S

Spartanicus

Jens Lenge said:
I already did some postings above.
Click to expand...

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.
 
J

Jens Lenge

Spartanicus said:
No you posted code requiring us to copy it, open an editor, paste it,
save it, open a browser and open the document.
Click to expand...

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--
The small example code from my posting shows it.
You can see the page at http://www.photoss.de/test/test.htm
Click to expand...
--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
 
K

kchayka

Jim said:
Any real difference between setting the font size versus setting
overflow? or is it just six of one / half-dozen of the other?
Click to expand...

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.
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Help with Visual Lightbox: Scripts 2
Help with code 0
Help with my responsive home page 2
Centering a button using flexbox 2
Please Help? 0
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
Is it possible an iframe can overlapp another? 3
I am trying to detect Which image id="" was clicked ? 22

Members online

Total: 27 (members: 2, guests: 25)
Robots: 394

Forum statistics

Threads
473,755
Messages
2,569,536
Members
45,020
Latest member
GenesisGai

Latest Threads

Top