Div, diverso comportamento ie e Mozilla/Opera

**SGr33n** · 10-10-2004, 20:36

Ciao a tutti,

In questa pagina fatta con div, ie non assegna il giusto margine dato, mentre opera e mozilla si, qualcuno mi sa dare una mano ?

Grazie 1000

codice:

<html>

<head>

<style>
.contLargo {
	width: 502px;
	float: left;
}

.rubricheTit {
	margin: auto;
	margin-left: 4px;
	margin-top: 6px;
	float: left;
}

.rubricheDesc {
	width: 190px;
	text-align: left;
	margin-left: 14px;
	margin-top: 16px;
	float: left;
}

#rubricheBoxSx {
	background-image: url('../images/box_rubriche_bg.png');
	width: 246px;
	height: 155px;
	color: #4D4D9E;
	font-family: Verdana, Arial;
	font-size: 11px;
	margin-left: 0;
	margin-right: 10px;
	float: left;
}

#rubricheBoxDx {
	background-image: url('../images/box_rubriche_bg.png');
	width: 246px;
	height: 155px;
	color: #4D4D9E;
	font-family: Verdana, Arial;
	font-size: 11px;
	margin-left: 0;
	margin-right: 0;
	float: left;
}
</style>

</head>
<body>

<div class="contLargo">
<div id="rubricheBoxSx">
<div class="rubricheTit">
[img]images/bacheca.gif[/img][img]images/turismo.gif[/img]</div>
<div class="rubricheDesc">prova prova prova prova prova prova prova prova prova prova</div></div>				<div id="rubricheBoxDx">
<div class="rubricheTit">
[img]images/bacheca.gif[/img][img]images/turismo.gif[/img]</div>
<div class="rubricheDesc">prova prova prova prova prova prova prova prova prova prova</div></div>

</body>
</html>

**Jerry Masslo** · 10-10-2004, 21:39

è comodo mettere il codice però usi immagini e non si vedono ho un po' rimediato colorando gli sfondi ma le immagini nello html non hanno nemmeno grandezza assegnata da intuirsi e non vedo particolari problemi se non di pochi pixel ma non lo hai specificato comunque:

ho notato un align="absmiddle" che è buono solo per dtd transitional per l'absmiddle non saprei, nemmeno l'ho trovato forse corrisponde a un vertical-align:middle?

in ogni caso se metti nel css un

*{margin:0;padding:}

normalizzi tutti i padding o margin di default eventualmente differenti tra i browser che poi assegni come ti pare

**SGr33n** · 10-10-2004, 23:07

grazie

provo ad eliminare tutti i padding

Cmq absmiddle è riferito alle immagini, serve ad allinearle verticalmente come hai già capito. Dovrebbe essere html tradizionale... il vertical align middle nn mi ha mai funzionato... bah.

Grazie

**SGr33n** · 10-10-2004, 23:58

stesso risultato cmq :\

è vero, nn ho postato le immagini, ma cmq dovrebbe rendere l'idea... se vedi, l'immagine con class .rubricheTit ha + margine a sinistra che non in alto, eppure a sinistra le viene dato 4 ed in alto 6 px.

Opera e Mozilla invece visualizzano il tutto correttamente.

Qualcuno mi sa aiutare pls ?

**Jerry Masslo** · 11-10-2004, 03:38

non ho ricontrollato ma non avevo notato niente di anomalo fra i browser, tu su cosa fai i controlli?

se non si vede la differenza c'è poco da fare e le immagini non si vedono e non si immaginano, non hanno neanche dimensioni

absmiddle

http://www.w3schools.com/tags/tag_img.asp

qui non lo trovo e vertical-align:middle ha sempre funzionato se si sa cosa fa e non si pensa di fargli fare cose che non deve fare

http://www.w3schools.com/tags/tag_img.asp

se metti un link e specifichi esattamente cosa non ti va e su quale browser forse si capisce di più

**SGr33n** · 11-10-2004, 09:46

Come ho detto nel primo post, con IE i margini del div rubricheBoxSx e rubricheBoxDx non risultano giusti... con opera e mozilla invece si.

Ho riscritto l'esempio, ed ora si nota che sebbene la classe rubricheTit (rappresentata da un quadrato bianco con all'interno il numero 1, abbia più margine superiore che sinistro rispetto al div incriminato (rubricheBoxSx), visivamente su IE ne appare di + a sinistra che non in alto... più precisamente quello in alto sembra rappresentato bene (6px) quello sinistro (4px) è notevolmente maggiore.

codice:

<html>

<head>

<style>
.contLargo {
	width: 502px;
	float: left;
}

.rubricheTit {
	margin: auto;
	margin-left: 4px;
	margin-top: 6px;
	float: left;
}

.rubricheDesc {
	width: 190px;
	text-align: left;
	margin-left: 14px;
	margin-top: 16px;
	float: left;
}

#rubricheBoxSx {
	background-color: #ff0000;
	width: 246px;
	height: 155px;
	color: #4D4D9E;
	font-family: Verdana, Arial;
	font-size: 11px;
	margin-left: 0;
	margin-right: 10px;
	float: left;
}

#rubricheBoxDx {
	background-color: #ff0000;
	width: 246px;
	height: 155px;
	color: #4D4D9E;
	font-family: Verdana, Arial;
	font-size: 11px;
	margin-left: 0;
	margin-right: 0;
	float: left;
}
</style>

</head>
<body>

<div class="contLargo">
<div id="rubricheBoxSx">
<div class="rubricheTit">
<table width="20" height="10">
<tr>
<td bgcolor=#ffffff>1
</td>
</tr>
</table>
</div>
<div class="rubricheDesc">prova prova prova prova prova prova prova prova prova prova</div></div>
<div id="rubricheBoxDx">
<div class="rubricheTit">
<table width="20" height="10">
<tr>
<td bgcolor=#ffffff>1
</td>
</tr>
</table></div>
<div class="rubricheDesc">prova prova prova prova prova prova prova prova prova prova</div></div>

</body>
</html>

**Jerry Masslo** · 11-10-2004, 13:42

non pensare voglia fare il pignolo ma ora nel tuo codice sono comparse tabelle, se le mettevi all'inizio neanche ti avrei risposto, non me ne occupo solitamente, usando pure attributi non consentinti come height nel tag table, cioè se vuoi roba cross-browser che almeno il codice sia valido, no?

**SGr33n** · 11-10-2004, 15:58

Le tabelle le ho inserite al posto delle immagini per rendere l'idea, infatti il difetto lo fa anche con queste.

**Jerry Masslo** · 11-10-2004, 17:10

ti chiedo qualcosa ma non credo sia troppo, ho un po' di cose da fare e non vorrei trovare pure il tempo per organizzare i tuoi problemi, cioé se posti un esempio valido possibilmente senza tabelle ci posso buttare un occhio ma non lo butto in posti dove c'è una table con un height nel tag, non m'interessa cosa fanno i browser in questi casi che non dovrebbero affrontare.

**SGr33n** · 11-10-2004, 22:12

Non vorrei polemizzare ma lo spirito del forum non è aiutarsi l'un l'altro? se nn hai tempo nessuno ti costringe a rispondere, io stesso dò una mano nella sez ASP, ma solo quando ho tempo. Ad ogni modo, grazie.

Discussione: Div, diverso comportamento ie e Mozilla/Opera

Strumenti discussione

Ricerca discussione

Visualizza

Div, diverso comportamento ie e Mozilla/Opera

Permessi di invio