lista non ordinata che esce dal div.. la colpa è di iexplorer o firefox ?

**dops** · 29-05-2007, 10:36

Ciao, non riesco a capire perchè una lista non ordinata, pur stando nel tag div, su firefox esce fuori mentre su iexplorer no.. a supporto vi invio due immagini..
la situazione è questa:
l'html

codice:

        <div id="fo_MasterContainer">
            <div id="fo_MasterHeader">
                [img]xxxxxxxxx[/img]</div>
            <div id="fo_MasterMenuContainer">
                <ul>[*]home[*]english version[*]contatti[*]mappa[*]area riservata[/list]
                
                <span id="searchContainer">cerca<asp:TextBox ID="AAA" CssClass="fo_txtMasterMenuRicerca"
                    runat="server"></asp:TextBox>[img]fo_images/arrow_right.gif[/img]</span>
            </div>
        </div>

Le regole:

codice:

/* front office master body*/
body
{
	margin-top: 10px;
	text-align: center;
}
/* contenitore dei livelli*/
#fo_MasterContainer
{
	width:860px;
	padding:0 auto; 
	margin:0 auto;
	text-align: center;
}
/* livello container dell'header*/
#fo_MasterHeader
{
	width: 860px;
	margin:0 0 2px 0;
}
/* livello container del menu principale*/
#fo_MasterMenuContainer
{
	width: 860px;
	padding: 0px;
	text-align:left;
	border-style:solid;
	border-color:Fuchsia;
	border-width:1px;
}
/* menu principale non ordinato */
#fo_MasterMenuContainer ul
{
	list-style: none;
	margin: 0 auto;
	padding: 0 auto;
	text-align:left;
}
/* elementi del menu non ordinato*/
#fo_MasterMenuContainer ul li
{
	float: left;
	margin: 0 2px 0 0;
	padding: 5px 0 5px 0;
	background-color: #0B4479;
	text-align: center;
}
/* links del menu principale*/
#fo_MasterMenuContainer a
{
	display: block;
	font-family: Verdana;
	font-size: 12px;
	font-weight: normal;
	text-decoration: none;
	color: #ffffff;
}

/* hover dei links del menu principale*/
#fo_MasterMenuContainer a:hover
{
	font-family: Verdana;
	font-size: 12px;
	font-weight: bold;
	text-decoration: none;
}
/* contenitore degli elementi di ricerca del menu principale*/
#searchContainer
{
	float:left;
	font-family: Verdana;
	font-size: 12px;
	font-weight: normal;
	text-decoration: none;
	text-align:center;
	color: #ffffff;
	width:240px;
	padding: 2px 0 3px 0;
	margin:0 0 0 0;
	background-color:#0B4479;
}
/* textbox di ricerca del menu principale*/
.fo_txtMasterMenuRicerca
{
	border-style: none;
	height: 15px;
	background-color: #ffffff;
	width: 140px;
	margin: 0 0 0 6px;
	
}
/* immagine del pulsante di ricerca del menu principale*/
.fo_imgMasterMenuRicerca
{
	vertical-align: middle;
	margin-left:15px;
	
}

**blekm** · 29-05-2007, 10:51

cosi, senza guardare il codice, direi che è un problema di dimensioni... prova a specificare la dimensione per ogni contenitore...

PS: io quando realizzo un layout, mi sballa sempre su IE

. Ovviamente, inizio con FF, che ha una migliore interpretazione delle regole CSS. E poi devo bestemmiare quando faccio le prove su IE...

**Mich_** · 29-05-2007, 11:09

Anzitutto e` un bel rischio scrivere dimensioni in px per blocchi che contengono del testo. Prova a ingrandire il carattere (in FF si puo` sempre fare - control+ -, in IE dipende da come e` programmata la pagina e il browser).

Poi non hai detto che DTD usi: in questi casi IE si comporta in modo diverso se in modalita` retrocompatibile (quirks mode) o in XHTML Strict.

Poi vedo che usi bordi e padding: e` noto che IE e gli altri li trattano in modo diverso (vedi qualsiasi tutorial HTML alla voce "box model").

**blekm** · 29-05-2007, 11:19

Originariamente inviato da Mich_
Anzitutto e` un bel rischio scrivere dimensioni in px per blocchi che contengono del testo. Prova a ingrandire il carattere (in FF si puo` sempre fare - control+ -, in IE dipende da come e` programmata la pagina e il browser).

Poi non hai detto che DTD usi: in questi casi IE si comporta in modo diverso se in modalita` retrocompatibile (quirks mode) o in XHTML Strict.

Poi vedo che usi bordi e padding: e` noto che IE e gli altri li trattano in modo diverso (vedi qualsiasi tutorial HTML alla voce "box model").

1) perchè? Se io so quanto testo ho, e SO che non lo cambierò, posso anche definire la dimensione, no?

2) cos'è il quirks mode?

3) esiste una "maniera universale" per risolvere le incompatibilità delle intepretazioni tra i vari browser per quanto riguarda bordi e padding? Oppure l'unica maniera è non usarli?

**dops** · 29-05-2007, 11:32

il border non lo considererei in quanto l'ho scritto solo per prova.. per vedere la resa dei due browser..
cmq scusate ma non ho capito il consiglio che mi state dando..

Per mich_

