diverse misure delle td in IE e FF

**bluarancia7** · 19-08-2008, 15:58

mi sono accorta che di default le td in firefox hanno uno spazio in orizzontale che non riesco a eliminare inserendo il padding 0... se inserisco uno spacer alto 15px e come background uno sfondo alto uguale mi rimane sempre uno spazio orizzontale vuoto! Perchè??? So che posso risolvere utilizzando l'allineamento del background, ma mi incuriosisce sapere se e come posso eliminare qto spazio (ho naturalmente inserito anche border 0 e margin 0 -anche se quest'ultimo in una td non conta nulla, ma non sapevo più che fare) Qualcuno mi sa dire qsa?
Grazie
Fra

**bluarancia7** · 20-08-2008, 11:17

ach, ma non è solo un problema di td... ma possibile che non me ne sono mai accorta, o è cambiato qsa? ho tre immagini da incolonnare una sotto l'altra e non riesco a evitare che tra di loro, con firefox, ci sia uno spazio di qualche px!!! Come faccio? Devo proprio riuscire a togliere qto spazio, ma non so più che pesci pigliare, mi pare una banalità...ma mi sta fregando, forse sono un po fusa????

**Mich_** · 20-08-2008, 11:39

Anzitutto ti invito a non usare abbreviazioni tipo SMS nei messaggi: rendono piu` scomoda la lettura e sono espressamente vietati dal regolamento.

Passando al tuo problema, quanto dici non mi torna. Se le cose che dici accadessero in IE, sarebbero frutto dei vari bachi di tale brwoser, ma in altri browser non le ho mai sentite.
Sono quindi propenso a pensare ad errori di sintassi da qualche parte (magari in posti precedenti a quelli considerati): ti invito quindi a passare dai validatori HTML e CSS; se non trovi la soluzione posta il link o il codice (HTML + CSS + DOCTYPE).

**bluarancia7** · 20-08-2008, 14:11

Grazie, e innanzi tutto scusa per le abbreviazioni utilizzate.

Ho seguito il tuo suggerimento e in effetti, validando il codice, mi sono accorta che il problema era proprio nel doctype!
Utilzzavo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

e sostituendolo con:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

ho risolto.

A questo punto avrei bisogno di qualche chiarimento rispetto all'utilizzo corretto del doctype per capire un po' meglio cosa è successo... ma probabilmente non mi trovo nel forum giusto... posso essere spostata?

Ah, un'ultima cosa: utilizzando i <div> (o anche i

) con i css ero riuscita comunque a risolvere (ma soprattutto nell'opzione in tabella mi pareva comunque di dover "appesantire" un po' troppo il codice...) grazie ai css (specificando l'altezza per ogni immagine)

Grazie ancora

**Mich_** · 20-08-2008, 14:34

Mi sa che hai un po' di confusione in testa.
Anzitutto il DOCTYPE: definisce il linguaggio usato nella pagina. Il linguaggio HTML ha varie versioni, e con il DOCTYPE si definisce quale DTD (Document Type Definition) viene usata.

Ma non e` che risolvi passando da una DTD strict ad una transitional; probabilmente dopo aver dichiarato una DTD strict non usavi il linguaggio corrispondente. I manuali HTML chiariscono quali tag e attribti si possono usare con le varie DTD.
Ad esempio io uso il manuale http://www.w3schools.com/tags/default.asp (al suo interno c'e` la pagina relativa al DOCTYPE: http://www.w3schools.com/tags/tag_doctype.asp ).

Trovi descrizioni delle differenze tra le DTD nei manuali (tutorial) di HTML o XHTML (ce ne sono un paio anche in HTML.it)

L'uso CORRETTO dei CSS e` utile a non avere differenze fra i vari browser: occorre pero` eliminare le formattazioni realizzate con attributi e tag HTML, altrimenti si creano conflitti fra CSS e HTML, e browser diversi risolvono i conflitti in modo diverso.

Comunque sposto nel forum (X)HTML.

**bluarancia7** · 20-08-2008, 16:12

si, in effetti rispetto alle DTD (Document Type Definition) devo chiarirmi un po' le idee e andrò sicuramente a leggere quanto indicato. Una cosa che però mi è risultata un po' strana è che nella validazione non venivano indicati errori di utilizzo di tag o attributi, nel senso che un semplicissimo codice con tabella e immagini con Fire Fox aveva il comportamento strano di cui ai messaggi precedenti.
Posto il codice nel caso si volesse provare a verificare il diverso comportamento con FireFox:

CASO 1 con DTD strict

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta name="TITLE" content="">
<title>Titolo</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
font-family:Arial, Helvetica, sans-serif; font-size:12px; margin-left:15px;}

