Hi
We are working with our theme to make it compatable with 1.6 along with some improvements in maintenance. Originally it was based on the formal white theme, but we have now used the standard theme as our basis.
We make use of labels to provide information, particularly on our home page. I have noticed however that labels now form a list rather than a table. This has resulted in odd formatting changes (see attached image).
Here are 4 labels, each with the same format:
<h2></h2>
<img style="float:left;" />
<p></p>
FireFox:
In the left screen (1.6) this provides a cascading indented effect in FireFox, whereas in the right screen (1.5) it displays as intended. Using the clear CSS property makes no change.
IE:
Using style="clear:left" on the <h2> element will fix the issue in IE but not FireFox. Without clear IE displays a full-width background bar but indents the text of the <h2> element.
An alternative I have found is to use the image as a non-repeating background to the paragraph and then set the left padding accordingly. I'm not sure how this works with accessibility but as the images are only eye-candy, so to speak, non-visual users gain little from having alternative text for them.
Any advice?
Yours
James
Hi James,
Here is one solution for your problem.
1- in one of your customized theme files (for standard theme, Moodle 1.6) add the following:
#course-view li.activity.label,
#site-index ul.section li.activity.label {
clear:both;
padding-bottom:10px; //may not be needed
}
2. I suppose the HTML coding of the first label (on your site home page) is something like this:
<h2>eCampus:Teach the home of e-Learning at Barking College</h2>
<div style="float: left; height: 100px;">
<img style="margin-right: 10px;" src="Image1.gif" width="100" />
</div><span style="font-weight: bold;">
eCampus:Teach</span> is the portal for online training
etc. administrator James Ballard.
<br /><span style="font-weight: bold;">TESTED FOR 1.6 by Joseph R.</span>
3. Labels are correctly displayed, without any indent, on both FF and MSIE (see screen shot below).
Hope that helps,
Joseph
Hi James,
Did that help?
Joseph
Did that help?
Joseph
Sorry for the delay in replying - I got pulled into other higher priority projects.
I am back on 1.6 testing now and have recreated the error as before. Adding your CSS code to my file solved the problem perfectly.
The margin wasn't needed in my case as it is generated by the images to stop the text looking like a caption at certain resolutions. My name wrapped underneath the image of a guy on his laptop giving the impression it was me.
Thanks for your help.
Yours
James
I am back on 1.6 testing now and have recreated the error as before. Adding your CSS code to my file solved the problem perfectly.
The margin wasn't needed in my case as it is generated by the images to stop the text looking like a caption at certain resolutions. My name wrapped underneath the image of a guy on his laptop giving the impression it was me.
Thanks for your help.
Yours
James