Newsgroup: it.comp.www.html
Titolo: Amara sorpresa nella visualizzazione di una pagina tra IE6 e Firefox2

Avevo già aperto questo topic, ma non so per quale motivo non sia visibile.
Lo ripropongo.
Stavo verificando con Firefox versione 2.0 (appena scaricata via google) una
pagina HTML che ho creato e che normalmente verifico con IE 6.0 .
Beh, l'amara sorpresa è che la pagina si presenta a piramide rovesciata e i
dati esposti che in IE  vengono visualizzati giustamente su più righe,
spesso vengono raggruppati su una stessa riga.
Sapevo di alcune differenze fra IE e Firefox, ma non pensavo di vedere un
disastro di queste proporzioni.
Che differenze sostanziali ci sono fra i due browser?
Grazie
Ciao
Eugenio
********************
Dopo l'invio del post ho pensato che il è relativo alla dimensionamento di
DIV (width in %).
Che siano differenti considerazioni del DIV tra IE e Firefox?
Mi ricordo di aver letto in qualche manuale che IE sembra fare
considerazioni errate, ma premesso che potrei aver centrato in pieno la
"considerazione sbagliata", è possibile che Firefox ignora completamente
quanto descrito in style del div?
Rigrazie
:-)
--
Newsgroup robomoderato - gli articoli vengono approvati automaticamente

 DIV (width in %).
nessuno di noi non disponendo di una sfera magica non potra' 
mai aiutarti, se non posti il codice
Ciao



Nessuno mi può dare conferme in merito?
Riporto la pagina HTML
**************************************************************
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Menù</title>
<link rel="stylesheet" type="text/css" href="SSRMA.css"/>
</head>
<body>
<div id="Pagina">
  <div id="Testa">
    <div id="TestaLogo"><img src="Images/Logo.gif"  /></div>
  </div>
<form action='Menu.php' method='post'>
     <div id='Corpo'>
        <div id='CorpoCen100'>100</div>
        <div id='CorpoCen100'>100</div>>
        <div id='CorpoCen20'>20</div>
        <div id='CorpoCen29'>Effettuare una selezione</div>
        <div id='CorpoCen50'>50</div>
        <div id='CorpoCen100'>100</div>
        <div id='CorpoCen20'>20</div>
        <div id='CorpoCen29' style='text-align:
left;'>*&nbsp;&nbsp;&nbsp;<a href="menuprova.html">Inserimento/
modifica richiesta di R.M.A.</a></div>
        <div id='CorpoCen50'>50</div>
        <div id='CorpoCen20'>20</div>
         <div id='CorpoCen29' style='text-align:
left;'>*&nbsp;&nbsp;&nbsp;<a href="menuprova.html">Elenco R.M.A. </a></
div>
        <div id='CorpoCen50'>50</div>
        <div id='CorpoCen100'>100</div>
        <div id'CorpoCen100' style='text-align: center;'>
	<input name='seen_already' type='hidden' value='hidden_data' />
        </div>
        <div id='CorpoCen100'>100</div>
    </div>
</form>
  <div id="Piede"><p id="PPiede" > Fine pagina </p></div>
</div>
</body>
</html>
</body>
</html>
Di seguito il foglio di stile (SSRMA.css), almeno nelle parti che
interessano la suddetta pagina
body
{
background: white;
text-align: center;
 font-family : Verdana, Courier;
}
P#PTitolo
{
color: #868686;
font-family : Verdana, Courier;
font-size : 18px;
}
P#PCorpo
{
color: black;
font-family : Verdana, Courier;
font-size : 10px;
}
P#PPiede
{
text-align: center;
color: #868686;
font-family : Verdana, Courier;
font-size : 10px;
}
DIV#Pagina
{
width: 99%;
height: 500px;
}
DIV#Testa
{
width: 100%;
height: 125px;
border: 1px solid white;
}
DIV#TestaLogo
{
width: 100%;
height: 125px;
}
DIV#Corpo
{
width: 100%;
height: 340px;
border: 1px solid white;
}
DIV#CorpoCen100
{
display: inline;
width: 100%;
height: 25px;
text-align: center;
vertical-align: middle;
color: black;
font-family : Verdana, Courier;
font-size : 11px;
border: 1px solid #d3d3d3;
}
DIV#CorpoCen20
{
display: inline;
width: 20%;
height: 25px;
text-align: right;
vertical-align: middle;
color: black;
font-family : Verdana, Courier;
font-size : 11px;
border: 1px solid #d3d3d3;
}
DIV#CorpoCen29
{
display: inline;
width: 29%;
height: 25px;
text-align: left;
vertical-align: middle;
color: black;
font-family : Verdana, Courier;
font-size : 11px;
border: 1px solid #d3d3d3;
}
DIV#CorpoCen50
{
display: inline;
width: 50%;
height: 25px;
text-align: left;
vertical-align: middle;
color: black;
font-family : Verdana, Courier;
font-size : 11px;
border: 1px solid #d3d3d3;
}
DIV#Piede
{
width: 100%;
height: 10px;
}
DIV#Title
{
display: inline;
width: 60%;
height: 29px;
background-color: #868686;
text-align: left;
vertical-align: middle;
color: white;
font-family : Verdana, Courier;
font-size : 16px;
font-weight: bold;
}
A:link
{
color: black;
text-decoration: none;
}
A:visited
{
color: black;
text-decoration: none;
}
A:hover
{
color: black;
text-decoration: underline;
}
Quindi con Firefox e Opera la pagina si presenta con un'unica riga,
salvo immagine e piede.
Sembra che non vengano considerati dimensioni di DIV (width e height),
allineamento del testo, dimensioni e allineamento che invece viene
rispettato da IE.
Nulla cambia se invece di definire id (# in css) assegno class(. in
css).
Al di là delle noiose considerazioni IE fa schifo e gli altri no, come
qualcuno ha fatto, è necessario dichiarare in modo particolare i css
in Firefox e Opera, visto che invece IE sembra non aver particolari
problemi?
Grazie
Ciao


         <div id='CorpoCen100'>100</div>
