Celle allineate solo su firefox e compatibilità IE

[ponkt]

sto cercando di completare un sito per caro amico; l'ho quasi finito però mi restano due problemi da risolvere e non so più dove sbattere la testa
il sito è questo: http://www.comfriarr.it/index/
se provo ad aprirlo con firefox o con IE, i link di navigazione a centro pagina si vedono allineati allo sfondo delle celle mentre con gli altri browser tipo chrome o safari i link non si allineano allo sfondo e tral'altro le stesse celle si distanziano parecchio l'una dell'altra.
Quell'altro problema che non riesco a risolvere si trova nella pagina "Realizzazioni"; in questo caso con FF e Chrome, le immagini al centro pagina sono tutte allineate, mentre con IE, le immagini a destra risultano più alte rispetto a quelle di sinistra...
... avete idea di come potrei risolvere?
grazie anticipatamente..

[Prill]

larghezze di celle e tabelle non sono calcolate esattamente, la tabella ha una larghezza del 102% invece che del 100%, non ho fatto la somma delle larghezze dele celle, ma probabilmente non coincide con i 900 e rotti pixel della tabella. Questo comporta un ridimensionamento delle celle che da browser a browser può variare. Butta via la tabella con tutto quel codice e celle inutili, il menu può essere ottenuto con codice molto più pulito usando un elenco, ad esempio:

#menu ul {
	width:785px;
	margin:0 auto;
	padding:0;
	list-style-type:none;
}
#menu li {
	display:block;
	float:left;
	width:155px;
	height:43px;
	line-height:43px;
	font-size: 13px;
	font-weight: 700;
	margin:0 1px;
	text-align:center;
	background:url(button.png) no-repeat left bottom;
}
#menu a {proprietà dei link}

e poi in body

<div id="menu">
   <ul>
	[*]Homepage
	[*]Azienda
	[*]Prodotti
	[*]Realizzazioni
	[*]Contatti[/list]
</div>

Usando div con float puoi anche eliminare l'altra tabella coi contenuti.

Ti consiglio anche di passare la pagina al validatore per trovare e correggere gli errori presenti (fra l'altro con Firefox vedo un'immagine nela parte centrale che va a scatti salendo e scendendo, è così che deve fare?)

[ponkt]

Ti ringrazio... GRANDE!!
ho risistemato le celle anche perchè non avevo tempo/voglio di rifarmi tutti i menù di tutte le pagine (Ti ringrazio comunque... )
Per la questione della pagina "realizzazioni" mi sapresti dare un consiglio su come risolvere??


Pe la questione della home... è un slide di immagini in verticale che cambiano... tu non le vedi così??

[Prill]

ho risistemato le celle anche perchè non avevo tempo/voglio di rifarmi tutti i menù di tutte le pagine

se vuoi risistemare la tabella (sarebbero da evitare, ma se ti piace così...) riscrivi tutta questa parte

	<table style="background-color: transparent;" cellspacing="1"><tbody><tr>
		<td style="background-color: transparent" class="style111">
			
				</td>
				<td style="background-color: transparent" class="style111">
			
				</td>
				<td style="background-color: transparent" class="style111">
			
				</td>
				<td style="background-color: transparent" class="style111">
			
				</td>




		<td style="background-color: transparent;" class="style116">
			
				[img]images/trasp.png[/img]</td>
		<td style="background-image: url('images/button.png'); background-repeat: no-repeat; font-weight: 700; font-size: 13px;" class="style19">
			
				Homepage</td>
		<td style="background-image: url('images/button.png'); background-repeat: no-repeat; font-weight: 700; font-size: 13px;" class="style19">
			
				


				Azienda

				

			
				</td>
		<td style="background-image: url('images/button.png'); background-repeat: no-repeat; font-size: 13px; font-weight: 700;" class="style110">
			
				Prodotti</td>
		<td style="background-image: url('images/button.png'); background-repeat: no-repeat; font-size: 13px; font-weight: 700;" class="style110">
			
				Realizzazioni</td>

		<td style="background-image: url('images/button.png'); background-repeat: no-repeat; font-weight: 700; font-size: 13px;" class="style19">
			
				Contatti</td>
		<td style="background-color: transparent" class="style111">
			
				</td>
		<td style="background-color: transparent" class="style111">
			
				</td>
		<td style="background-color: transparent" class="style111">
			
				</td>

		<td style="background-color: transparent" class="style111">
			
				</td>
			</tbody></table>

così:

<table id="tabMenu">
   <tr>
       <td>Homepage</td>
	<td>Azienda</td>
	<td>Prodotti</td>
	<td>Realizzazioni</td>
        <td>Contatti</td>
    </tr>
</table>

e nel css

#tabMenu {
	width: 785px;
        border:0;
	border-collapse:collapse;
	margin:0 auto; color:#fff /* da modificare poi il colore */
}
#tabMenu td {
        width:157px;
        height:43px;
        text-align:center;
        vertical-align:middle;
        font-size: 13px;
        font-weight: 700;
        background: url(images/button.png) no-repeat center bottom;
        padding:0;
}

