incompatibilità con explorer

[Chef89]

Salve, sto costruendo il mio piccolo template con i css e html. Con firefox 3.0 tutto ok, sono riuscito ad ottimizzarlo, ma ora mi manca da ottimizzare solo questo pezzo con explorer 7.0

 <table cellpadding="0" cellspacing="0" border="0" id="content">
	   <tr>
         <td>
         
         
          <table cellspacing="0" cellpadding="0" border="0" id="articlesBox">
            <tr>
              <td class="boxT" valign="bottom">[img]images/newslist.gif[/img][img]images/contentbox-trx.gif[/img]</td>
            </tr>
            <tr>
              <td class="boxcontent">
				
                Qui dentro verranno stampati tutti gli articoli
                              
              </td>
            </tr>
         	<tr>
              <td class="boxB">[img]images/contentbox-brx.gif[/img][img]images/contentbox-bsx.gif[/img]</td>
            </tr>
          </table>
         
         </td>
       </tr>
</table>

e questo è il css

/* content */
#content {
	float: left;
	width: 70%;
	margin: 0 10px 0 10px;
}
#content .boxT {
	background: url(contentbox-t.gif) repeat-x bottom;

}
#content .boxB {
	background: url(contentbox-b.gif) repeat-x bottom;
	height: 31px;
}
#content .boxcontent {
	border: solid 1px #c8c8c8;
	padding: 2px 10px 2px 10px;
	background: #FFFFFF;
	font: 12px Arial, Verdana, Tahoma, sans-serif;
}

/* Box Aritcles */
#articlesBox {
	width: 100%;
}

Qualcuno potrebbe consigliarmi un metodo per sistemare il mio problema? o darmi delle dritte? Quello che non capisco è xke con Firefox si vede tutto bene ma con IE no! Comunque testerò poi in un secondo momento la compatibilità con safari e opera, prima però vorrei sistemare IE

Grazie in anticipo

[salasir]

Se ci descrivi anche il tuo problema forse facciamo prima ... o magari un link alla pagina.

Comunque nel CSS le definizioni delle classi vanno attaccate all'id:

#content .boxT {      togliere spazio prima del punto! 

#content.boxT {

[Mich_]

Originariamente inviato da salasir
Comunque nel CSS le definizioni delle classi vanno attaccate all'id:

DIPENDE!!
#content .boxT { (con lo spazio)
presuppone che ci sia:
<div id="content>...<tag class="boxT"> ... </tag></div>

invece
#content.boxT { (senza sapzio)
presuppone:
<div id="content class="boxT"> ... </div>


@Chef:
Secondo me il problema nasce dal mescolare formattazioni HTML e CSS: infatti browser diversi risolvono i conflitti tra HTML e CSS in modo diverso.

Prova a togliere le formattazioni HTML (cellpadding="0" cellspacing="0" border="0") e inserire le corrispondenti formattazioni CSS (la sintassi e` un po' divresa: dovrai usare margin e padding applicati a <tr> e <td>)

[salasir]

Hai ragione

Devo aspettare di essere più sveglio prima di intervenire ...

[Chef89]

Originariamente inviato da salasir
Se ci descrivi anche il tuo problema forse facciamo prima ... o magari un link alla pagina.

Comunque nel CSS le definizioni delle classi vanno attaccate all'id:

#content .boxT {      togliere spazio prima del punto! 

#content.boxT {

Il problema è che con IE la tabella del contenuto ".boxcontent" con i padding fuoriesce

Vi allego lo screen con IE. Purtroppo non ho i mezzi per fare le cose decentemente al lavoro :P

[Chef89]

Ho provato ad inserire una tabella e poi un div all'interno della cella dove ora è associata la classe "boxcontent" e poi gli ho assegnato la classe ottenendo una struttura simile

<table>
 <tr>
  <td>Intestazione tabella</td>
 </tr>
 <tr>
  <td>
   <div class="boxcontent">Contenuto</div>
  </td>
  </tr>
 <tr>
  <td>Chiusura tabella</td>
 </tr>
</table>

Ma non cambia nulla con il padding fuoriesce sempre dai bordi

[Mich_]

Come ho gia` detto ormai qualche milione di volte, e` impensabile di far funzionare i CSS se il codice HTML non e` pensato bene.

In particoalre l'uso che fai di formattazione HTML fa reagire i rbwoser in modo diverso: alcuni danno precedenza alla formattazione HTML, altri a quella CSS.

Quindi per prima cosa occorre rivedere l'HTML e togliere tutti gli attributi di formattazione.
Inoltre se usi padding e border ti conviene passare a XHTML Strict, altrimenti IE ha un box-model diverso dagli altri browser e la cosa diventa ancora piu` complessa.

[Chef89]

grazie per le spiegazioni. Dato che ne ho ancora la possibilità in quanto il template è in costruzione. non è che avresti qualche guida o cose simili che potrebbero spiegarmi come sistemare meglio il codice e non avere poi + prob di incompatibilità simili?

[Mich_]

I manuali sono le solite guide dell'XHTML.

Se usi bene i CSS, devi in pratica usare il codice HTML come se fosse XHTML 1.0 Strict.
E questo e` anche il consiglio che io do sempre: siamo nel 2008, sono molti anni che e` uscito XHTML e CSS e questi due standard sono usciti praticamente assieme (mi pare attorno al 2000); inoltre sono strettamente legati, dato che i CSS funzionano al meglio se si usa XHTML.

Tanto per passare sul pratico, io vedo due modi di procedere:
modo A:
A.1. ti studi bene XHTML (ad esempio mediante la guida di HTML.it)
A.2. ti studi il CSS
A.3. risistemi tutto daccapo

modo B:
B.1. cambi il DOCTYPE
B.2 passi dal validatore HTML e correggi gli errori che ti da`; non spaventarti: all'inizio gli errori saranno migliaia, ma solo i primi hanno significato; poi con certi erorri il parser va in tilt e tutto quel che trova lo segna errore
B.3. sistemi il CSS

Nota che i "modi" A e B non sono escludentesi: sono delle schematizzazioni; forse una cosa ibrida puo` essere piu` produttiva.

[Chef89]

Grazie di tutto ragazzi. ho risolto. Praticamente avevo dimenticato di settare il doctype. Infatti non appena l'ho settato si è sistemato tutto immediatamente, e dopo 2 o 3 ritocchi ora è permetto con tt e 2 i browser e conforme alle regole xhtml