Ogni id deve essere unico nella pagina, non puoi usare lo stesso id per
piu` di un elemento.
Bye.


 --
Ok, questa è un errore, anche se IE lo tollera, però non è la
soluzione del mio problema, perchè, come ho già detto nel precedente
post, anche se modifico sia html che css in modo da impostare class
invece che id, il risultato non cambia.
Per avere il mio div largo 100%, non devo definire nessun id o class
al div.
Infatti se scrivo la riga del file html in questo modo
<div class="CorpoCen100" style="width: 100%; height: 25px; text-align:
left;	 border: 1px solid black;">100</div>
le proprietà di style vengono ignorate. Per assurmerle devo togliere
class="CorpoCen100".
E' normale?
Grazie
Ciao


 class="CorpoCen100".
Le proprieta` che definisci in style sono quelle con priorita` piu` alta.
Questo significa che a quel div vengono prima applicate tutte le
proprieta` di CorpoCen100 (nome poco semantico, a dire il vero), e poi
alcune vengono sovrascritte da quelle contenute in style.
Ti avviso pero` che quel div non ci sta`, visto che e` largo 2 pixel (il
border) piu` del suo contenitore, quindi per forza di cose va a capo
finche` non trova posto nella pagina.
Studia il box model (larghezza totale = width+padding+border+margin), e
imposta il doctype su IE per usare lo standards mode. Vedrai che anche IE
si comportera` (quasi) come Firefox.
Bye.


 finche` non trova posto nella pagina.
Il fatto è che non va a capo, ma riduce il div alla dimensione di 3
caratteri, giusto lo spazio del 100.
Ho trovato uno spazio web per fare le mie prove e per comodità riporto
due versioni della pagina.
Nella prima dò per scontato (probabilmente in modo errato, ma IE lo
digerisce) che se un div è definito come larghezza il 100% della riga,
il successivo div va a capo e per questo dopo il div non ho messo
<br>.
http://epsoftlab.helloweb.eu/menuprova.html
verifica (se hai tempo) il rettangolo rosso, ovvero il div al quale ho
impostato diverse proprietà nel file html.
Nella seconda ho messo <br> in fondo ad ogni gruppo di div che
compongono la riga
http://epsoftlab.helloweb.eu/menuprovabr.html
Per IE nulla cambia, per Firefox sono due visualizzazioni diverse e i
div (100) non sono il 100%.
Quello che non capisco è perchè Firefox non assume le proprietà che
gli ho assegnato.
Dove sbaglio?
Grazie
Ciao


 si comportera` (quasi) come Firefox.
Hai ragione!!!!
Ma continuo a non capire, perchè il width:100%, o inferiore, venga
ignorato o annullato.


 caratteri, giusto lo spazio del 100.
OK, ho capito l'inghippo, non me n'ero accorto prima.
Tu definisci il div come "display: inline", che impone a Firefox (come
da specifiche css) di ignorare il width.
Ti conviene togliere il display (quindi diventa "display: block" di
default per i div) e rivedere il layout.
me ne sono accorto usando firefox e firebug. Ti consiglio di installarli
perche` sono molto utili quando hai pagine e css molto lunghi e con molti
tag e proprieta`.
Bye.



Noooo!!!
Ma se tolgo inline come posso mettere tre div sulla stessa riga?
Forse è il caso che metta definitivamente da parte i div e torni alle
tabelle.



Noooo!!!
Ma se tolgo inline come posso mettere tre div sulla stessa riga?
Forse è il caso che metta definitivamente da parte i div e torni alle
tabelle.
--


 tabelle.
Forse e' il caso che ti studi i css prima di fare altre 
domande e di fare affermazioni non-sense? :)
Scusa ma nel 2007 non mi pare il caso di strutturare un sito 
con le tabelle(ma neanche prima :) ),poi sei libero di fare 
come vuoi!
Ciao


e leggiti anche "progettare siti web standard" di Zeldman
