Moodle in English: Alert: Change in 1.5 Sideblocks: TABLE -> DIVS

Alert: Change in 1.5 Sideblocks: TABLE -> DIVS

Martin Dougiamas - 2005年05月10日星期二 16:39

There has been a last minute change to the way sideblocks are drawn (thanks PJ!

), in an attempt to improve the block width problems on IE (see http://moodle.org/mod/forum/discuss.php?d=23305 and bug 1718)

Before today blocks were each produced as a table with two cells, one above the other. Now they are a div that contains two smaller divs.

None of the container names have changed - the outer one is still "sideblock", containing "header" and "content".

However, depending on assumptions you have made in your theme you may find some breakage occurring when you next update Moodle 1.5 dev.

Sorry about the last-minute hassle, but better now than after 1.5 is released!

平均分： -

Re: Alert: Change in 1.5 Sideblocks: TABLE -> DIVS

Urs Hunkler - 2005年05月10日星期二 16:54

I could get my theme working again with two small changes:

The header color showed up again by defining a height:

.sideblock .header {
 height:2em;
 ...
}

The sideblock content went back into the sideblock (sitting beside it after the changes of the sideblock structure) by adding clear:both:

.sideblock .content {
 clear:both;
 ...
}

I hope it's of some help.

[Urs CSS]

平均分：Useful (1)

Re: Alert: Change in 1.5 Sideblocks: TABLE -> DIVS

John Papaioannou - 2005年05月11日星期三 00:59

Urs, if you take a close look you will see that in the process I simplified the floating element structure somewhat. Specifically, since the collapse +/- icon and the move/delete/config icons were being displayed as an ugly mess when editing on, I moved the m/d/c icons in a separate row.

Also, the header doesn't float anymore, which means that there's no need to clear any elements also. And the "collapsed header" issue (which forced you to give it an explicit height) probably means that in your theme, some elements are still floated (if you mean orangewhite, then I can see they are indeed).

Just remove all the floating except for this:

.sideblock .header .hide-show {
float:right;
}

and it should be fine, as it is in standard.

平均分：Useful (1)

Re: Alert: Change in 1.5 Sideblocks: TABLE -> DIVS

Urs Hunkler - 2005年05月11日星期三 02:00

Hi Jon,

thanks for the details. I'll give the sideblocks a second look.

Urs

平均分：Useful (1)

Re: Alert: Change in 1.5 Sideblocks: TABLE -> DIVS

Vu Hung - 2005年05月10日星期二 16:57

That's great. Now block's width problem is solved. But is there a small problem with the border of the block? Please look at the right border.

平均分： -

Re: Alert: Change in 1.5 Sideblocks: TABLE -> DIVS

Martin Dougiamas - 2005年05月10日星期二 17:10

I'm not seeing that ... make sure you reload the stylesheets by holding down the Control key while you click Refresh.

平均分： -

Re: Alert: Change in 1.5 Sideblocks: TABLE -> DIVS

Vu Hung - 2005年05月10日星期二 17:23

I make sure that I refreshed the pages many times. One more picture:

平均分： -

Re: Alert: Change in 1.5 Sideblocks: TABLE -> DIVS

Martin Dougiamas - 2005年05月10日星期二 17:28

Hmmmm, wierd, you are missing shading and borders too ... this is how it looks for me in IE 6.

平均分： -

Re: Alert: Change in 1.5 Sideblocks: TABLE -> DIVS

Vu Hung - 2005年05月11日星期三 01:15

I tested with IE6s of Windows XP Pro and Windows 2003 enterprise. But they all have the same problem with borders and shading. IE is very strange, isn't it?

平均分： -

Re: Alert: Change in 1.5 Sideblocks: TABLE -> DIVS

Vu Hung - 2005年05月11日星期三 16:20

Hi Martin,

Did you test Moodle with IE6 on another operating system, not Windows. Your screen is so different from mine .

平均分： -

Re: Alert: Change in 1.5 Sideblocks: TABLE -> DIVS

Martin Dougiamas - 2005年05月11日星期三 20:36

IE6 only runs on Windows. I just use a Mac OS X theme in Windows to make the windows look and work better, but this doesn't affect how IE renders web pages. So I assume you still have this problem?

I can't explain it.

Incidentally I noticed in these screenshots how bad the login box looked, and fixed that today.

平均分： -

Re: Alert: Change in 1.5 Sideblocks: TABLE -> DIVS

Vu Hung - 2005年05月11日星期三 21:24

Not only me, others saw that problem too.

Did you read the post: http://moodle.org/mod/forum/discuss.php?d=23566? wink

平均分： -

Re: Alert: Change in 1.5 Sideblocks: TABLE -> DIVS

Martin Dougiamas - 2005年05月11日星期三 22:39

OK, what about others using IE?

We really need some solutions for this from someone! (I can't solve it because it works for me)

平均分： -

Re: Alert: Change in 1.5 Sideblocks: TABLE -> DIVS

Jeffery Watkins - 2005年05月11日星期三 23:11

My site was looking ok in IE also.

http://www.classroomrevolution.com/moodle15/moodle

Jeff

平均分： -

Re: Alert: Change in 1.5 Sideblocks: TABLE -> DIVS

Vu Hung - 2005年05月12日星期四 03:01

Hi Jeff,

My Moodle 1.5 courses are Ok under IE6. I mean when you use IE6 and connect to http://moodle.org, then see if there's the same problem as above. We have just changed some code of moodle.org recently to fix the block's width problem.

Cheers,

Vu Hung

平均分： -

Re: Alert: Change in 1.5 Sideblocks: TABLE -> DIVS

Shane Elliott - 2005年05月12日星期四 07:46

Working for me with IE6 ... although as always it just feels better with Firefox wink

平均分： -

Re: Alert: Change in 1.5 Sideblocks: TABLE -> DIVS

Ferdy Lim - 2005年05月12日星期四 11:56

Yes I found the same problem with Vu Hung as below:

平均分： -

Re: Alert: Change in 1.5 Sideblocks: TABLE -> DIVS

Martin Dougiamas - 2005年05月12日星期四 13:50

I asked Ferdy to clear his cache completely and it worked for him. Vu, can you try it?

IE: Tools -> Options -> Temporary files -> Delete files

Holding down Control key while pressing refresh should have worked too (it does for me) but IE is notorious for buggy and overzealous caching.

平均分： -

Re: Alert: Change in 1.5 Sideblocks: TABLE -> DIVS

Vu Hung - 2005年05月12日星期四 14:23

>>IE: Tools -> Options -> Temporary files -> Delete files

That's a great tip, Martin. Now, it worked for me. In my mind, refreshing is enough (as my own experiences). So what's actually wrong with IE? Could somebody explain this?

Martin, should we put this tip in FAQ?

Cheers,

Vu Hung

平均分： -

Re: Alert: Change in 1.5 Sideblocks: TABLE -> DIVS

Martin Dougiamas - 2005年05月12日星期四 14:29

Your browser was keeping and using old copies of the moodle.org stylesheets rather than using the current ones that match the new HTML produced.

平均分： -

Re: Alert: Change in 1.5 Sideblocks: TABLE -> DIVS

Ferdy Lim - 2005年05月12日星期四 14:52

Yes It's fixed!

平均分： -

Re: Alert: Change in 1.5 Sideblocks: TABLE -> DIVS

John Papaioannou - 2005年05月12日星期四 19:10

Who would have thought... and I was wracking my brain for what might be going on!

Where do they accept applications for the "I love IE" club? tongueout

Incidentally, I 'm working on some JavaScript that runs once after the page loads and fixes the problem of non-uniform block sizes for IE. Not 100% robust yet though.

平均分： -

Re: Alert: Change in 1.5 Sideblocks: TABLE -> DIVS

Urs Hunkler - 2005年05月12日星期四 20:16

Jon, are you going to programm the firefox add-on for IE?

Urs

平均分： -

Re: Alert: Change in 1.5 Sideblocks: TABLE -> DIVS

John Papaioannou - 2005年05月12日星期四 23:32

No, I 'll just settle for a few neat JS tricks. wink

Speaking of which, it's in CVS now. When moodle.org or test.moodle.com get updated we can test it with lots and lots of IE users.

平均分： -

Re: Alert: Change in 1.5 Sideblocks: TABLE -> DIVS

Martin Dougiamas - 2005年05月13日星期五 00:37

.... I think I'd rather have IE looking slightly off (actually I thought the last changes had them pretty good) than running Javascript on every page.

That said it's here and doesn't seem to be breaking anything!

平均分： -

Re: Alert: Change in 1.5 Sideblocks: TABLE -> DIVS

John Papaioannou - 2005年05月13日星期五 04:56

I 'm OK with pulling it out; I 'm not going to visit any page for my viewing pleasure using IE for sure. wink

The reasoning behind this though was as follows:

We can do absolutely nothing to have the problem fixed in IE while at the same time keeping a pixel-specified width for the side columns. If it's one thing I 'm convinced of, it's this.
Without the "hack", teachers (or even students, when My Moodle starts allowing them to add blocks by themselves?) are mathematically sure to at some point add an overwide image. And they won't all be tech-savvy.
Result: "Moodle's fault". I 'm talking about people who won't know that there is an alternative to IE (and wouldn't care even if they knew). Why not keep them blissfully unaware of what's going on until IE 7 comes out with an improved rendering engine (dream on...) and the whole universe upgrades?
Finally, anyone who is savvy enough to actually see what's going on behind the scenes will definitely nod instead of complaining.

That said, if you believe it's doing harm I 'm still OK with pulling it out. I was just having one of my "haven't said my last word yet" fits. tongueout

On a related note, while hacking away I noticed that it's very hard for someone who wants to modify the core to insert something in body onload="". So hard that I didn't do it that way.

In fact, not only you have to have control over all calls to print_header (which you may not have, as in this case) but also a quick inspection left me with the impression that if you do insert something and at the same time use the auto-focus feature, the result will be exactly equal to one Javascript error at worst (and your onload will not simply not work at best).

We can do two things to remedy this:

Pre-emptively have onload call a predefined function anyway, in addition to anything else. This will at least allow people who want to insert their own Javascript an easy entry point (just add your code to the empty by default function).
Build a better system for adding onload stuff. And an easier way to specify the attributes of <body> incrementally while we 're at it. The $PAGE object would be good for this, and we don't need to refactor the world. Just build the support into page_base and then slowly move things that way while working on Moodle 1.6.

This came out quite long, didn't it? wide eyes

平均分： -

Re: Alert: Change in 1.5 Sideblocks: TABLE -> DIVS

Petr Skoda - 2005年05月13日星期五 05:22

I have been fighting onload too when messing with the chat module

This problem seems similar to "global $course" hack used for setting up of course language. As I said before somewhere I would like to see a new init() function called in each script before first text output - we could setup course language, themes and other ugly hacks (== browser workarounds) there.

skodak

平均分： -

Re: Alert: Change in 1.5 Sideblocks: TABLE -> DIVS

Martin Dougiamas - 2005年05月13日星期五 10:30

No specific complaints from me! Just my generic aversion to complexity caused by repeated exposure to unexpected support problems.

I'm totally OK with keeping this hack - it seems to be working very well so far and it *is* a neat trick.

And yes, you know I totally agree with moving everything over to the $PAGE class over time.

平均分： -

Re: Alert: Change in 1.5 Sideblocks: TABLE -> DIVS

T K - 2005年05月13日星期五 14:54

Hello,

see Posting above (from Jon):
Today I've found a solution for non-uniform blocksizes and other MSIE-CSS-Problems

See MSIE 7: http://dean.edwards.name/IE7/overview

I'm going to test it. May be, its a good idea, to integrate this into moodle.

Tobias

平均分：Useful (1)

Re: Alert: Change in 1.5 Sideblocks: TABLE -> DIVS

Jeffery Watkins - 2005年05月10日星期二 20:49

I am having this problem with all of my themes, including the Standard.

Any ideas?

Jeff

平均分： -

Re: Alert: Change in 1.5 Sideblocks: TABLE -> DIVS

Martin Dougiamas - 2005年05月10日星期二 20:56

I think you may not have a completely up-to-date copy of the code - I've messaged you about it.

平均分： -