Topic: The minium height bug in IE... Pages that link to <a href="https://ozoneasylum.com/backlink?for=10973" title="Pages that link to Topic: The minium height bug in IE..." rel="nofollow" >Topic: The minium height bug in IE...\
 
Author Thread
Rinswind 2th
Maniac (V) Inmate

From: Den Haag: The Royal Residence
Insane since: Jul 2000

 IP logged posted posted 05-16-2003 23:45 Edit Quote

I think IE has a little bug which shows layers too high when you set the height realy small, less than 5pixels.
Look at this Picture:

wrong

This one is made with this code:

code:
<html>

<head>

  <title>minimium height</title>

  <style type="text/css">

#divCursor{

	position:absolute; width:6px; height:6px;

	background-color:#ff0000; display:block;}



#menu{	

	position:absolute; width:4px; height:4px;

	background-color:#00ff00; display:block;

}

  </style>

</head>

<body>

<div id="divCursor">

<div id="menu"></div>

</div>

</body>

</html>



Now look at this picture:

Good

The code is the same there is just an div extra.
Thus:

code:
<div id="divCursor">

<div id="menu">[b]<div></div>[/b]</div>

</div>



I played with different units like em, pt, and px first before i found this.
BTW it's in IE6 for windows.

__________________________________________
"Art has to be forgotten. Beauty must be realized."
Piet Mondriaan

[This message has been edited by Rinswind 2th (edited 05-17-2003).]
u-neek
Bipolar (III) Inmate

From: Berlin, Germany
Insane since: Jan 2001

 IP logged posted posted 05-17-2003 09:17 Edit Quote

I had similar problems with some layouts. Try to add a font-size: 1px.

#divCursor{
font-size: 1px;position:absolute; width:6px; height:6px;
background-color:#ff0000; display:block;}

#menu{
font-size: 1px;position:absolute; width:4px; height:4px;
background-color:#00ff00; display:block;
}
HZR
Bipolar (III) Inmate

From: Cold Sweden
Insane since: Jul 2002

 IP logged posted posted 05-17-2003 13:49 Edit Quote

Or try overflow: auto; or overflow: hidden on the div with the greean bg.
smonkey
Paranoid (IV) Inmate

From: Northumberland, England
Insane since: Apr 2003

 IP logged posted posted 05-17-2003 17:57 Edit Quote

some problems like this can be to do with empty tags, so try putting something between the div tags like:

<div id="divCursor">
<div id="menu">&nbsp;</div>
</div>

or

<div id="divCursor">
<div id="menu">&nbsp;</div>
</div>

Sometimes it's best to make a spacer div that you can chuck in anywhere like this, it also sloves problems with floats having no height when they are contained within a div that is smaller than itself.

A spacer div is just a div with it's style set to clear:both - it fixes most situations when nested divs behave strangely.

visit my CryoKinesis Online Gallery
Rinswind 2th
Maniac (V) Inmate

From: Den Haag: The Royal Residence
Insane since: Jul 2000

 IP logged posted posted 05-18-2003 11:11 Edit Quote

It's not realy a problem off nested div's.
Although it looks like it in my first post.
But if you remove the 'menu' and the inner div, thus leaving the 'divCursor' div this too will be too high in Internet Explorer. In both Opera7 and Netscape7 it looks good.
I hate to use workarounds only to please a non standard compliant browser.....
Anyway thanks guys for the responses and the workarounds


__________________________________________
"Art has to be forgotten. Beauty must be realized."
Piet Mondriaan


Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« Backwards — Onwards »

Show Forum Drop Down Menu