Recently (27th October) Urs made some changes to the .clearfix CSS in the standard theme to make it work with IE7.
In the standard theme, this CSS seems to work.
In our OU brand theme, which is the standard theme with a few customisations none of which should interact with .clearfix, the place where students are supposed to enter their answers to quiz questions are not appearing. (There may be other breakage too, I don't know.)
Deleting the 'overflow: hidden;' from the .clearfix rule fixes this aspect of our theme in IE6, but I am worried that it might break something else, or break other browsers.
So I was hoping Urs could explain what the overflow: hidden; is for. Thanks.
P.S. I have to say, the whole clearfix thing is seriously wierd voodoo.
Actually, a slightly better fix is
Index: styles_layout.css
===================================================================
RCS file: /cvsroot/moodle/moodle/theme/standard/styles_layout.css,v
retrieving revision 1.258
diff -u -r1.258 styles_layout.css
--- styles_layout.css 16 Nov 2006 02:27:00 -0000 1.258
+++ styles_layout.css 22 Nov 2006 12:52:28 -0000
@@ -86,8 +86,13 @@
/* .clearfix {display: inline-table;} */
/* Hides from IE-mac \*/
-* html .clearfix {height: 1%;}
-.clearfix {display: block;}
+* html .clearfix {
+ height: 1%;
+ overflow: visible;
+}
+.clearfix {
+ display: block;
+}
/* End hide from IE-mac */
.mdl-align {
That way changing overflow hidden to overflow visible only happens in IE6, which is much less likely to break other stuff. Shall I check this in to Moodle core?
Hi Tim,
please wait with any changes until I have answered in detail. In the very moment I do not have the time to explain what I know about "clearfix" and to check which changes will be possible. When all goes well you will see my answer tomorrow.
The overflow property is for IE7, so putting it into a IE6 only part will not help. But probably overflow:hidden may be replaced by another property.
Thanks
Urs
Well, the above patch is getting deployed to the live OU servers first thing tomorrow morning, and that date is beyond my control, but I'll hold off committing to moodle.org CVS until I have your answer.
I am sure the overflow: hidden is necessary for IE7, the problem is that it breaks IE6 in some situations that I cannot precisely define. That is why my change leaves the overflow: hidden in place for IE7, but then overrides it with overflow:visible for IE6.
That seemed like the safest change I could make given the amout of time I had available and the fact that if I did nothing, quizzes were completely broken in IE6 with our theme.
I am sure the overflow: hidden is necessary for IE7, the problem is that it breaks IE6 in some situations that I cannot precisely define. That is why my change leaves the overflow: hidden in place for IE7, but then overrides it with overflow:visible for IE6.
That seemed like the safest change I could make given the amout of time I had available and the fact that if I did nothing, quizzes were completely broken in IE6 with our theme.
Tim,
you are right, this collapsing divs stuff is quite complex. You may read the article EasyClearing, the Aslett/PIE way is NOT broken in IE7! which I found while searching for an ".clearfix" correction for IE7. In the original article How To Clear Floats Without Structural Markup you may be interested too.
The "EasyClearing" article suggests to use "display: inline-block". Moodle Themes still do not render correct in IE7 with this change. I added "overflow: hidden" and "min-wdith: 0;" which worked. Both properties are mentioned in several articles to trigger the IE "hasLayout" state to avoid collapsing divs. As usual there where different suggestions about the best way. I decided to use both.
Then I noticed like you issues with hidden page parts and commented the "overflow: hidden" line out. To check if problems come up I changed the CSS in Moodle 1.7 locally. I did not see any problems during my theme work. After checking everything again this evening I committed changes to 1.6 and 1.7.
Please check if this changes work with your theme too.
Urs
Thanks for the explanation, and let you know whether it works in our theme.