Anzitutto e` un bel rischio scrivere dimensioni in px per blocchi che contengono del testo.

a quali blocchi ti stai riferendo ? cmq.. non ne sono a conoscenza.. esiste un modo per impedire il ridimensionamento dei caratteri tramite ctrl +/- ?..

Poi non hai detto che DTD usi...

Scusa.. XHTML 1.0 Transitional//EN

Poi vedo che usi bordi e padding..

Mi sà che è lì il problema.. il border cmq per quell'elemento l'ho utilizzato per fare un test... Solo che cmq non riesco a trovare la soluzione..

Che consiglio mi date ?

**dops** · 29-05-2007, 11:36

Originariamente inviato da blekm
cosi, senza guardare il codice, direi che è un problema di dimensioni... prova a specificare la dimensione per ogni contenitore...

PS: io quando realizzo un layout, mi sballa sempre su IE

. Ovviamente, inizio con FF, che ha una migliore interpretazione delle regole CSS. E poi devo bestemmiare quando faccio le prove su IE...

Se ti riferisci alla dimensione del tag <ul>, firefox se ne frega altamente se gli specifico lo stesso width del contenitore padre.. cioè non succede nulla insomma..

**Mich_** · 29-05-2007, 11:45

1. Non puoi definire le dimensioni del font che usera` l'utente: i browser (tutti i non-IE, ma incluso IE7) sono in grado di gestire il font in maniera indipendente

2. Quirks mode == modalita` retrocompatibile.
Viene instaurata quando non c'e` DTD o quando la DTD lascia liberta`. In pratica sempre tranne che XHTML 1.0 Strict e successive

3. Il box model di IE e` diverso da quello del W3C e degli altri browser.
Pero` in XHTML Strict anche IE6 e IE7 adottano un box model molto simile a quello del W3C.
Quindi la cosa non e` risolvibile.
La cosa piu` semplice e` NON USARE bordi e padding, ma si puo` ovviare anche usando un layout flessibile (ad es. fluido o liquido), in cui ci sia lo spazio per le differenze tra i browser.
In molti degli esempi di layout riportati nei "link utili" si adottano questi trucchi.
Praticamente significa non voler sistemare la cosa "al pixel", che e` difficilmente realizzabile con la marea di brwoser, risoluzioni, abitudini degli utenti, ... esistenti; ma riuscire a presentare i contenuti in modo leggibile e gradevole per tutti.

In pratica:
- se vuoi un sito perfetto (ad esempio per societa` che attraverso internet ci fanno gli affari grossi) serve un CSS specifico per ogni browser
- se vuoi un sito leggibile da tutti (eventualmente escludendo i browser piu` vecchi - adatto alla maggior parte delle presenze in internet - dove il visitatore e` interessato a cio` che viene presentato e non a come viene presentato) si riesce a trovare un layout flessibile
- se vuoi fare un sito per i tuoi amici (che sai che hanno un determinato browser) puoi tranquillamente usare un editor tipo FrontPage: in tal caso chi non fa parte della cerchia perdera` dei pezzi.

**Mich_** · 29-05-2007, 11:49

Scusa.. XHTML 1.0 Transitional//EN

Prova a passare a XHTML 1.0 Strict.

esiste un modo per impedire il ridimensionamento dei caratteri tramite ctrl +/- ?..

No, per fortuna. Altrimenti io non vedrei nulla (ho i pixel molto piccoli)

Che consiglio mi date ?

hai gia` visto come risolvono nei vari menu orizzontali citati anche nei "link utili"?

**dops** · 29-05-2007, 11:49

Originariamente inviato da Mich_
1. Non puoi definire le dimensioni del font che usera` l'utente: i browser (tutti i non-IE, ma incluso IE7) sono in grado di gestire il font in maniera indipendente

2. Quirks mode == modalita` retrocompatibile.
Viene instaurata quando non c'e` DTD o quando la DTD lascia liberta`. In pratica sempre tranne che XHTML 1.0 Strict e successive

3. Il box model di IE e` diverso da quello del W3C e degli altri browser.
Pero` in XHTML Strict anche IE6 e IE7 adottano un box model molto simile a quello del W3C.
Quindi la cosa non e` risolvibile.
La cosa piu` semplice e` NON USARE bordi e padding, ma si puo` ovviare anche usando un layout flessibile (ad es. fluido o liquido), in cui ci sia lo spazio per le differenze tra i browser.
In molti degli esempi di layout riportati nei "link utili" si adottano questi trucchi.
Praticamente significa non voler sistemare la cosa "al pixel", che e` difficilmente realizzabile con la marea di brwoser, risoluzioni, abitudini degli utenti, ... esistenti; ma riuscire a presentare i contenuti in modo leggibile e gradevole per tutti.

In pratica:
- se vuoi un sito perfetto (ad esempio per societa` che attraverso internet ci fanno gli affari grossi) serve un CSS specifico per ogni browser
- se vuoi un sito leggibile da tutti (eventualmente escludendo i browser piu` vecchi - adatto alla maggior parte delle presenze in internet - dove il visitatore e` interessato a cio` che viene presentato e non a come viene presentato) si riesce a trovare un layout flessibile
- se vuoi fare un sito per i tuoi amici (che sai che hanno un determinato browser) puoi tranquillamente usare un editor tipo FrontPage: in tal caso chi non fa parte della cerchia perdera` dei pezzi.

Perdonami.. ma io non c'ho capito una mazza.. qual'è la soluzione al mio problema ?

**Mich_** · 29-05-2007, 11:56

Originariamente inviato da dops
Perdonami.. ma io non c'ho capito una mazza.. qual'è la soluzione al mio problema ?

Quella era la risposta a blekm.

Ho gia` risposto anche a te.
Le varie risposte si sono incrociate.

Discussione: lista non ordinata che esce dal div.. la colpa è di iexplorer o firefox ?

Strumenti discussione

Ricerca discussione

Visualizza

lista non ordinata che esce dal div.. la colpa è di iexplorer o firefox ?

Permessi di invio