</style>
</head>
<body>
 

CASO 1

con DTD strict</p>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>[img]img/blu.jpg[/img]</td>
  </tr>
  <tr>
    <td>[img]img/verde.jpg[/img]</td>
  </tr>
  <tr>
    <td>[img]img/arancio.jpg[/img]</td>
  </tr>
</table>
</body>
</html>

CASO 2 con DTD transitional

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="TITLE" content="">
<title>Titolo</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
font-family:Arial, Helvetica, sans-serif; font-size:12px; margin-left:15px;}

</style>
</head>
<body>
 

CASO 2

con DTD transitional</p>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>[img]img/blu.jpg[/img]</td>
  </tr>
  <tr>
    <td>[img]img/verde.jpg[/img]</td>
  </tr>
  <tr>
    <td>[img]img/arancio.jpg[/img]</td>
  </tr>
</table>
</body>
</html>

...mi sa che non posso allegare tutte le immagini, vero? bè ne allego una sono comunque semplici .jpg colorate giusto per far vedere lo spazio che intercorre tra loro nel "caso 1", si può utilizzare qualsiasi immagine a disposizione

Ciao

**Mich_** · 20-08-2008, 16:41

Non ci sono errori di sintassi, ma ci sono errori di semantica, e l'uso di formattazioni realizzate con attributi HTML.

Dato che la "tabella" contiene solo tre celle, una sotto l'altra, e` errato usare il tag <table>. Puoi usare tre oggetti <div>, oppure una lista con tre elementi.
Ma in quel caso la tabella e` usata per formattare, mentre le tabelle sono state create per inserire dati tabulari (che hanno quindi una relazione di riga e colonna). E` vero che in versioni precedenti dell'HTML erano usate per formattare, ma ora non e` piu` necessario, dato che ci sono gli strumenti corretti per formattare.

Per la formattazione non e` il caso di usare gli attributi HTML: sono superati ed alcuni brwoser non li trattano correttamente (come hai verificato), specie si usa la DTD strict, che ha delle regole piu` stringenti della transitional.
Per formattare si deve usare il CSS, che oltre ad essere stato creato espressamente per tale scopo, produce un codice piu` leggero e piu` riusabile, oltre chepiu` semplice da manutenere.

**bluarancia7** · 20-08-2008, 17:11

Perfetto, chiarissimo, ma scusami se insisto, è un tarlo forse inconsistente ma insistente... ho sempre considerato FireFox "comprensibile" (nel senso che ogni volta che non 'rendeva' il risultato sperato alla fine ho sempre trovato un perchè, un errore o imprecisione reale e comprensibile) e in questo caso non riesco a darmi una spiegazione...
perchè succede lo stesso se invece di utilizzare la table (che giustamente non è corretto utilizzare qui) utilizzo tre div, senza formattazione alcuna? perché si crea quello spazio? da dove viene?

...non vorrei sembrare pedante (il problema 'pratico' lo ho comunque risolto), ma mi piacerebbe arrivare in fondo alla questione...

di seguito il codice con div

CASO1 con DTD strict

codice:

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta name="TITLE" content="">
<title>Titolo</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
font-family:Arial, Helvetica, sans-serif; font-size:12px; margin-left:15px;}

</style>
</head>
<body>
 

CASO 1

con DTD strict </p>
 <div>[img]img/blu.jpg[/img]</div>
<div>[img]img/verde.jpg[/img]</div>
<div>[img]img/arancio.jpg[/img]</div>
</body>
</html>

CASO2 con DTD transitional

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="TITLE" content="">
<title>Titolo</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
font-family:Arial, Helvetica, sans-serif; font-size:12px; margin-left:15px;}

</style>
</head>
<body>
 

CASO 2 

con DTD transitional </p>
 <div>[img]img/blu.jpg[/img]</div>
<div>[img]img/verde.jpg[/img]</div>
<div>[img]img/arancio.jpg[/img]</div>
</body>
</html>

Grazie ancora

**Mich_** · 20-08-2008, 17:20

Una volta che usi i <div>, devi anche fornire un CSS completo, dato che i browser hanno dei default che per alcuni elementi prevedono dei margini e/o padding.

Esempio:

codice:

* {
  margin:0;
  padding: 0;
}
html, body {
  font-family:Arial, Helvetica, sans-serif;
  font-size:12px;
  /* margin-left:15px; */
      /* un margine al <body>? che senso ha? 
        In qualche brwoser il <body> coincide con la finestra del browser /*
}

Discussione: diverse misure delle td in IE e FF

Strumenti discussione

Ricerca discussione

Visualizza

diverse misure delle td in IE e FF

Permessi di invio