Chi può aiutarmi sulla visualizzazione corretta del sito in Firefox??

[lorenzol]

Carissimi,
non risco a vedere bene alcune parti del sito in Firefox mentre in IE è perfetto..mi sembra stranissimo..
Mi è stato consigliato da un vostro esperto di ripartire dall'oroginale ma volevo chiedervi se è possibile aggiustare questo facedno al CSS del template le tre modifiche che mi interessano :
1)in firefox non vedo l'immagine nell'header che ho inserito: testa finish.png);
2)i riquadri delle voci del menù principale non si vedono;
3) il colore della tabella del menù principale sconfina di poco a destra verso il riquadro centrale del testo.

Se riuscissi a modificare queste tre cose in modo che si possano vedere correttamente anche in firefox forse mi risparmierebbe il lavorone  di rifare il sito?? Qualcuno può aiutarmi? Riporto qui sotto il CSS

Lorenzo


/* CSS Document */

html {
   height: 100%;
}

body {
   height: 100%;
   margin-bottom: 1px;
}

.clr {
   clear: both;
}

.outline {
  border: 1px solid #cccccc;
  background: #ffffff;
   padding: 2px;
}

#buttons_outer {
   width: 635px;
     margin-bottom: 2px;
   margin-right: 2px;
   float: left;

}

#buttons_inner {
   border: 1px solid #CCCCCC;
   height: 21px !important;
   height: 23px;
}

#pathway_text {
  overflow: hidden;
   display: block;
   height: 25px;
   line-height: 25px !important;
   line-height: 22px;
   padding-left: 4px;
   border: 1px solid #ccc;
   margin-bottom: 2px;
}

#pathway_text img {
   margin-left: 5px;
   margin-right: 5px;
   margin-top: 6px;
}

#buttons {
   float: left;
   margin: 0px;
   padding: 0px;
   width: auto;
}


ul#mainlevel-nav
{
   list-style: none;
   padding: 0;
   margin: 0;
   font-size: 0.8em;
}

ul#mainlevel-nav li
{
   background-image: none;
   padding-left: 0px;
   padding-right: 0px;
   float: left;
   margin: 0;
   font-size: 11px;
   line-height: 21px;
   white-space: nowrap;
   border-right: 1px solid #cccccc;
}

ul#mainlevel-nav li a
{
   display: block;
   padding-left: 15px;
   padding-right: 15px;
   text-decoration: none;
   color: #333333;
   background: transparent;
}

#buttons>ul#mainlevel-nav li a { width: auto; }

   ul#mainlevel-nav li a:hover
{
   color: #fff;
   background: #c64934;
}


#search_outer {
   float: left;
   width: 165px;
}

#search_inner {
  border: 1px solid #cccccc;
   padding: 0px;
  height: 21px !important;
  height: 23px;
  overflow: hidden;
}

#search_inner form {
  padding: 0;
  margin: 0;
}

#search_inner .inputbox {
   border: 0px;
   padding: 3px 3px 3px 5px;
   font-family: arial, helvetica, sans-serif;
   font-size: 11px;
   color: #c64934;
}

#header_outer {
   text-align: left;
   border: 0px;
   margin: 0px;
}

#header {
   float: left;
   padding: 0px;
   margin-right: 2px;
   width: 635px;
   height: 150px;
   background: url(../images/testata finish.png); background-color: #C60000; }

#top_outer{
   float: left;
   width: 165px;
}

#top_inner {
  border: 1px solid #cccccc;
   padding: 2px;
  height: 144px !important;
  height: 150px;
  overflow: hidden;
  float: none !important;
  float: left;
}

#left_outer {
  float: left;
   margin-top: 2px;
   width: 165px;
}

#left_inner {
  border: 1px solid #cccccc;
   padding: 2px;
  float: none !important;
  float: left;
}

#content_outer {
   padding: 0px;
   margin-top: 0px;
   margin-left: 2px;
   /** border: 1px solid #cccccc; **/
   float: left;
   width: 635px;
}

#content_inner{
  float: none !important;
  float: left;
  padding: 0;
  padding-top: 2px;
  margin: 0;
}

table.content_table {
  width: 100%;
   padding: 0px;
   margin: 0px;
}

table.content_table td {
   padding: 0px;
   margin: 0px;
}


#banner_inner {
   float: left;
   padding: 0px;
   height: 70px;
}


#right_outer {
   margin-left: 2px;
   width: 165px;

}

#right_inner {
  float: none !important;
  float: left;
  border: 1px solid #cccccc;
  padding: 2px;

}


.user1_inner {
   border: 1px solid #cccccc;
  float: none !important;
  float: left;
   margin: 0px;
   padding: 2px;
}

.user2_inner {
   border: 1px solid #cccccc;
  float: none !important;
  float: left;
   margin: 0px;
   padding: 2px;
}

