IE7 Block Rendering

IE7 Block Rendering

by Steve Killer -
Number of replies: 2
Attached is part of a screenprint of our Front Page rendered by IE7.
On IE7, the header is wider than the body: the Block Columns, both Right Hand Side (RHS) and Left Hand Side (LHS) are too narrow. There is a gap between the LHS Block and Middle Columns (not illustrated).
On Firefox, the width is the same all the way down, that is, the Right Hand Side (RHS) edge is straight and consistent and both Block Columns render correctly.

We've played with client Windows Graphics Properties and it makes no difference: IE7 renders the Front Page, Course Menus and other pages differently from Firefox.

We moved all the RHS Blocks (Course/Site Description; Calendar; Messages; Loan Calculator; a Custom HTML block) to the LHS and the RHS Edge then renders correctly. Then moving any one of the original RHS Blocks back causes the RHS indent.

The Course (Topics) pages render nicely on both IE7 and FF.

Has anyone else noticed this? Or is it something unique to us, maybe caused by CSS (Confused Style Sheetsbig grin)?
Or is it IE7????????

We're using Moodle 1.9 + (Build: 20080402) on Linux 2.6.9-67.0.7.ELsmp / Apache 1.3.41 (Unix) / MySQL.0.45-community / php 5.2.5

We use theme standardwhite to which we've made three wheensy changes:
  • replaced the course.gif to a slightly larger graphic;
  • put a <br /> between items on the Topics Menus to display the new graphic nicely; and
  • added CPDonline.css that contains only entries relevant to Topic Resources.
...standardwhite/config.php has the CPDonline.css added thus:
$THEME->sheets = array('gradients','CPDonline');
$THEME->standardsheets = array('styles_layout','styles_fonts','styles_color','styles_moz');

I put a shorter earlier version of this on Moodle "General Problems" forum where someone reasonably suggested it may be the missing </div> or </table> for which I've spent the (UK) long weekend searching.
Any help would be appreciated...
Attachment IE7_Front_Page.jpg
Average of ratings: -
In reply to Steve Killer

Re: IE7 Block Rendering

by Segnaro Harrison -
I don't have an answer but would like to see one. We are experiencing the same problem or nearly so. Our side blocks don't render correctly in IE7, if there is a block that is wider than whatever IE7 says it should be. I'll attach a screen shot of what I mean. I've created an HTML block on the side (doesn't matter if it is on the Left or Right side). The block happens to contain a YouTube video, but I've changed this to just display a static image file with the same results. This video happens to be 325 pixels wide and you can see the results. It cuts it in half, and then leaves a big empty unused space to the right of it (I didn't include the empty space but it is probably around 150 pixels). Firefox displays this page nicely without cutting off the HTML block.
Attachment IE_bad_render.jpg
Average of ratings: -
In reply to Segnaro Harrison

Re: IE7 Block Rendering

by Mauno Korpelainen -

Steve has asked that question elsewhere in theme forum or general problems forum (nearly two years ago) but I will add the answer here as well:

You can control left and right block width with theme config.php or css but using 325 pixels wide side block does not sound a good solution. If you need it on front page you could as well add topic section to the top of page and place that file to topic section.

Administration > Front Page > Front Page settings

http://docs.moodle.org/en/Front_Page_settings#Include_a_topic_section

(turn editing on to be able to edit topic section...)

On course pages you can add labels to the middle section and place the video there.

Docs about changing block width:

http://docs.moodle.org/en/Theme_settings#Sideblock_width

You can't change buggy IE smile

Average of ratings: -