visualizzazione errata con IE

**autumn** · 06-04-2008, 19:13

Nella visualizzazione del codice che riporto qui sotto Firefox non crea problemi, mentre IE mi crea uno spazion di 2px tra il div "menu" e il div "cerca"

Questo è il CSS

codice:

CSS



body {
margin:0;
border:0;
padding:0;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#00669a;
background:#b2d6e8 url(struttura/sfondoBody.jpg) top left repeat;
}

#centrato{
width:800px;
margin:0 0 0 150px;
}

#testata {
position:relative;
width:800px;
height:135px;
background:url(struttura/testata.jpg) top left no-repeat;
}

#menu {
position:relative;
width:800px;
height:15px;
background:url(struttura/menu.jpg) top left no-repeat;
}

#cerca {
position:relative;
width:800px;
height:20px;
background:url(struttura/cerca-nel-sito.jpg) top left no-repeat;
}

.pulsanti {
position:absolute;
top:0;
left:60px;
}

.clear {
clear:both;
}

.pixel{
position:absolute;
top:0;
right:40px;
padding:0;
}

.trattino{
position:absolute;
top:4px;
left:60px;
}

E questo è l'html

codice:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>ri-animazione</title>
<link rel="stylesheet" href="CSS.css" type="text/css"/>
<!--[if IE]>
<link rel="stylesheet" href="CSS.css" type="text/css"/>
<![endif]-->
</head>

<body>
<div id="centrato">
	<div id="testata">
		<div class="pixel">
			[img]struttura/pixel_login.jpg[/img]
			[img]struttura/pixel_mail.jpg[/img]
		</div>
	</div>
	
	<div id="menu">
		[img]struttura/menu.jpg[/img]
		<div class="pulsanti">
			<span>
				<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="80" height="12">
				  <param name="movie" value="componenti%20flash/home_btn.swf">
				  <param name="quality" value="high">
				  <embed src="componenti%20flash/home_btn.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="80" height="12"></embed>
				</object>
			</span>
			<span>
				<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="80" height="12">
				  <param name="movie" value="componenti%20flash/attivit&#224;_btn.swf">
				  <param name="quality" value="high">
				  <embed src="componenti%20flash/attivit&#224;_btn.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="80" height="12"></embed>
				</object>
			</span>
			<span>
				<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="80" height="12">
				  <param name="movie" value="componenti%20flash/chi_btn.swf">
				  <param name="quality" value="high">
				  <embed src="componenti%20flash/chi_btn.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="80" height="12"></embed>
				</object>
			</span>
			<span>
				<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="80" height="12">
				  <param name="movie" value="componenti%20flash/download_btn.swf">
				  <param name="quality" value="high">
				  <embed src="componenti%20flash/download_btn.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="80" height="12"></embed>
				</object>
			</span>
			<span>
				<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="80" height="12">
				  <param name="movie" value="componenti%20flash/contatti_btn.swf">
				  <param name="quality" value="high">
				  <embed src="componenti%20flash/contatti_btn.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="80" height="12"></embed>
				</object>
			</span>
		</div>
	</div>
	
	<div id="cerca">
		<div class="trattino">
			[img]struttura/trattino_home.jpg[/img]
		</div>		
	</div>

</div>
</body>
</html>

Grazie mille a chiunque mi aiuti o legga il post
Aspetto con trepidazione

**autumn** · 07-04-2008, 09:55

non c'è proprio nessuno che mi possa aiutare?

**Mich_** · 07-04-2008, 12:14

Non ha molto senso quel CSS.
E il codice HTML pieno di oggetti esterni, non aiuta a sistemare il layout.

In particolare hai #testata la cui posizione non dipende da #centrato, e questo potrebbe creare problemi.

Il consiglio e` di fare una cosa tutta con posizionamenti (assoluti e/o relativi), oppure di non usare i posizionamenti da nessuna parte (molto piu` semplice da realizzare, specie se non si conoscono bene i CSS)