table td.body_outer {
   padding: 2px;
   border: 1px solid #cccccc;
}

.maintitle {
   color: #ffffff;
   font-size: 40px;
   padding-left: 15px;
   padding-top: 20px;
}

.error {
  font-style: italic;
  text-transform: uppercase;
  padding: 5px;
  color: #cccccc;
  font-size: 14px;
  font-weight: bold;
}

/** old stuff **/

.back_button {
   float: left;
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  border: 3px double #cccccc;
  width: auto;
  background: url(../images/button_bg.png) repeat-x;
  padding: 0px 10px;
  line-height: 20px;
  margin: 1px;
}

.pagenav {
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  border: 3px double #cccccc;
  width: auto;
  background: url(../images/button_bg.png) repeat-x;
  padding: 0px 10px;
  line-height: 20px;
  margin: 1px;
}

.pagenavbar {
   margin-right: 10px;
   float: right;
}

#footer {
   text-align: center;
   padding: 3px;
}

ul
{
margin: 0;
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 2px;
}


td {
   text-align: left;
   font-size: 11px;
}



body {
   margin: 15px;
   height: 100%;
   padding: 0px;
   font-family: Arial, Helvetica, Sans Serif;
   line-height: 120%;
   font-size: 11px;
   color: #333333;
   background: #F4F4F4;
}

/* Joomla core stuff */
a:link, a:visited {
   color: #c64934; text-decoration: none;
   font-weight: bold;
}

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

table.contentpaneopen {
  width: 100%;
   padding: 0px;
   border-collapse: collapse;
   border-spacing: 0px;
   margin: 0px;
}

table.contentpaneopen td {
   padding-right: 5px;
}

table.contentpaneopen td.componentheading {
   padding-left: 4px;
}



table.contentpane {
  width: 100%;
   padding: 0px;
   border-collapse: collapse;
   border-spacing: 0px;
   margin: 0px;
}

table.contentpane td {
   margin: 0px;
   padding: 0px;
}

table.contentpane td.componentheading {
   padding-left: 4px;
}

table.contentpaneopen fieldset {
   border: 0px;
   border-bottom: 1px solid #eee;
}

.button {
  color: #c64934;
  font-family: Arial, Hevlvetica, sans-serif;
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  border: 3px double #cccccc;
  width: auto;
  background: url(../images/button_bg.png) repeat-x;
  padding: 0px 5px;
  line-height: 18px !important;
  line-height: 16px;
  height: 26px !important;
  height: 24px;
  margin: 1px;
}

.inputbox {
   padding: 2px;
   border:solid 1px #cccccc;
   background-color: #ffffff;
}

.componentheading {
   background: url(../images/subhead_bg.png) repeat-x;
   color: #666666;
   text-align: left;
   padding-top: 4px;
   padding-left: 4px;
   height: 21px;
   font-weight: bold;
   font-size: 10px;
   text-transform: uppercase;

}

.contentcolumn {
   padding-right: 5px;
}

.contentheading {
   height: 30px;

   color: #c64934;
   font-weight: bold;
   font-size: 14px;
   white-space: nowrap;
}



.contentpagetitle {
   font-size: 13px;
   font-weight: bold;
   color: #cccccc;
   text-align:left;
}

table.searchinto {
   width: 100%;
}

table.searchintro td {
   font-weight: bold;
}

table.moduletable {
   width: 100%;
   margin-bottom: 5px;
   padding: 0px;
   border-spacing: 0px;
   border-collapse: collapse;
}

div.moduletable {
   padding: 0;
   margin-bottom: 2px;
}

table.moduletable th, div.moduletable h3 {
   background: url(../images/subhead_bg.png) repeat-x;
   color: #666666;
   text-align: left;
   padding-left: 4px;
   height: 21px;
   line-height: 21px;
   font-weight: bold;
   font-size: 10px;
   text-transform: uppercase;
   margin: 0 0 2px 0;
}

table.moduletable td {
   font-size: 11px;
   padding: 0px;
   margin: 0px;
   font-weight: normal;
}

table.pollstableborder td {
  padding: 2px;
}

.sectiontableheader {
  font-weight: bold;
  background: #f0f0f0;
  padding: 4px;
}

.sectiontablefooter {

}

.sectiontableentry1 {
   background-color : #ffffff;
}

.sectiontableentry2 {
   background-color : #f9f9f9;
}

.small {
   color: #999999;
   font-size: 11px;
}

.createdate {
   height: 15px;
   padding-bottom: 10px;
   color: #999999;
   font-size: 11px;
}

.modifydate {
   height: 15px;
   padding-top: 10px;
   color: #999999;
   font-size: 11px;
}

table.contenttoc {
  border: 1px solid #cccccc;
  padding: 2px;
  margin-left: 2px;
  margin-bottom: 2px;
}

table.contenttoc td {
  padding: 2px;
}