Sono infatti inutili tutte quelle celle vuote che hai inserito. Nel css è annullato il cellpadding e il cellspacing sulla tabella, e le celle hanno una larghezza di due pixel superiori alle dimensioni dello sfondo così che gli elementi del menu appaiano distanziati (per distanziarli ulteriormente basta aumentare la larghezza delle celle - e quella della tabella).
Lo sfondo ha un posizionamento centrato e in basso, infatti la tua immagine di sfondo è alta 47 pixel mentre tu imposti un'altezza della cella di 43 pixel, attualmente vedi l'immagine nella sua interezza solo perché in realtà col tuo codice (aggiungendo dei br in una cella) rendi la cella più alta delle dimensioni impostate (se vuoi modificarne l'altezza semplicemente porta i 43 pixel a 47, senza aggiungere marcatura inutile).
In questa maniera la tabella è costruita più solidamente.

Poi, riguardo al voler risparmiare tempo all'inizio: se mai dovrai modificare codice scritto male in un secondo momento sarà necessario molto ma molto più tempo di quello che perderesti ora scrivendo con maggiore attenzione. Evitare le dichiarazioni di stile in linea e inserire tutto in un css (esterno) semplifica notevolmente le modifiche, evitare nomi generici e privi di significato per id e class nel css permette, mettendo mano al css, di capire subito a cosa si riferisce la regola.

Sull'immagine in home: si ha un caricamento delle varie immagini, ma nella transizione le immagini hanno uno slittamento (si spostano verso il basso per poi tornare in posizione).

Non ho visto ancora l'altra pagina, la guardo più tardi

[Prill]

Non noto differenze usando chrome e firefox, con un allineamento verticale in alto (valign="top" come attributo in linea o vertical-align:top nel css) delle celle forse torna a posto. Ma ci sono altri problemi che dovresti mettere a posto (per esempio tutte le chiusure dei tag a sulle immagini della gallery, il testo delle celle di destra deve sovrapporsi al contenuto di destra come avviene?)

[ponkt]

grazie mille dei consigli ne faccio tesoro! Ti ringrazio anche di avermi riscritto il codice del menu, l'ho implementato ed effettivamente è tutta un'altra cosa... thxs!
Per quanto riguarda lo slide della home, ho utilizzato questo script: http://javascript.html.it/script/ved...ade-e-jsslide/
Però l'ho provato con diversi browser e lo vedo girare regolarmente.
La pagina realizzazioni mi fa un problema strano, se lo vedo con IE mi disallinea le celle di destra rispetto a quelle di sinistra.
ti posto gli screen:
Dovrebbe essere così:


invece con IE è così:





Ho letto in rete che IE ha problemi con align="center" delle celle... potrebbe essere questo il problema?

[Prill]

Per quanto riguarda lo script io lo vedo a scatti anche nell'originale, nella tua pagina l'effetto appare ancora peggiore perché l'area interessata dallo scorrimento è più alto. Ti allego una schermata di ciò che avviene durante il passaggio da un'immagine all'altra.
Aspettiamo un test anche di altri per verificare che non sia un problema dovuto al vetusto pc da cui testo

[Prill]

Invece per quanto riguarda la pagina realizzazioni, ecco cosa accade con Firefox e Chrome, dunque non solo Explorer ha una visualizzazione non voluta

C'è da rivedere diverse cose

[Prill]

Comincia innanzitutto correggendo nel Doctype

<!DOCTYPE HTML PUBLIC

con

<!DOCTYPE html PUBLIC

ininfluenti per il comportamento notato ma sempre errori da correggere le mancate chiusure di meta tag e richiami dei css dato che stai usando xhtml

Venendo ai problemi, te lo avevo già osservato prima, tutti quei tag "a" vuoti e annidati (per l'inserimento di link di lightbox vedi la pagina d'esempio scaricata con la cartella zippata), e soprattuto inserisci chiusure di celle o righe mancanti. Fatto tutto questo passa la pagina al validatore del w3c per correggere altri errori, e dicci poi se i problemi sono ancora presenti

[ponkt]

l'ho passoto al validatore del w3c e mi ha riportato 100 errori... purtroppo non sarò mai in grado di risolverli tutti ( anche perchè non ho capito bene cosa intendi per i tag "a" vuoti e annidati) invece non riesco a capire nemmeno quali celle risultano ancora aperte; sarà per questo motivo allora che le scritte scavallano la barra laterale destra?!?!
Per quanto riguarda le visualizzazioni l'ho testato su vari browser di diversi pc e la home non mi ha mai dato il problema come lo screen che mi hai postato, invece il problema con la pagina Realizzazioni lo da solo con IE metre con gli altri browser va bene, mi diresti che risoluzione di monitor hai così faccio dei test.