Module Class suffix working fine with IE but not with Firefox

hornos · 28.12.2004, 18:45

I have very few CSS skills so maybe you will find some exotic coding

Feel free to comment and correct (

)

Class suffix are definitely a great feature and perfectly fit my needs: different design for left and right columns. So I was glad to make it work with IE but quite disappointed when I checked with Firefox. The problem is with the right column.

Here is the URL:
http://www.mambonewbies.com
Main language is french but the whole site should be translated by the end of January. If you're interested in joining the translators team (french skills required), feel free to contact me

Here is the code:

Code:

/* Common settings */

BODY {
  margin           : 0px;
  padding          : 0px;
  background-color : #ffffff;
  color            : #000000;
}

td, tr, p, div {
  font-family      : Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
  font-size        : 11px;
  color            : #000000;
}

hr {
  background       : #C0C0C0;
  height           : 1px;
  width            : 95%;
}


/* Pathway */

.pathway {
  color            : #0a4068;
}

a.pathway:link, a.pathway:visited {
  color            : #0a4068;
  font-weight      : normal;
}

a.pathway:hover {
  color            : #FD8C00;
  font-weight      : normal;
}

/* Main menu & Sub-menu */
a.mainlevel:link, a.mainlevel:visited {
padding: 0px 5px;
margin: 0px;
display: block;
border: 1px solid #0a4068;
color            : #ffffff;
font-weight      : normal;
background-color: #1C608F;
}

a.mainlevel:hover {
padding: 0px 5px;
margin: 0px;
display: block;
border: 1px solid #0a4068;
color            : #ffffff !important;
font-weight      : normal;
background-color: #0a4068;
}

a.mainlevel-nav:link, a.mainlevel-nav:visited {
color            : #ffffff;
font-weight      : normal;
}

a.mainlevel-nav:hover {
color            : #ffcc00;
text-decoration  : none;
font-weight      : normal;
}

a.mainlevel-footer:link, a.mainlevel-footer:visited {
color            : #0a4068;
font-weight      : normal;
}

a.mainlevel-footer:hover {
color            : #FD8C00;
text-decoration  : none;
font-weight      : normal;
}

#active_menu {
color            : #FFCC00;
text-decoration  : none;
}


a.sublevel:link, a.sublevel:visited {
padding: 0px 5px;
margin: 0px;
display: block;
color            : #ffffff;
font-weight      : normal;
}

a.sublevel:hover {
padding: 0px 5px;
margin: 0px;
display: block;
color            : #ffffff !important;
font-weight      : normal;
background-color: #0a4068;
}

/* Common module settings */
table.border {
border: 1px solid #0a4068;
}

table.moduletable {
  width            : 95%;
  margin-left: 5px;
  margin-top: 10px;
  margin-bottom: 0px;
}

table.moduletable th {
  font-size        : 11px;
  font-weight      : bold;
  color            : #ffffff;
  width				 : 95%;
  text-align       : center;
  letter-spacing   : 2px;
  border-bottom:1px solid #FFFFFF;
}

table.moduletable td {
	text-align:left;
	color: #FFFFFF !important;
	padding: 2px 2px 0px 2px;
}

/* Module settings for Newsflash - used with NEWSFLASH class suffix */
table.moduletablenewsflash {
  width            : 100% !important;
  border-bottom    : 1px dashed #0a4068;
  margin-bottom: 10px;
}

table.moduletablenewsflash th {
  border-bottom    : 1px dashed #0a4068;
  font-size        : 14px;
  font-weight      : bold;
  color            : #FD8C00;
  width            : 100% !important;
  text-align       : center;
  letter-spacing   : 2px;
}

table.moduletablenewsflash td {
  font-size        : 11px;
  color            : #0a4068 !important;
  text-align       : justify;
}

/* Module settings for left column - Called in index.php */
.moduleleft {
	background: #2172AB;
	width: 228px;
	padding: 5px 0 0 0;
	margin-bottom: 30px;
   vertical-align: top;
}
.moduleleft a:link, .moduleleft a:visited {
	color:#FFFFFF;
}
.moduleleft a:hover {
	color:#FD8C00;
}

/* Module settings for right column - Used with RIGHT class suffix */
table.moduletableright {
  width            : 95%;
  margin-left: 5px;
  margin-top: 10px;
  margin-bottom: 0px;
}

table.moduletableright th {
  font-size        : 11px;
  font-weight      : bold;
  color            : #2172AB;
  width				 : 95%;
  text-align       : center;
  letter-spacing   : 2px;
  border-bottom:1px solid #2172AB;
}

table.moduletableright td {
	text-align:left;
	color: #000000 !important;
	padding: 2px 2px 0px 2px;
}

/* Module settings for right column - Called in index.php */
.moduleright {
	background: #eeeeee;
	width: 208px;
	padding: 5px 0 0 0;
	margin-bottom: 30px;
	vertical-align: top;
}
.moduleright a:link, .moduleright a:visited {
	color:#2172AB;
}
.moduleright a:hover {
	color:#FD8C00;
}

/* Module settings for Polls */
.pollstableborder {
width: 95%;
border: 1px solid #dddddd;
}

