Problemi con Internet Explorer

**wincio10** · 18-12-2010, 16:39

Salve a tutti, come potete vedere sono nuovo del forum, ma non del sito, con il quale sto cercando di imparare a programmare etc. etc.

Il mio problema è il seguente:

ho inserito un div con uno sfondo (una semplice linea praticamente) che devo posizionare in fondo alla pagina così da terminare la grafica del background. Su firefox tutto bene. IE, invece, dopo la linea fa continuare il background ancora per una decina di pixels. Perché?

- vi posto tutto il codice (spero di non sbagliare) così magari qualcuno mi dà anche qualche dritta o nota anche altri errori:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>home</title>



<script language="javascript" src="js/MM_findObj.js"></script>

<script language="javascript" src="js/MM_preloadImages.js"></script>

<script language="javascript" src="js/MM_swapImage.js"></script>

<script language="javascript" src="js/MM_swapImgRestore.js"></script>


<link href="css/header.css" rel="stylesheet" type="text/css" />
<link href="css/body.css" rel="stylesheet" type="text/css" />
<link href="css/sections_home.css" rel="stylesheet" type="text/css" />
<link href="css/bottom_line.css" rel="stylesheet" type="text/css" />

</head>


<body onload="MM_preloadImages('images/home_on.gif','images/link_2_on.gif','images/link_4_on.gif','images/link_5_on.gif','images/link_6_on.gif','images/photogallery_on.gif')">


<div id="header_cont" align="center" >


<div id="header">  
 
 
 <table id="navigation" cellspacing="0" cellpadding="0">
  		<tr>

  		
    	<td>[img]images/home.gif[/img]</td>

    	
    	<td>[img]images/link_2.gif[/img]</td>

    	
    	<td>[img]images/photogallery.gif[/img]</td>

    	
    	<td>[img]images/link_4.gif[/img]</td>

    	
    	<td>[img]images/link_5.gif[/img]</td>

    	
    	<td>[img]images/link_6.gif[/img]</td>
  		
		</tr>
  </table>

</div>
</div>


<div id="sections_cont">
	
	<div id="section1">
	  

[img]images/home.gif[/img]</p>
	  

</p>
	  

[img]images/home_on.gif[/img]</p>
	  

</p>
	  

[img]images/home.gif[/img]</p>
    </div>

  	
	<div id="section2">
    </div>
</div>


<div id="bottom_line">
</div>

</body>
</html>

Grazie.

**Prill** · 19-12-2010, 08:28

Ciao wincio10,
dal tuo codice in realtà non si comprende bene dove sia il problema (manca il css), comunque, in generale, per evitare problemi di margini e padding indesiderati conviene sempre azzerarli su tutti gli elementi aggiungendo nel css

codice:

* {margin:0; padding:0;}

Altre osservazioni sul tuo codice:
1. racchiudi tutti i contenuti all'interno di un div;
2. non usare tanti script esterni laddove puoi averne solo uno (i quattro script sono tutte le funzioni inserite da Dreamweaver per il rollover delle immagini e il loro preload);
3. riduci al minimo il numero dei css, anche qui sembra che ogni regola abbia il proprio foglio di stile esterno
4. se il div bottom ha solo la funzione di mostrare una linea di sfondo non è necessario, lo sfondo, posizionato coi css in basso, potrebbe andare sul div contenitore generale (che va inserito) o sull'ultimo div con contenuti o su un paragrafo su cui potrai settare opportunamente un padding-bottom e lo sfondo stesso

**wincio10** · 19-12-2010, 16:25

Innanzitutto ti ringrazio per la disponibilità...ti sei letto tutto il codice.
Allora:

1- non so se ho afferrato, ho creato un div immediatamente dopo l'inizio del body ( a che serve?) che contiene tutto, e senza css gli ho azzerato padding e margine e gli ho messo la linea di sfondo in fondo a tutto (potevo arrivarci). Intendevi questo?

2- ho rimesso gli script nel codice e non li chiamo dall'esterno (credevo fosse meglio così);

3- per ridurre i css esterni ho pensato di inserirli nei tag per quelle parti del sito che restano invariate, c'ho preso?Altrimenti cosa potrei fare?

4- ora ti posto i css che uso e l'immagine del problema:

codice:

@charset "utf-8";
body {
	background-image: url(../images/background.gif);
	background-repeat: repeat-y;
	background-position: center;
	margin: 0px;
	padding: 0px;
}
----------------------------------------------------
@charset "utf-8";

#header {
	background-image: url(../images/head.gif);
	background-repeat: no-repeat;
	margin: 0px;
	padding: 0px;
	position: static;
	height: 470px;
	width: 989px;
	background-position: center top;
}
#navigation {
	text-align: center;
	margin: 0px;
	padding: 0px;
	height: auto;
	width: 420px;
	position: absolute;
	left: 70px;
	top: 381px;
}
-----------------------------------------------------------
@charset "utf-8";
#sections_cont {
	height: 400px;
	padding-left: 56px;
	padding-bottom: 10px;
	margin: 0px;
	padding-top: 0px;
	padding-right: 0px;
}
#section1 {
	height: 400px;
	width: 523px;
	border: thin solid #FF0000;
	margin: 0px;
	padding: 0px;
}
#section2 {
	height: 393px;
	width: 203px;
	border: thin solid #CC0066;
	position: absolute;
	left: 588px;
	top: 300px;
	margin: 0px;
	padding: 0px;
}

la linea è inserita non piu' come prima ma nel div iniziale come sfondo sotto.

**Prill** · 20-12-2010, 09:32

ho creato un div immediatamente dopo l'inizio del body ( a che serve?)

a racchiudere tutti i contenuti e non lasciarli "sfusi" nella pagina

ho rimesso gli script nel codice e non li chiamo dall'esterno (credevo fosse meglio così);

puoi inserire lo script esternamente, ma invece di avere quattro script esterni, uno script per ogni funzione, puoi averne solo uno:

codice:

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

lo stesso per i css, se nella tua pagina applichi stili diversi ai vari elementi, non devi costruire un css per ciascuno di esso, inserisci tutt0 dentro un solo foglio di stile.
Ho però l'impressione che tu stia cercando di costruire un layout secondo la tua risoluzione.
Non usare posizionamenti assoluti se non sono indispensabili.
Se puoi e hai la pagina in rete lasciaci un link perché non è possibile ricostruirla dal codice data la presenza di immagini

**wincio10** · 20-12-2010, 23:53

mi dispiace ma la pagina non è in rete. cmq ho capito tutto cio' che hai detto, sei stato chiarissimo.
Per quanto riguarda il mio problema principale, è il background che continua, ancora, dopo la linea messa in fondo a tutto come sfondo del div piu' esterno che mi avete consigliato di mettere, e questo accade nonostante ci siano ovunque padding e margini a zero e con IE e non su firefox che mi dà il risultato aspettato. tutto quello che potevo postare l'ho fatto (anche l'immagine del problema) perchè sono alle prime armi e gli altri linguaggi li sto imparando ma non so ancora come applicarli.

Che mi dite? Perchè fa' così?

Discussione: Problemi con Internet Explorer

Strumenti discussione

Ricerca discussione

Visualizza

Problemi con Internet Explorer

Permessi di invio