aiuto per spazi tra Forefox e IE

**darkiko** · 09-05-2005, 17:44

sti maledetti css mi stanno facendo impazzire..

nel css esterno ho

codice:

body {
margin-top:3px;
margin-left:10px;
margin-bottom:10px;
color:#333;
background-color:white;
padding:0px;
font:11px verdana, arial, helvetica, sans-serif;
}
#container {
width: 760px;
margin: 0px;
padding: 0px;
}
.centrale {
width: 760;
height:auto;
border-bottom:0px;
border-top:0px;
border-left:1px solid #B9B9B9;
border-right:1px solid #B9B9B9;
padding:0px;
margin:0px;
}
.grigio01 {
width:auto;
margin:0px;
border-left:1px solid #B9B9B9;
border-right:1px solid #B9B9B9;
border-bottom:1px solid #B9B9B9;
background-color:F5F5F5;
padding:6px;
font:#333;
}
.grigio02 {
width:auto;
margin:0px;
border-left:1px solid #B9B9B9;
border-right:1px solid #B9B9B9;
border-bottom:1px solid #B9B9B9;
background-color:EEE;
padding:6px;
font:#333;
}
#blocco50_sx{
margin:0;
padding: 6px;
width:330;
float:left;
}
#blocco50_dx{
margin:0;
padding: 6px;
width:405;
float:right;
}
#blocco30_sx{
margin: 0px;
padding: 6px;
width:245px;
float:left;
}
#blocco30_cn{
margin:0px 251px 0px 251px;
padding: 6px;
width:245px;
}
#blocco30_dx{
margin:0px;
padding: 6px;
width:245px;
float:right;
}

mentre nell'html ho sta roba qua..

codice:

<html>
<head>
	<title>TITLE</title>
	<link href="styles/style_tabless.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">

<div id="testata"><img src"blablabla...">
</div>



<div class="centrale">
	<div id="blocco50_sx">
			<h2>TESTO TESTO</h2>
			<div class="grigio01">testo testo..
			</div>
	</div>
	<div id="blocco50_dx">
			<h2>TESTO TESTO</h2>
			<div class="grigio02">testo testo..
	  		</div>
	</div>
</div>


<div class="centrale">
	<div id="blocco30_sx">
			<h2>TESTO TESTO</h2>
			<div class="grigio02">testo testo..
			</div>
	</div>
	<div id="blocco30_dx">
			<h2>TESTO TESTO</h2>
			<div class="grigio02">testo testo..
                        </div>
        </div>
	<div id="blocco30_cn">
			<h2>TESTO TESTO</h2>
			<div class="grigio02">testo testo..
			</div>
	</div>
</div>


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

senza !DOCTYPE perché non so quale debba usare..
ma con FF si vede così

mentre con IE si vede così:

la visualizzazione che dovrebbe essere corretta è, manco a dirlo, quella di FF.. come posso correggere il codice per avere almeno più o meno lo stesso risultato?

altre due domande:
1) sto facendo un gran casino col codice vero? mi sa che ho ancora la mente a tabelle
2) visto che non ne so nulla, come faccio a sapere il DOCTYPE da usare (se ne devo usare uno)?

grazie e scusate per la banalità delle domande..

**whiteduke** · 09-05-2005, 17:58

per prima cosa attenzione alla ripetizione degli id: id="blocco50_sx". Secondo prova a settare come interessa a te i tag <h2> es:

h2 {
color: #f0f;
font-size: 1em;
margin:5px;
}

spero di essere stato utile in parte. ciao

**darkiko** · 09-05-2005, 18:02

Originariamente inviato da whiteduke
per prima cosa attenzione alla ripetizione degli id: id="blocco50_sx". Secondo prova a settare come interessa a te i tag <h2> es:

h2 {
color: #f0f;
font-size: 1em;
margin:5px;
}

innanzitutto grazie per la risposta.. a leggere le 1000 righe di codice hai avuto una gran pazienza

poi dunque, gli h2 sono così

codice:

h2 {
font:normal 12px/14px verdana, arial, helvetica, sans-serif #333;
margin:0px 0px 5px 0px;
padding:4px;
border-bottom:1px dashed #B9B9B9;
}

ma quello che mi disturba di più sono gli spazi immensi che IE lascia tra un box grigio e l'altro..

**Mich_** · 09-05-2005, 18:02

Senza DOCTYPE non sai come verra` interpretato il tuo codice.

Quindi per prima cosa metti un doctype.
http://www.w3schools.com/tags/tag_doctype.asp

Mi pare che la tua pagina sia fatta bene, per cui un XHTML Transitional dovrebbe andare piu` che bene. Poi se vuoi fare un passo avanti, prova una DTD XHTML Strict e valida la tua pagina con i validatori (sia HTML che CSS).

