Valutazione 4.87/ 5 (100.00%) 5838 voti

Condividi:        

salti di spazio con i DIV su IE6

Problemi di HTML? Di PHP, ASP, .NET, JSP, Perl, SQL, JavaScript, Visual Basic..?
Vuoi realizzare programmi in C, C++, Java, Ruby o Smalltalk, e non sai da che parte cominciare?
Entra qui e troverai le risposte!

Moderatori: Triumph Of Steel, archimede

salti di spazio con i DIV su IE6

Postdi robywan » 14/09/05 11:37

Ciao a tutti,
sto creando una pagina con layout gestito via CSS, formata da header, menu sinistro, main.
All'interno del main c'è un altro DIV contenente un'immagine.

Su IE6, se restringo la finestra oltre un certo limite, mi espande in altezza il DIV che contiene l'immagine, spostandomela allineata in basso, per cui mi ritrovo un spazio vuoto tra il titolo e l'immagine.
La cosa non si verifica in firefox.

C'è qualche hack che devo utilizzare?
Grazie,
Rw

Codice: Seleziona tutto
<html>
<head>
<title>TITOLO</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="stile.css" type="text/css">
</head>
<body bgcolor="000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="header">
  <h1>TITOLO</h1>
</div>
<div id="main">
  <div id="menu">
  <ul>
    <li class="menu_lev1"><a href="#">HOME</a></li><li class="menu_lev1"><a href="#">Uno</a></li><li class="menu_lev1"><a href="#">Due</a></li><li class="menu_lev1"><a href="#">Tre</a></li>
  </ul>
  </div>
  <div id="content">
      <div id="fascia"><img src="ni.jpg" width="700" height="173" border="0"></div>
  </div>
</div>
</body>
</html>


stile.css
Codice: Seleziona tutto
BODY {margin: 0; padding: 0; }
#header {margin: 0; padding: 0; border: 1px solid Navy; height: 68px; top: 0; background-color: #009; }
#header H1 {margin: 25px 0 0 250px; color: White; padding: 0;}
#main {margin: 0;}
#menu {margin: 0; width: 199px; float: left; background-color: #EB3;}
#menu ul { list-style-type: none; margin: 0; padding: 0;}
#menu ul li { font-family: Verdana; padding: 0; margin: 0; text-indent: 5px;}
#menu ul li a {text-decoration: none; display: block; padding: 3px; margin: 0;
   border-top: 1px solid #eb0; border-bottom: 1px solid #b70; font-weight: bold; color: Navy;}
#menu ul li a:visited { text-decoration: none;}
#menu ul li a:hover { text-decoration: none; background-color: #FC0; color: red;}
#menu ul li a:active { text-decoration: none;}
.menu_lev1 { font-weight: bold; }
#content {margin: 0 0 0 214px; padding: 5px; border-top: 1px solid white;
                  text-align: center; color: white;}
#fascia {border-width: 2px 1px; border-color: white; border-style: solid;
                  margin: 0 0 10px 0; height: 173px;
- | - | - | - | - | - | - | - | - | - | - | - | -
SOS signore, se l'ex VP ha un tale DNA, non dovremmo tenere l'ACS fuori TV,
xchè senza questo ABC avremmo alla gola l'H2O, o peggio il DDT del KGB...
- | - | - | - | - | - | - | - | - | - | - | - | -
robywan
Utente Junior
 
Post: 68
Iscritto il: 28/08/01 01:00
Località: Cuneo

Sponsor
 

Re: salti di spazio con i DIV su IE6

Postdi archimede » 17/09/05 07:41

robywan ha scritto:Su IE6, se restringo la finestra oltre un certo limite, mi espande in altezza il DIV che contiene l'immagine, spostandomela allineata in basso, per cui mi ritrovo un spazio vuoto tra il titolo e l'immagine.
Non riesco a riprodurre (su IE6): lo spazio fra Tre e l'immagine qui è sempre lo stesso ridimensionando la finestra. Hai un link dove si possa vedere il problema?

Alessandro
archimede
Moderatore
 
Post: 2755
Iscritto il: 07/11/02 12:41
Località: Genova

Postdi robywan » 19/09/05 09:46

Ciao,
ancora meglio del link: riporto il problema in un solo file.

