help with IE7 theme

help with IE7 theme

by Paul Harrington -
Number of replies: 7
Can anyone help me make the IE7 version of our homepage look anything like the Firefox version? It worked fine in IE6

I tried editing the theme->block_l_max_width, but it didn't make any difference

FireFox
Firefox


IE7
ie7.jpg


Average of ratings: -
In reply to Paul Harrington

Re: help with IE7 theme

by Jez H -
There is actually a dedicated themes forum:

http://moodle.org/mod/forum/view.php?f=29

If you do not get an answer here (General Problems) try re-posting in that forum instead.
Average of ratings: -
In reply to Paul Harrington

Re: help with IE7 theme

by Mauno Korpelainen -

Paul,

a link to your site could help - I have seen similar cases but it is much easier to give possible solutions if css of site is visible...

Average of ratings: -
In reply to Mauno Korpelainen

Re: help with IE7 theme

by Paul Harrington -
Unfortunately it's an intranet site, so I can't provide direct links

I'll copy the css here the index page links to

Thanks for your help - sorry for posting in the wrong section!

If it helps I'm running Moodle 1.9.3 (Build: 20081015)

Paul

CSS code mentioned in index page

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="http://192.168.101.10/theme/standard/styles.php" />
<link rel="stylesheet" type="text/css" href="http://192.168.101.10/theme/nmni_2/styles.php" />
<meta name="description" content="" />
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="http://192.168.101.10/theme/standard/styles_ie7.css" />
<![endif]-->
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="http://192.168.101.10/theme/standard/styles_ie6.css" />
<![endif]-->

I'll assume you don't need the standard styles.php or .css - so here's the nmni_2/styles.php

/**************************************
 * THEME NAME: nmni_2
 *
 * Files included in this sheet:
 *
 * nmni_2/sl.css
 * nmni_2/gradients.css
 **************************************/

/***** nmni_2/sl.css start *****/

body {
 font-size: 0.82em;
 color: #333333;
 font-family: Verdana, Arial, Helvetica, Geneva, sans-serif;
 background-color: #b7c1c3 ;
 margin: 0;
 padding: 0;
}

#outerwrap {
 background: url(assets/graphics/bg.jpg) repeat-x top #b7c1c3;
 padding-top: 23px;
}

#header-home {
 background: url(assets/graphics/headerbg.jpg) no-repeat top left #4f1794;
}

#header {
 background: url(assets/graphics/headerbg.jpg) no-repeat top left #4f1794;
}

#sldesign {
 float: right;
 padding-right: 20px;
 font-size: 0.8em;
}

#copyright {
 margin-bottom: 23px;
 padding-left: 20px;
 font-size: 0.8em;
}

.navbar {
 border: none;
}

.headermenu {
 margin: 7px 20px 0 20px;
 color: #000000;
 font-size:1.1em;
}

.headermenu a:link {
 color: #4f1794;
 font-size: 1.em;
}

.headermenu a:visited {
 color: #4f1794;
 font-size: 1.1em;
}

.headermenu a:hover {
 text-decoration: underline;
 color: #4f1794;
 font-size: 1.1em;
}

.sideblock .hide-show a {
 border: none
}

h2 {
 font-size: 1.3em;
 color:#4f1794;
}

#page {
 margin: 0 auto;
 width: 967px;
}

#contenttop {
 background: url(assets/graphics/contentbg.jpg) repeat-y top left;

}

#content {
 background-color:#ffffff;
 padding: 20px;
}

#footer {
 background-color:#ffffff;
 margin-top: 0;
 padding-top: 30px;
 padding-bottom: 15px;
 margin-bottom: 10px;
}

#textsize {
 text-align: right;
 font-size: 0.9em;
 margin-top:-3px;
 background:#ffffff;
}

.sideblock {
 font-size: 1.1em;
 border: #003f76;
}

.sideblock .header, .sideblock h2.header {

 font-size: 1.1em;
 color: #ffffff;
 padding: 4px;
}

.sideblock h2 {
 color: #ffffff;
}

.sideblock .header {
 border-color: #4a168b;
 background: url(assets/graphics/sideblock.jpg) no-repeat top left #4f1794;
 color: #ffffff;
}

.sideblock .content {
 border-color: #4a168b;
}

.generalbox {
 border:none;
}

.headingblock, h2.headingblock {
 border:none;
}

.coursebox {
 border: none;
}

.coursebox .summary {
 font-size: 1em;
}

a:link,
a:visited {
 color:#310f5b;
}

