Forum Moderators: not2easy
I have the following code in my website:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<style>
HTML { padding: 0; margin: 0; background: #fff; }
BODY, HTML, INPUT, SELECT, TEXTAREA, BUTTON, TD, TH, BLOCKQUOTE { font-family: Verdana, Tahoma, Helvetica, Arial, sans-serif; font-size: 11px; }
body { margin:0; padding:0; width: 100%; height:100%;}
.leftMenu {float:left; padding: 0; margin: 0; background: url(../img/menu_sep.png) 100% 0 repeat-y; height: 100%;}
.leftMenuTop {padding: 10px; margin: 0; background: url(../img/menu_sep_top.png) 100% 0 no-repeat; height: 100%;}
.rightarea {overflow:auto; zoom: 1; padding:10px; margin: 0; height: 100%;}
</style>
<body>
<div class="leftMenu">
<div class="leftMenuTop">
aaa
</div>
</div>
<div class="rightarea">
bbb
</div>
</body>
</html>
Left menu div is a floating div. It has a right aligned background. Inside of this div there is another div with background image in top right corner.
A weird problem in IE6: when the height of the div "leftMenuTop" is defined, the entire left menu occupies the whole screen width, and the "rightarea" floats below.
When I remove the "height: 100%", then the columns are displayed correctly.
When I place "height: 5px" or anything else, the left menu again occupies the whole width.
Seems like it is impossible to define a floating div height when there is a right aligned background.
In IE7 and FireFox everything is OK.
Is there any workaround of this problem?
Thanks in advance!
Andrei
.leftMenu {float:left; padding: 0; margin: 0; background: url(../img/menu_sep.png) right top repeat-y; height: 100%;}
.leftMenuTop {padding: 10px; margin: 0; background: url(../img/menu_sep_top.png) right top no-repeat; height: 100%;}
Also IE6 is not very good at understanding height: 100%;
Look this up in Google to find some solutions.
I have solved the problem :)
This was because outer div was floating, but inner div was not floating. In IE 5 and 6 this stretches the inner div to 100% of the screen. But in IE7 and Firefox the inner div is just 100% of outer floating div.
I made an inner div also floating and it seems to work in all browsers.
Is this a bug in my site or in old IE? In other words -- do all inner divs have to be also floating?
Is this a bug in my site or in old IE? In other words -- do all inner divs have to be also floating?
no I'd say OLD IE, it is hasLayout (don't Google it too much!) basically the "shrink to fit" behaviour of float doesn't work properly when hasLayout is also triggered in IE (height will do that)
if you'd set a width for your outer float then you would be fine without floating your inner div
"Must have a width on floats" was also the old directive before CSS2 - for ALL browsers, floats had to have a width so the problem was not so noticeable, the new directive of "Shrink to Fit, if no width supplied" works well x-browser except IE6 and below which usually still needs it, especially as the "float" property itself actually triggers hasLayout=true too
HTH
PS: there's no harm in "Floating Nearly Everything" it is a good way to get things working x-browser and containing floats without singling out IE6-
[edited by: SuzyUK at 10:04 pm (utc) on June 4, 2009]