Codice: Seleziona tutto
<html>
<head>
<title>TITOLO</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style TYPE="text/css">
   BODY {margin: 0; padding: 0; background-color: #000;}
   #left {margin: 0; width: 199px; float: left; background-color: #EB3;}
   #right {margin: 0 0 0 214px; padding: 5px; border: 1px solid white; text-align: center;
      color: white; background-color: #3BE;}
</style>
</head>
<body>
  <div id="left">
   <img src="ni.jpg" width="199" height="173" border="0">
  </div>
  <div id="right">
   <img src="ni.jpg" width="700" height="173" border="0">
  </div>
</body>
</html>


Salvati il codice con un nome qualsiasi (esempio.htm).
Rimpicciolisci la finestra e ad un certo punto il box di destra si espanderà verso il basso, con l'area immagine allineata nella parte bassa.

Qualcuno mi ha suggerito di usare delle parti di script:
Codice: Seleziona tutto
<!--[if lte IE 6]>
<style type="text/css">
 #container{ width: expression(document.body.clientWidth<=930 ? "930px" : "auto")}
</style>
<![endif]-->


però IE6 mi chiede di consentirne l'esecuzione... quindi tutti i miei visitatori sarebbero costretti a farlo...
- | - | - | - | - | - | - | - | - | - | - | - | -
SOS signore, se l'ex VP ha un tale DNA, non dovremmo tenere l'ACS fuori TV,
xchè senza questo ABC avremmo alla gola l'H2O, o peggio il DDT del KGB...
- | - | - | - | - | - | - | - | - | - | - | - | -
robywan
Utente Junior
 
Post: 68
Iscritto il: 28/08/01 01:00
Località: Cuneo

Postdi archimede » 19/09/05 12:54

robywan ha scritto:ancora meglio del link: riporto il problema in un solo file.
Il codice è un po' diverso da quello postato originalmente.

Comunque prova con: #right {margin: 0 0 0 0px;....

HTH.

Alessandro

PS: toglierei anche le dimensioni dal tag img, a meno che non strettamente necessarie.
archimede
Moderatore
 
Post: 2755
Iscritto il: 07/11/02 12:41
Località: Genova

Postdi robywan » 20/09/05 08:14

Ciao Ale,
archimede ha scritto:Il codice è un po' diverso da quello postato originalmente.

Sì è vero, ma ho semplicemente sfrondato tutto quello che non influiva sul comportamento anomalo e lasciato l'essenziale.

archimede ha scritto:Comunque prova con: #right {margin: 0 0 0 0px;....

Ho provato, ma è peggio: il div di destra si espande a tutta larghezza andando sotto quello di sinistra e su entrambi i browser, stringendo la finestra, non compare lo scorrimento laterale: l'immagine di destra slitta sotto.

archimede ha scritto:PS: toglierei anche le dimensioni dal tag img, a meno che non strettamente necessarie.

In questo ho creato l'esempio senza allegare immagini, quindi sono stato costretto ad indicare le dimensioni.
Grazie,
Rw
- | - | - | - | - | - | - | - | - | - | - | - | -
SOS signore, se l'ex VP ha un tale DNA, non dovremmo tenere l'ACS fuori TV,
xchè senza questo ABC avremmo alla gola l'H2O, o peggio il DDT del KGB...
- | - | - | - | - | - | - | - | - | - | - | - | -
robywan
Utente Junior
 
Post: 68
Iscritto il: 28/08/01 01:00
Località: Cuneo

Postdi archimede » 20/09/05 09:19

robywan ha scritto:Ho provato, ma è peggio
Questa è un'opinione: secondo me è diverso. Il problema da te lamentato era:
robywan ha scritto:se restringo la finestra oltre un certo limite, mi espande in altezza il DIV che contiene l'immagine, spostandomela allineata in basso, per cui mi ritrovo un spazio vuoto tra il titolo e l'immagine
Non sapendo l'effetto da te desiderato, ho suggerito il modo più veloce (per me) di curare il sintomo.

Ora che intuisco quello che vuoi, suggerisco:
Codice: Seleziona tutto
<html><head>
<title>TITOLO</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style TYPE="text/css">
BODY {
margin: 0px;
padding: 0px;
background-color: #000;
}
#Container {
   text-align: left;
   width: 900px;
   margin: 0 auto;
   position:relative;
}
#left {
margin: 0px;
padding: 0px;
width: 199px;
float: left;
background-color: #EB3;
}
#right {
margin: 0px;
padding: 5px;
border: 1px solid white;
text-align: center;
color: white;
background-color: #3BE;
}
</style>
</head>
<body>
<div id="container">
  <div id="left">
   <img src="12062.jpg" border="0">
  </div>
  <div id="right">
   <img src="12062.jpg" border="0">
  </div>
</div>
</body></html>
HTH.

Alessandro
archimede
Moderatore
 
Post: 2755
Iscritto il: 07/11/02 12:41
Località: Genova


Torna a Programmazione


Topic correlati a "salti di spazio con i DIV su IE6":


Chi c’è in linea

Visitano il forum: Nessuno e 7 ospiti