Problems with theme in IE

Problems with theme in IE

by Charles Bowser -
Number of replies: 17
I just upgraded from 1.8.5 to 1.9.1+. I am using custom corners and I really like it. The problem is that it won't display correctly in IE7. I haven't tried IE6 as I don't have a copy of that installed on a machine handy. It displays great in firefox. The problem with the display is that it seems to compress certain blocks like the calendar. It won't display everything that's in a block. The site is

www.northernpottersd.org

Thanks for any help.
Average of ratings: -
In reply to Charles Bowser

Re: Problems with theme in IE

by Matt Gibson -
First thing is to check that you have $theme->metainclude = true; set in the config.php file of the custom corners folder. Without it, the ie7-specific fixes don't get applied.

Assuming you do, the next thing to try would be to disable and re-enable various blocks and labels to see if one of them is causing a problem. I've had this in the past, especially regarding widths of images either in the center column causing the blocks to be squeezed, or in the blocks column causing the center column to be squeezed.

I've not got IE7 to test on right now (why does anyone use it when they can have firefox?? smile), but will have a look when I get home.
In reply to Matt Gibson

Re: Problems with theme in IE

by Steve Killer -
I have a similar issue: see http://moodle.org/mod/forum/discuss.php?d=98055#p433068.
I put $theme->metainclude = true; in .../standardwhite/config.php, all the icons disappeared but the blocks remained stubbornly narrow.

Also Greg Rodenhiser has a similar problem: see http://moodle.org/mod/forum/discuss.php?d=68296#p433877.
I wonder how many others are suffering.

(If it helps, I agree with your feelings, Matt, about Firefox.approve)
In reply to Steve Killer

Re: Problems with theme in IE

by Charles Bowser -
I'm glad it's not just me. And if you look at my site I have a "Best viewed with Mozilla Firefox" on the front. I'm a died in the wool mozilla fan. I can't wait for the new version of Thunderbird. It's just that I want my site to look right in both.

When my schools site was under the control of someone else I complained that the site didn't display right. Now that it's me doing it I need to find a fix. I understand code, basically, I've done Fortran, Basic and two flavors of assembler but that was a long time ago. I know I need to learn php and how to write css but what I need to start is a better understanding of how the different modules and css's fit together. For example, how do the hierarchies work? How far down the line of the parent sheets do I need to go to get the result that I want? Also, I need to understand the variables better and how they fit in the database.
In reply to Charles Bowser

Re: Problems with theme in IE

by Matt Gibson -
Hierarchies work by all elements within a larger one inheriting the parent's properties unless there is a more specific tag. Much like Moodle's roles and permissions system. The difficult bit is working out which parent element had a particular property in the first place. Easiest thing is just to make a new declaration at the end of the css file.

Have you got the web developer extension installed in Firefox? CTRL-SHIFT-Y will show you the css affecting any element you click on, whilst CTRL-SHIFT-F will show you its child and ancestor elements. Very useful for theme detective work.
In reply to Matt Gibson

Re: Problems with theme in IE

by Steve Killer -
MSIE 7 doesn't render Moodle sideblocks properly: see my earlier whinge.
The font-family:Arial, Verdana, Helvetica, sans-serif looks like a jumble of old letters, roughly spaced and the characters themselves seem ill-proportioned.
Now my course.gif buttons aren't being rendered at all: a timeout issue? Is Moodle too complicated for Microsoft?big grin

Meanwhile FF2 and - just downloaded - FF3 look luvver-ley.

I'm now putting a link on the site for users to download FF3. Perhaps we should declare FF3 the Industry Standard and run a competition to consider what we do with IE7.

Matt: how did your IE7 test work out?

More in sorrow, than in anger...
Steve K


We're using theme standardwhite to which we've made three wheensy changes on 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.
In reply to Steve Killer

Re: Problems with theme in IE

by Chris Collman -
Hi,
Forum search pays off, took me 20 minutes to find this. I was looking for right-column. It is not me then, minor horray, minor boo/hiss/whistle because the "use firefox" does not seem right. What about those IE6 and IE7 css files?

The short version: Almost novice in CSS - themes. Testing 1.9 on a localhost because of problem on production server. In IE noticed our block on right did not expand to fit table. View source seems says IE limits the block to 180 while the table/column was 325px. Real obvious because I have a border. I tried 4 of the standard themes, all had the same issue in IE but not Firefox.

Another work around is to set all the picts to no more than 180px wide in the sideblock. Also a minor boo/hiss/whistle. Then it sort of behaves itself in IE, but I am squinting in Firefox.

Where is this 180px code? certainly not in layout.css . I see the same bit of code in Firefox in view source but it does not have an impact. Is this in some PHP file? Why do I suspect a bit of old code left over from 1.4 or pre-CSS smile Having same issue in a course an on the front page (also a course I think) so I think I will check out some of the view.php files just for giggles.

Best Chris
In reply to Chris Collman

Re: Problems with theme in IE