a.dimmed:link,
a.dimmed:visited {
 color:#AAAAAA;
}

a:hover {
 color:#43206e;
}

.txtlarge {
 font-size: 1.2em;
}

.txtxlarge {
 font-size: 1.4em;
}

#login-index #content {
 font-size: 1em;
}

.headingblock, h2.headingblock {
 display: none;
}

/* Begin CSS Drop Down Menu */

#bluemenu a:link {
 color: #ffffff;
}

#bluemenu a:hover {
 color: #ffffff;
}

#bluemenu a:visited {
 color: #ffffff;
}

#bluemenu .bluetabs ul a:link {
 color: #ffffff;
}

#bluemenu .bluetabs ul a:hover {
 color: #ffffff;
}

#bluemenu .bluetabs ul a:visited {
 color: #ffffff;
}

.bluetabs{
color: #ffffff;
background: url(assets/graphics/tag.jpg) no-repeat top right #4f1794;
margin-top: -1px;
}

.bluetabs ul{
padding: 6px 0 8px 20px;
margin-left: 0;
margin-top: 0;
margin-bottom: 0;
color: #ffffff;
font: bold 11px Verdana;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}

.bluetabs li{
display: inline;
margin: 0;
padding-right: 4px;
background: url(assets/graphics/navbardivide.gif) top right no-repeat;
color: #ffffff;
}

.bluetabs li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 3px;
color: #ffffff;
white-space: normal;
}

.bluetabs li a:visited{
color: #ffffff;
}

.bluetabs li a:hover{
text-decoration: none;
color: #ffffff;
}

.bluetabs li.selected{
 color: #ffffff;
}

.bluetabs li.selected a{ /*selected main tab style */
color:#ffffff;
text-decoration: none;
}

.bluetabs li.selected a:hover{ /*selected main tab style */
text-decoration: none;
color: #ffffff;
}

.bluetabs li.selected a:visited{ /*selected main tab style */
text-decoration: none;
color: #ffffff;
}

/* ######### Style for Drop Down Menu ######### */

.dropmenudiv_b{
position:absolute;
top: 0;
border: 1px solid #2a035a; /*THEME CHANGE HERE*/
border-width: 0 1px;
font:normal 11px Verdana;
z-index:100;
background: url(assets/graphics/subbg.jpg) repeat-x #4f1794 top right;
width: 200px;
visibility: hidden;
text-align: left;
color: #ffffff;
}


.dropmenudiv_b a{
width: auto;
display: block;
border: 0 solid #2a035a; /*THEME CHANGE HERE*/
border-bottom-width: 1px;
padding: 2px 3px;
text-decoration: none;
color: #ffffff;
}

.dropmenudiv_b a:link {
color: #ffffff;
text-decoration: none;
}

.dropmenudiv_b a:hover {
color: #4f1794;
background: #ffffff;
text-decoration: none;
}

.dropmenudiv_b a:visited {
color: #ffffff;
text-decoration: none;
}

* html .dropmenudiv_b a{ /*IE only hack*/
width: 100%;
}

.dropmenudiv_b a:hover{ /*THEME CHANGE HERE*/
background-color: #ffffff;
color: #4f1794;
}

/* End CSS Drop Down Menu */
/***** nmni_2/sl.css end *****/

/***** nmni_2/gradients.css start *****/

/***** nmni_2/gradients.css end *****/



Average of ratings: -
In reply to Paul Harrington

Re: help with IE7 theme

by Mauno Korpelainen -

Moodle can't zoom images in sideblocks or headers so you need to use such images that fit to given width or IE will cut part of images and FF will widen the content...

Setting sideblock max and min width http://docs.moodle.org/en/Theme_settings#Sideblock_width

does not help in all cases.

You could use css like

.sideblock img{max-width:180px;
}

in your custom theme but it would work in IE and FF could not fix the height according to changed width. Maybe it's just easier to use images that are small enough.

Average of ratings: -
In reply to Mauno Korpelainen

Re: help with IE7 theme

by Paul Harrington -
Thanks for that, I just ended up resizing the images to 160px across, 180px still had clipping.

Can you explain why the calendar box is bigger than the HTML block containing the museum site links?
Average of ratings: -
In reply to Paul Harrington

Re: help with IE7 theme

by Mauno Korpelainen -
(Mini)calendar block has different css tags (fonts, paddings, margins,...) but it is easy to find them from standard theme css files or use plugins like Web Developer in Firefox to show css for different parts of theme...
Average of ratings: -