**darkiko** · 09-05-2005, 18:08

Originariamente inviato da Mich_
Mi pare che la tua pagina sia fatta bene, per cui un XHTML Transitional dovrebbe andare piu` che bene.

mi sa mica troppo

se provo ad aggiungere

codice:

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

ogni box oltre a perdere il suo colore di sfondo si sposta anche (i primi due ad esempio si mettono lungo tutta la pagina uno sotto l'altro..)..

mi sa che devo rivederla un bel po' sta pagina..

**darkiko** · 09-05-2005, 18:15

Originariamente inviato da darkiko
mi sa che devo rivederla un bel po' sta pagina..

sistemando un bel po' di imprecisioni (soprattutto 'px' e '#' mancanti) col DOCTYPE indicato da Mich_ ora va quasi bene.. solo IE mi piazza il box sotto centrale su una terza riga che non dovrebbe esserci ma mo' risolvo..

edit: riducendo un po' la grandezza di quel box si è riallineato con gli altri due..
con la dichiarazione del DOCTYPE anche gli spazi tra i box ora paiono essersi sistemati abbastanza bene..
davvero 1000 GRAZIE Mich_

mi resta solo una curiosità: sto facendo un gran casino o più o meno sono sulla strada giusta?

**darkiko** · 10-05-2005, 16:49

uppo questa discussione così non ne apro 1000 per i miei problemi da principiante..

per ora va tutto bene ma mi sono scontrato con questo problema:
dovevo fare due div alti uguale, allora ho fissato una grandezza fissa ad un div contenitore così che se cambiano i contenuti cambio solo quella, e ho cercato di adattare i div contenuti alla sua altezza con un height:100%; ma ecco i due risultati su IE e su FF:

IE:

FF:

quelli che ho cercato di allineare finora sono i due div in alto e (come si vede) incredibilmente il risultato "giusto" è quello di IE, mentre FF sborda andando a coprire i div sottostanti..
ecco il codice del css:

codice:

.centrale{
width:760px;
height:auto;
border-bottom:0px;
border-top:0px;
border-left:1px solid #B9B9B9;
border-right:1px solid #B9B9B9;
padding:0px;
margin:0px;
}
#centrale1{
width:760px;
height:300px;
border-bottom:0px;
border-top:0px;
border-left:1px solid #B9B9B9;
border-right:1px solid #B9B9B9;
padding:0px;
margin:0px;
}
#centrale2{
width:760px;
height:200px;
border-bottom:0px;
border-top:0px;
border-left:1px solid #B9B9B9;
border-right:1px solid #B9B9B9;
padding:0px;
margin:0px;
}
#blocco50_sx{
margin:0px;
padding: 6px;
width:330px;
float:left;
height:100%;
}
#blocco50_dx{
margin:0px;
padding: 6px;
width:406px;
float:right;
height:100%;
}
#blocco30_sx{
margin: 0px;
padding: 6px;
width:240px;
float:left;
}
#blocco30_cn{
margin:0px 251px 0px 251px;
padding: 6px;
width:238px;
}
#blocco30_dx{
margin:0px;
padding: 6px;
width:240px;
float:right;
}
.grigio01 {
width:auto;
height:100%;
margin:0px;
border-left:1px solid #B9B9B9;
border-right:1px solid #B9B9B9;
border-bottom:1px solid #B9B9B9;
background-color:#F5F5F5;
padding:6px;
font:#333;
}
.grigio02 {
width:auto;
height:100%;
margin:0px;
border-left:1px solid #B9B9B9;
border-right:1px solid #B9B9B9;
border-bottom:1px solid #B9B9B9;
background-color:#EEE;
padding:6px;
font:#333;
}

e ecco l'html

codice:

<div id="centrale1">
	<div id="blocco50_sx">
			<h2>TESTO TESTO</h2>
			<div class="grigio01">[img]img/quad.gif[/img]testo testo...
			</div>
	</div>
	<div id="blocco50_dx">
			<h2>TESTO TESTO</h2>
			<div class="grigio02">testo testo...
	  		</div>
	</div>
</div>

<div class="centrale"><hr><hr></div>

<div id="centrale2">
	<div id="blocco30_sx">
			<h2>TESTO TESTO</h2>
			<div class="grigio02">testo testo...
			</div>
	</div>
	<div id="blocco30_dx">
			<h2>TESTO TESTO</h2>
			<div class="grigio02">testo testo...
			</div>
	</div>
	<div id="blocco30_cn">
			<h2>TESTO TESTO</h2>
			<div class="grigio02">testo testo...
			</div>
	</div>
</div>

dove sbaglio? :master:

Discussione: aiuto per spazi tra Forefox e IE

Strumenti discussione

Ricerca discussione

Visualizza

aiuto per spazi tra Forefox e IE

Permessi di invio