by Mauno Korpelainen -

    // Bounds for block widths
    // more flexible for theme designers taken from theme config.php
    $lmin = (empty($THEME->block_l_min_width)) ? 100 : $THEME->block_l_min_width;
    $lmax = (empty($THEME->block_l_max_width)) ? 210 : $THEME->block_l_max_width;
    $rmin = (empty($THEME->block_r_min_width)) ? 100 : $THEME->block_r_min_width;
    $rmax = (empty($THEME->block_r_max_width)) ? 210 : $THEME->block_r_max_width;

in index.php (main index file of moodle) defines max_width for blocks to be 210px (- paddings and margins)

You can change these values in any theme config.php - http://moodle.org/mod/forum/discuss.php?d=100303#p443500

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

In reply to Chris Collman

Re: Problems with theme in IE

by Chris Collman -
Hi Sports Fans !
"After the incident with the bottomless pit (IE&)," I discovered something.

I added a width statement to the IE7.css file . Bascically I copied the Blocks section in the Standard theme, layout.css into the IE7 file.
/***
*** Blocks
***/
.sideblock, .sideblock .header, .sideblock .content {
border-width: 1px;
width: 200px

}
This created a 200px wide right and left sideblock column.

Yeah not what I want but it is the start.

Who really knows what they are doing. What is the statement that expands the width of the sideblock to match the picture image (if inserted).?

Best Chris
In reply to Chris Collman

Re: Problems with theme in IE

by Mauno Korpelainen -
Chris,

you can use both custom css ( also max-width and min-width ) and scripts (for example in index.php) to give the limits for block width but can't use css to check the width of images inside block content - it would require some kind of an onload javascript (or some other script). Usually it is just easier to use such images that fit to side blocks and let the block width to be stable (or change the block width with theme config.php or custom css to be wide enough)

Try for example adding

.sideblock, .sideblock .header, .sideblock .content {
border-width: 1px;
width: 200px;
max-width: 300px
}

Then 200px is the "normal block width" but the width can change up to 300px if images do not fit to 200px width. Still you need to change values for $lmax and $rmax too (or they remain in default 210px of index.php - or the values of theme config.php).
Average of ratings: Useful (1)
In reply to Mauno Korpelainen

Re: Problems with theme in IE

by Chris Collman -
Thank you both Steve and Mauno,
Once I get it straight in my head, I will play around with MoodleDocs. I think we need a Themes in IE page (or two or ten) with lots of tips and tricks smile

I sort of determined by playing with things that the easy solution was to use the same size image in a block. I was going by the assumption that once I figured out the IE issue, then whatever worked in IE would be the standard for our more friendly Firefox.

Again, I appreciate your help. Chris

In reply to Charles Bowser

Tárgy: Problems with theme in IE

by Császár-Cs. Péter -

I use custom_corners in IE7 and Firefox 3.0.1. The theme is ok, but if I go to admin page the fonts and "spaces" get bigger  (IE and Firefox). How can I fix it?

Thx.

Attachment custom0.png
In reply to Charles Bowser

Re: Problems with theme in IE

by Fahmy Babjee -

I know this topic is almost a year old but I understand some of the frustration working with Custom Corners!

I've had to tweak a lot of the styles and fonts with the original for my production site.

In the end after months of fiddling with the settings, I finally managed to make it look at least presentable.  I also borrowed some ideas from the moodle.org theme and copied some settings from Formal White.

You can take a look at our school's e-learning portal here: http://manjusri.learnfusion.com/midas

If anyone is interested, I'd be happy to share the theme with you.

In reply to Fahmy Babjee

Re: Problems with theme in IE

by Tony Dopun -
Fahmy,

That would be great! I would really appreciate it. I'm really curious to see exactly how you got it working the way you did.

Thanks again.

Tony
In reply to Tony Dopun

Re: Problems with theme in IE

by Fahmy Babjee -

Here you go. http://www.mediafire.com/file/xqmgmymjw4l/midascorners.zip

Perhaps you could apply this theme to your site. I'm curious to see how it looks elsewhere. smile

Incidentally, from experience working with custom corners, I usually have to specifically resize the image (using photoshop) to 400 pixels width for the banners, etc. This is especially true for banners placed in the middle section (click on Activities on my production site http://manjusri.learnfusion.com/midas and you'll see what I mean). Anything larger than 400 pixels messes up the blocks.

For the sideblocks, I usually use images of size 120 pixels or sometimes even 100. Again anything larger than that messes up the width of the main block or the sideblocks. You'll have to experiment with different widths to see which one looks best.

I didn't actually force any custom width settings in config.php. I left them alone.

In reply to Fahmy Babjee

Re: Problems with theme in IE

by Emmanuel Abao -

Hi I'm a newbie here, I have a problem with themes on the moodle website that I just setup ( www.sarafandacademy.com/moodle ). All the themes doesn't show properly on Internet Explorer but it work's perfectly with firefox.

Anybody's help will be highly appreciated. Thank you.