table.contenttoc th {
  background: url(../images/subhead_bg.png) repeat-x;
  color: #666666;
   text-align: left;
   padding-top: 2px;
   padding-left: 4px;
   height: 21px;
   font-weight: bold;
   font-size: 10px;
   text-transform: uppercase;
}

a.mainlevel:link, a.mainlevel:visited {
   display: block;
   background: #C60000; border: double; border-color:#E6E6E6;
   vertical-align: middle;
   font-size: 11px;
   font-weight: bold;
   color: #ccc;
   text-align: left;
   padding-top: 5px;
   padding-left: 18px;
   height: 20px !important;
   height: 25px;
   width: 100%;
   text-decoration: none; border:medium
}

a.mainlevel:hover {
   background-position: 0px -25px;
   text-decoration: none;
   color: #fff;
}

a.mainlevel#active_menu {
   color:#fff;
   font-weight: bold;
}

a.mainlevel#active_menu:hover {
   color: #fff;
}

a.sublevel:link, a.sublevel:visited {
   padding-left: 1px;
   vertical-align: middle;
   font-size: 11px;
   font-weight: bold;
   color: #c64934;
   text-align: left;
}

a.sublevel:hover {
   color: #900;
   text-decoration: none;
}

a.sublevel#active_menu {
   color: #333;
}

.highlight {
   background-color: Yellow;
   color: Blue;
   padding: 0;
}
.code {
   background-color: #ddd;
   border: 1px solid #bbb;
}

form {
/* removes space below form elements */
   margin: 0;
    padding: 0;
}

div.mosimage {
  border: 1px solid #ccc;
}

.mosimage {
  border: 1px solid #cccccc;
  margin: 5px
}

.mosimage_caption {
  margin-top: 2px;
  background: #efefef;
  padding: 1px 2px;
  color: #666;
  font-size: 10px;
  border-top: 1px solid #cccccc;
}

span.article_seperator {
   display: block;
   height: 1.5em;
}

[lorenzol]

Sono riuscito a risolvere il problema dell'immagine della testata che non si vedeva in firefox inserendo il path dell'immagine stessa nel file index.php nella sezione dedicata all'header.

Per quanto riguarda i riquadri, immagino che si debba fare una cosa simile, sempre nel file index.php??! Che ne pensate?

Ad ogni modo ho pubblicato il sito che è visibile in:

www.microfinanza.com

Saluti a tutti

Lorenzo

[cappalex]

  io con firefox/ubuntu lo vedo benissimo

Ad ogni modo per risolvere questi tipi di problemi si lavora sui css. Solitamente considero quello di default per firefox; poi ne creo altri due per explorer 6 e ie7 aggiungendo due commenti condizionali tra i due tags <head>...</head> del file index

Tra i due tags <head> c'è il link di default al css
(che io uso per firefox)

<link rel="stylesheet" href="http://www.sito.com/templates/nome_template/css/template_css.css" type="text/css"/>

per ie6

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="http://www.sito.com/templates/nome_template/css/IE6.css" />
<![endif]-->

per ie7

<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="http://www.sito.com/templates/nome_template/css/IE7.css" />
<![endif]-->

In questo modo è come se tu creassi 3 siti anzichè uno, non ti interessa sapere con quale browser l'utente vedrà il tuo sito e tutto questo impiegandoci un quarto del tuo tempo.

Alex   

[lorenzol]

Grande!! ...per adesso trovo la cosa un po' complicata e ci proverò quando avrò più padronanza del CSM (e anche un po' di tempo...) ...sto utilizzando il template di joomla che ho modificato man mano..forse, per fare come dici tu, dovrei creare e up-loadare tre template diversi oppure devo inserire le info tra i tag dell'head nell'unico template che uso??

Grazie comuqnue e auguroni di buon anno...

ciao
Lorenzo

[cappalex]

Il template è unico. Quello che devi aggiungere sono i due files .css per modificare lo stile in riferimento al browser. In realtà nel tuo caso è solo per il browser, ma i css vengono usati per molte altre cose come screen, stampa, ecc.

Per maggiori info sui css è molto utile questa guida
http://css.html.it/guide/leggi/2/guida-css-di-base/

Invece un paio di libri molto interessanti se vuoi approfondire l' argomento e ti vuoi fare un regalo di natale (anche se già passato):

1)CSS - Guida completa di Gianluca Troiani - sito ufficiale: www.constile.org
libro: http://www.apogeonline.com/2005/libri/88-503-2369-7/02369p400.gif
(molto buono e teorico. Se vuoi imparare bene i css è l' ideale)

2)Guida ai CSS di ANDREW RACHEL
libro: http://www.hoepli.it/libro.asp?ty=&id=137252&pc=000022003004001&mcs=0
(molto pratico, per chi non ha tempo da perdere  )

Ciao,
Alex