comportamento diverso di un div tra IE e FF

**danielix05** · 27-03-2009, 11:08

Buongiorno a tutti,
dato il seguente codice css

codice:

#contents { margin:0px 0 0px 0px ;text-align:left;}

#textcontents { padding: 6px; margin-left: 250px; text-align: left; background-color: #E8E8E8;}
#textcontents H1 { font: bold 14px Tahoma; margin-left: -6px; padding: 15px 0px 0px 15px; background:url(immagini/car-film-freccia-dx.jpg) no-repeat left bottom; }
#textcontents p { width: 392px; padding-left: 8px; padding-right: 8px; }

#menu { width:240px; float: left; text-align:center;}
#menu H1 {FONT-SIZE: 15px; color :#666666; margin: 0px; padding-bottom: 5px; text-align:left}


div#container {	width: 100%; text-align: left; }
div.split div { float: left; }
div.split2 div { float: left; background:#FFFFFF; width: 720px; border: 2px solid }
div.wide { clear: left;}

ricavo questo html

codice:

..........
<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->


</head>

<body>

<table id="table" width="980px" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td>

<div id="contents">


<div id="menu">
	[img]immagini/logo.gif[/img]
    

    
    <div class="head">NEWS DAL MONDO DEI MOTORI</div>
    	<div class="title">Titolissimo</div>
        <div class="contentsx">
        	Testo testo testo testo...
        </div>

    <div class="head">NEWS DAL MONDO DEI MOTORI</div>
    	<div class="title">Titolissimo</div>
        <div class="contentsx">
        	Testo testo testo testo...
        </div>


    <div class="box">
    <h1>Installiamo pellicole</h1>
        <div class="contentsx">
        Installiamo per case private, istituzioni, centri commerciali, musei, scuole o altro...
        </div>
    </div>

</div>





      <div id="textcontents">
        <?php include("menu.php"); ?>

        [img]immagini/film.jpg[/img]

<div id="container">
<div class="split">
   <div>
      <h1>I VANTAGGI DELL'OSCURAMENTO</h1>
        

Testo testo testo</p>
   </div>
   <div style="margin-top:25px">
      [img]immagini/oscuramento-vetri-macchina1.jpg[/img]
   </div>
</div>

<div class="wide"></div>
</div>

      </div>



      
      </div>

	<table width="720px" align="right">
    <tr><td align="left">
      Credits 1
    </td>
    <td align="right">
      Credits 2
    </td>
    </tr></table>
    
      </td>
  </tr>
</table>
</div>

il problema è che IN IE la parte destra in grigio si ferma quando finiscono i rispettivi contenuti senza seguire i contenuti della sinistra (chiamato DIV MENU). CON FIREFOX, invece, finiti i contenuti di destra il div continua ad allungarsi fintanto c'è testo nella parte sinistra.

Praticamente quello che sto cercando di fare con l'ultima tabella è che, al finire del Div Centrale (indipendentemente da quanto è sceso giù il div Menu) si dovrebbe posizionare un div o una tabella con i credis con sfondo bianco.

cosa posso fare?
grazie.

**FixFix** · 27-03-2009, 13:38

non ti so dare una risposta precisa senza debuggare... però sicuramente il clear nel css si comporta diversamente tra FF e IE, inoltre le dimensioni di un div cambiano tra FF e IE se c'è del padding , quindi occhio.

quando ti scontri con questi problemi, devi metterlo a posto per firefox, che segue lo standard w3c e poi fai delle correzioni solo per IE nei css.

cerca su google "css IE hacks" e vedrai i modi per dare dei comandi css che vengono letti solo da IE

**danielix05** · 27-03-2009, 13:41

il problema è che non riesco a determinare dove sta l'inghippo...
perchè il div di destra si sposta nonostante non sia riempito di contenuto... :master:

**FixFix** · 27-03-2009, 13:47

il codice è tutto li ?

**danielix05** · 27-03-2009, 14:06

si il codice che serve credo sia tutti li

ho provato a fare in questo modo, aggiungendo la position 'absolute'

codice:

#textcontents { padding: 6px; margin-left: 250px; text-align: left; background-color: #E8E8E8; position:absolute}

più o meno ci siamo... ma solo con FF mentre IE sfasa i div di destra.

Oh incredibile l'ultimo pezzo di codice mi sta facendo impazzire...

**FixFix** · 27-03-2009, 16:19

#contents { margin:0px 0px 0px 0px ;text-align:left; position: absolute}

#textcontents { margin-left: 0px; text-align: left; background-color: #E8E8E8; position: absolute}
#textcontents H1 { font: bold 14px Tahoma; margin-left: -6px; padding: 15px 0px 0px 15px; background:url(immagini/car-film-freccia-dx.jpg) no-repeat left bottom; }
#textcontents p { width: 392px; padding-left: 8px; padding-right: 8px; }

html>body #textcontents {

margin-left: 250px /* ..or this reinforcement of the standards width. */

}

#menu { width:240px; float: left; text-align:center;}
#menu H1 {FONT-SIZE: 15px; color :#666666; margin: 0px; padding-bottom: 5px; text-align:left}

div#container { width: 100%; text-align: left;}
div.split div { float: left; }
div.split2 div { float: left; background:#FFFFFF; width: 720px;}
div.wide { clear: left;}

**FixFix** · 27-03-2009, 16:20

così funziona, devi solo rimetterti a posto i margini che li ho tolti

**mcfede88** · 28-03-2009, 13:40

Secondo me dovresti togliere la tabella che ti crea solo problemi e fare in questo modo.

css

#container {
widht: 980px;
margin: 0px;
padding: 0px;
}

body {
padding: 0px;
margin: 0px;
}

---corpo della pagina--

#content {
widht: 980px;
height: auto;
}

#footer {
widht: 980px;
clean: both;
}

html

<html>
<head>
<title></title>
</head>
<body>
<div id="container">
<div id="content">
</div>
<div id="footer>
</div>
</div>
</body>
</html>

se hai problemi questo è il mio indirizzo msn mcfede88@hotmail.com

Discussione: comportamento diverso di un div tra IE e FF

Strumenti discussione

Ricerca discussione

Visualizza

comportamento diverso di un div tra IE e FF

grazie FixFix

Permessi di invio