/* Section settings */
.sectiontableheader {
  background-color : #0a4068;
  color            : #FFFFFF;
  height           : 20px;
  font-weight      : bold;
  text-align: center;
  letter-spacing   : 1px;
}

.sectiontableentry1 {
  background-color : #FFFFFF;
}

.sectiontableentry2 {
  background-color : #E0E0E0;
}

/* Small font settings */

.small {
  font-family      : Verdana, Arial, Helvetica, sans-serif;
  font-size        : 9px;
  color            : #2172AB;
  text-decoration  : none;
  font-weight      : normal;
}

.smalldark {
  font-family      : Verdana, Arial, Helvetica, sans-serif;
  font-size        : 9px;
  color            : #002850;
  text-decoration  : none;
  font-weight      : normal;
}

.createdate {
  font-family      : Verdana, Arial, Helvetica, sans-serif;
  font-size        : 10px;
  color            : #999999;
  text-align       : left;
  	border-bottom: 1px dashed #CCCCCC;
}

.modifydate {
  font-family      : Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #999999;
	border-top: 1px dashed #CCCCCC;
	margin-top:5px;
}

.readon {
font-weight:bold;
  font-size        : 10px;
}

/* Content page settings */

.contentpane {
  text-align       : justify;
  background       : #FFFFFF;
  padding-left     : 5px;
  padding-right    : 5px;
}

.contentpaneopen {
  text-align       : justify;
  background       : #FFFFFF;
  padding-left     : 5px;
  padding-right    : 5px;
}

.contentheading, .componentheading {
  font-family      : Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
  font-size        : 18px;
  font-weight      : bold;
  color            : #2172AB;
  letter-spacing	 : 1px;
  text-align       : left;
  padding-left     : 5px;
  padding-right    : 5px;
  border-bottom: 1px solid #2172AB;
}

/* Content navigation */
.toclink {
	margin:1px;
}

a.toclink:link, a.toclink:visited {
  line-height: 15px;
  padding-left: 10px;
  padding-top: 0px;
  background-image: url(../images/arrow.png) ;
  background-repeat: no-repeat;
  background-position: 0px 3px;
  }
  
table.contenttoc {
  border-left: 1px solid #0a4068;
  border-right: 1px solid #0a4068;
  border-bottom: 1px solid #0a4068;
  margin: 2px 2px 2px 2px;
}
table.contenttoc th {
	background-color: #0a4068;
	color: #FFFFFF;
	font-size: 10px;
	padding: 0 2px 0 2px;
}
table.contenttoc td {
	padding: 0px;
	text-align: left;
	font-size: 10px;
}

.pagenavcounter {
	color: #999999;
	font-size: 10px;
	font-style: italic;
}
.pagenav {
	text-align: center;
	font-size: 11px;
	font-weight: bold;
}
.pagenavbar {
	padding: 5px;
	text-align:center;
}


/* Lists settings */
ul {
  margin: 10px;
  padding: 0;
  list-style: none;
}

li {
  line-height: 15px;
  padding-left: 15px;
  padding-top: 0px;
  background-image: url(../images/arrow.png) ;
  background-repeat: no-repeat;
  background-position: 0px 3px;
}

/* Form settings */
.button {
  font-family      : Arial, Helvetica, sans-serif;
  font-style       : normal;
  font-size        : 12px;
  color            : #000000;
  border           : 1px solid;
}

.inputbox {
  font-family      : Arial, Helvetica, sans-serif;
  font-size        : 12px;
  color            : #000000;
  background       : #FFFFFF;
  border           : 1px solid;
}

/* Links settings */
a:link, a:visited {
  font-size        : 11px;
  font-weight	   : bold;
  color            : #2172AB;
  text-decoration  : none;
  font-family      : Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
}

a:hover {
  color            : #FD8C00;
  font-weight	   : bold;
  text-decoration  : none;
}

a.category:link, a.category:visited {
  color            : #2172AB;
  font-weight      : bold;
  letter-spacing   : 1px;
}

a.category:hover {
  color            : #FD8C00;
}

jomaco1 · 28.12.2004, 19:05

What exactly are you entering in the parameters/module class suffix field?

hornos · 28.12.2004, 20:17

I just put the RIGHT suffix for each module located in the right position

jomaco1 · 28.12.2004, 20:42

Try "right" in the suffix field instead of "RIGHT".

hornos · 28.12.2004, 21:25

Funny no? You're in Muskegon, I'm in Paris and we had the same idea at almost the same moment

It did work thanks

Maybe it would be useful to mention somewhere that class suffixes are case sensitive... with Firefox!!

jomaco1 · 28.12.2004, 21:27

I decided to go through life assuming EVERYTHING is case sensitive!

hornos · 28.12.2004, 22:39

You are damned right

kachete · 10.02.2005, 22:15

Hi

How about telling us how to use the prefix in the mambo

I try and it dont work

Are there a list or tutorial in how to put ir to work or a list of parameters to use or css to improve

Please some tips here PLEASE

Best Regards

hornos · 10.02.2005, 22:22

Check this tutorial Kachete:
http://www.yatienesweb.com/content/view/12/2/

Y qué te vaya bien