GPL wrote:
> http://www.lemosnet.com/work/baddemo.html
#HEADER-TOP-LOW {
...
height: 21px;
...
margin-bottom: 3px;
}
#HEADER-BUTTON-BAR {
...
height:24px;
...
}
<div id="HEADER-TOP-LOW">
<div id="HEADER-BUTTON-BAR">
You've encountered the expanding box problem in IE6 [1].
#HEADER-BUTTON-BAR does not respect its height, it is expanded by its
content. Same to #HEADER-TOP-LOW. Remove both heights, and the situation
in Firefox will look the same.
The problem with your construction is that you could assign
overflow-y:hidden to #HEADER-BUTTON-BAR, but when assigned to its parent
in addition, the taller element will be cut by its parent.
It's not a good idea to add overflow-y:hidden to both elements, then to
add position:relative to the child: You'd be forced to change the
stacking of the header complex; #HEADER-TOP would need position:relative
and a positive z-index, too.
I'd say rework the header, and avoid inserting taller boxes into smaller
ones.
Ingo
[1] http://www.positioniseverything.net/explorer/expandingboxbug.html
--
http://www.satzansatz.de/css.html
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