Riguardo al problema specifico, potrebbe trattarsi di uno dei bachi IE, tipo il "bug dei tre pixel": vedi i siti che trattano dei bachi di IE (qualcuno e` listato nei "link utili").
Io comunque non ho IE, per cui non posso verificare cosa succede.
Inoltre IE reagisce in modo molto piu` simile ai browser standard, se la DTD e` XHTML 1.0 strict: e` un'altra possibilita` per risolvere il problema.

PS: Il tuo post e` anche piuttosto lungo, con molto codice: in questi casi un link e` molto piu` usabile da parte di chi ti volesse aiutare: interpretare un codice lungo spaventa molti.

**autumn** · 07-04-2008, 12:20

grazie mille Mich_.

Seguirò i consigli e poi ti farò sapere. E grazie anche per la pazienza.

**autumn** · 07-04-2008, 16:16

Eccomi di nuovo quà. Ho provato a cambiare il DTD ma non ho avuto risultati. Per fare gli altri cambiamenti che mi hai proposto ho bisogno di alcuni chiarimenti su quanto scritto da te.
Dici che l'html fa riferimento a oggetti esterni. In che senso?

Inoltre non ho ben capito il problema dei posizionamenti di cui parlavi. Ogni id è relativo e ogni div interno è assoluto. Se non sbaglio i div assoluti si estraggono dal normal flusso e fanno riferimento ai blocchi progenitori superiori non assoluti, in questo caso quelli relativi. Sbaglio?

Comunque nel frattempo posto un'immagine che cerca di chiarire con screenshot qual'è il problema. La prima immagine ovviamente si riferisce a FF e la seconda a IE.

Grazie mille,
autumn

**autumn** · 07-04-2008, 16:27

scusate ma ho avuto problemi con le img adesso ci dovrebbero essere

**autumn** · 07-04-2008, 16:30

purtroppo ho problemi ad inviare img. se ci riesco ci provo più tardi. Nel frattempo Mich_ mi puoi spiegare quanto ho chiesto nel post sopra?

**Mich_** · 07-04-2008, 16:38

Non attribuirmi cose che non ho detto. Altrimenti non ci possiamo capire.

Cambiare DTD non basta: occorre anche che il codice HTML+CSS sia conforme alla DTD dichiarata.

Non ho detto che l'HTML fa riferimento ad oggetti esterni, ma che contiene oggetti esterni. Tali oggetti possono inserire cose non volute.
Se da un lato sono sconsigliabili, nel tuo caso mi sembrano anche inutili: se ho capito bene sono dei bottoni: si realizzano con tecniche standard, senza caricare nel browser programmi esterni.

Per i posizionamenti, io mi riferivo in particolare al fatto che hai inserito un oggetto con posizionamento dentro uno che posizionato non e`, e questo puo` creare confusione (ed interpretazione diversa da parte di brwoser diversi).
Comunque io ho trovato molto chiaro quanto descritto in questi due articoli:
I posizionamenti assoluti
Capire i posizionamenti relativi
Cerca di leggerli e di capirli.

**autumn** · 07-04-2008, 16:55

grazie mille Mich_,

Hai ragione, gli elementi che richiamo in "menu" sono dei pulsanti che ho fatto con FLASH e in "cerca" invece richiamo un'immagine JPG.

Scusa se ti ho fatto perdere la pazienza..... stavo solo cercando di confrontarmi con te per capire. Scusa.

Leggerò ATTENTAMENTE gli articoli che mi hai segnalato e cercherò .

Comunqeue inserendo "overflow:hidden" la visualizzazione è corretta anche con IE, quindi il problema è dovuto al contenuto di uno dei blocchi. Comunque prima di disturbarti di nuovo leggerò gli articoli... e di capirli

Grazie

Discussione: visualizzazione errata con IE

Strumenti discussione

Ricerca discussione

Visualizza

visualizzazione errata con IE

Permessi di invio