Qualcosa non quadra con un banner

[TechScene]

Salve. E' da un po' di tempo che nel banner in alto, sul mio sito, a volte compare qualcosa, come illustrato in foto, che fa sì che tutto il banner non rispetti l'allineamento con gli altri elementi. A cosa è dovuto? Come posso risolvere per evitare che il layout venga rovinato in questo modo?
Basta ricaricare la pagina un paio di volte per far si che l'anomalia "si mostri".

[TechScene]

Scrivo una risposta perchè non posso modificare. Per caso il problema è dovuto a qualche banner obsoleto che sto utilizzando? Ricordo che tempo fa si parlava di banner che erano diventati obsoleti, ce ne sono nel mio sito al momento?

[darkwolf]

ci sono due iframe esterni firmati amazon:

<table align="center" style="margin: 0px auto;">
  <tr>
    <th><iframe src="http://rcm-eu.amazon-adsystem.com/e/cm?t=tecsce-21&o=29&p=20&l=ur1&category=it_electronics&banner=0D910S8SHFSX74ZPJNG2&f=ifr" width="120" height="90" scrolling="no" border="0" marginwidth="0" style="border:none;" frameborder="0"></iframe></th>
    <th><script type="text/javascript">
/* <![CDATA[ */
document.write('<s'+'cript type="text/javascript" src="http://ad.altervista.org/js.ad/size=728X90/?ref='+encodeURIComponent(location.hostname+location.pathname)+'&r='+new Date().getTime()+'"></s'+'cript>');
/* ]]> */
</script></th>
    <th><iframe src="http://rcm-eu.amazon-adsystem.com/e/cm?t=tecsce-21&o=29&p=20&l=ur1&category=it_videogames&banner=0ETHMAVWDMG7V8CTSER2&f=ifr" width="120" height="90" scrolling="no" border="0" marginwidth="0" style="border:none;" frameborder="0"></iframe></th>
  </tr>
</table>

chi sono e da dove vengono (cioè, chi li ha messi), però, io non lo so.

[TechScene]

Quelli li ho messi io dopo aver chiesto il permesso, ma il problema riguarda la pubblicità al centro, sotto alla quale compaiono quelle cose come mostrato in foto.

[darkwolf]

ah, scusami. pensavo ti riferissi ai due iframe xD
beh, l'altro fatto è il segno di immagini mancanti, ma riguarda certamente quello specifico banner (in questo istante, altro banner, non riscontro alcun problema).

[TechScene]

Perchè è un problema che si verifica in maniera assolutamente casuale. E' proprio per questo che non riesco a debuggarlo, compare solo una volta ogni tanto e mi rovina tutto il layout. Cosa si può fare?

[TechScene]

Il problema si è ripresentato, ho provato a controllare con gli strumenti di Chrome ma non riesco a capire per quale motivo succeda.

[TechScene]

Volevo segnalare che il problema persiste ancora oggi. La situazione va avanti da mesi.

[karl94]

Non usare una tabella. Usa piuttosto codice del tipo

<div id="ts_top_banner"><div><!-- BANNER 1 --></div><div><!-- BANNER 2 --></div><div><!-- BANNER 3 --></div></div>

#ts_top_banner{text-align:center;min-height:90px}#ts_top_banner>div{display:inline-block;vertical-align: top}

[TechScene]

La tabella mi consente di rendere scalabile il contenuto in base alle diverse risoluzioni.
Se dovessi toglierla dovrei riscrivere tutto il codice da capo. Oppure non sarebbe necessario?

[karl94]

Da capo no, adattalo al codice che ho riportato.

[TechScene]

Non credo di esserne in grado purtroppo.
Il codice attuale mostra solo i due bannerini di Amazon entro una certa risoluzione, poi nasconde quei due e mostra solo il banner di Google, e oltre una certa risoluzione mostra tutti i banner.
Non è stato facile, il codice CSS è molto articolato. Se vuoi posso incollarlo qua per vedere se qualcuno riesce ad aiutarmi ad adattarlo al tuo codice magari.

[karl94]

Se vuoi posso incollarlo qua per vedere se qualcuno riesce ad aiutarmi ad adattarlo al tuo codice magari.

Riportalo.

[TechScene]

Questo è ciò che si sovrappone al codice CSS predefinito. Corregge anche alcuni errori che si creano con la versione mobile del sito in alcuni casi in cui accadono cose strane (tutti il body si abbassa di qualche pixel ed altre cose che non so neanche perchè avvengano):

.et_fixed_nav #main-header, .et_fixed_nav #top-header {
}

@media screen and (max-width: 980px){
.et_fixed_nav #top-header {
    position: absolute;
		top: 32px;}
.et_fixed_nav #main-header {
	 position: absolute;
	top:41px !important;
}

	body > table:nth-child(1) {
		top:196px !important;
	}
	body > table:nth-child(1) > tbody > tr > th:nth-child(1) {
		display:none;
	}
body > table:nth-child(1) > tbody > tr > th:nth-child(3) {
		display:none;
	}
	body {
		top: -46px !important;
	}
#main-content .container {padding-top: 70px;}
}


@media screen and (max-width: 549px)
	{
	.et_fixed_nav #top-header {
    position: absolute;
    top: 46px;
}
.et_fixed_nav #main-header {
    position: absolute;
    top: 55px !important;
}
	body > table:nth-child(1) {
		top:192px !important;
	}
body > table:nth-child(1) > tbody > tr > th:nth-child(1) {
		display:unset;
	}
body > table:nth-child(1) > tbody > tr > th:nth-child(3) {
		display:unset;
}
#main-content .container {
    padding-top: 80px;
}


	body {
		top: -46px !important;
	}
}

@media (max-width: 600px) {
	#wpadminbar {
		top: 0;
	}
}

@media screen and (max-width: 1045px) {
	#top-menu > li.centered-inline-logo-wrap {
		display: none;
	}
}

EDIT: Scusa se il codice è un po' sporco e formattato male.