Problema zoom in IE7

**sonikshadow** · 12-11-2007, 21:45

Salve a tutti,
sto costruendo un sito internet con xhtml 1.1 strict e css2 e ho un problema con lo zoom di internet explorer. Quando faccio ctrl++ (-, cmq quando non sono a 100%) ie mi mette il testo del menu principale tutto attaccato (mentre visualizza correttamente colori di sfondo e bordi (uso un menu a "cartelle")).
Il problema è presente solo con ie, mentre con firefox e opera va tutto ok.
Avete qualche idea di come mai mi può dare questo problema?

Vi metto anche il codice del css e della home almeno potete darci un'occhiata (tutto è validato correttamente).

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it" xml:lang="it">
	<head>
		<title>Scudo Amico</title>
		<meta name="description" content="Home page del sito dell'associazione pratese Scudo Amico S.A. 
			per la lotta alla fibromialgia" />
		<meta name="keywords" content="fibromialgia, prato, associazione, scudo amico" />
		<meta name="author" content="Marco Bessi" />
		<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
		<link rel="stylesheet" title="Normal" type="text/css" media="screen" href="./css/screen.css" />
		<link rel="stylesheet" title="Normal" type="text/css" media="print" href="./css/print.css" />
	</head>
	<body>
		<div id="main">
			<div id="topheader">
				[img]img/logo/logotrasptop2.png[/img]
				<div id="header">
					<h1>SCUDO AMICO</h1>

					<h2>La forza dell'associazione pratese per i fibromialgici </h2>
				</div>
			</div>
			<div id="menu">
				<ul>
					<li class="selected">Home [1]
					[*]Chi siamo [2]
					[*]La malattia [3]
					[*]Iniziative [4]
					[*]Assemblee [5]					
					[*]Contatti [6]						
				[/list]
			</div>
			<div id="content">
				<div id="topcontent"><p id="mappa">Sei in: Home</p></div>
				<div class="article">
					<div id="blockhomelink">						
						<ul class="listanull">
							[*]<a href="http://www.po-net.prato.it/">
				         		[img]img/logo/hponet.gif[/img] </a> 
							[*]<a href="http://www.associazioni.prato.it/" >
								[img]img/logo/homeass.png[/img] </a> 
						[/list]
					</div>
					<h1>News</h1>
					<ul class="listapois">
						[*]Modifica della sezione Assemblee con divisione delle assemblee future dalle assemblee passate.
						[*]Oggi, gioved&igrave; 11 ottobre, &eacute; il quinto anniversario dell&rsquo;associazione 
							Scudo Amico.
						[*]&Egrave; in corso la ristrutturazione del sito internet, sia dal punto di vista grafico che strutturale, 
							secondo le norme di accessibilit&agrave; e di usabilit&agrave; dettate dal 
							W3C.
						[*]&Egrave; stata aggiornata la sezione &ldquo;assemblee&rdquo; con le date dei prossimi incontri. 
						[*]Aggiornamento dei link della pagina &ldquo;approfondimento&rdquo;.
					[/list]									
				</div>
			</div>
				<div id="footer">
					&copy; 2007 <a href="http://www.associazioni.prato.it/scudoamico/">
					Scudo Amico S.A.</a> - Designed by: Marco Bessi - 
					Aggiornato il 10 novembre 2007
					

					[a] Accessibilit&agrave; - 
					[m] Mappa
				</div>
		</div>
	</body>
</html>

codice:

*{
	margin : 0;
	padding : 0;
}

a{
	color : #0000ff;
	text-decoration : none;
}
a:visited{
	color : #990099;
	text-decoration : none;
}
a:hover{
	color : #990099;
}
a img{
	border: none;
}

h1{
	color : #343434;
	font : italic 1.8em sans-serif;
}
h2{
	color : #343434;
	font : bold italic 1.3em sans-serif;
}
h3{
	color : #343434;
	font : 1em sans-serif;
}
h4{
	color : #343434;
	font : bold italic 0.9em sans-serif;
	padding : 1em 1em 0 1em;
}
h5{
	color : #343434;
	font : italic 0.8em sans-serif;
	text-align: right;
}

html{
	color : #343434;
	font : 70%/170% sans-serif;
	text-align : justify;
}

img{
	margin : 1em 1em 0 1em;
}

p{
	margin : 0 1em 0.2em 1em;
}
p.top{
	text-align: right;
}
p.cit{
	color : #343434;
	font : italic 0.8em sans-serif;
	text-align: right;
}
p.center{
	text-align: center;
}
p.strong{
	font-weight: bold;
}

body{
	background: #dde2e8 url('../img/background/sfondo_grad4.png') repeat-x bottom fixed;
}

#main{
	margin : 0.5em auto;
	max-width: 65em;
	min-width : 45em;
	border: 0.2em solid #330099;
	background: #ffffff;
	width : auto !important;
	width : 65em;
}

#main #topheader img{
	float: right;
	padding: 2em 2em 0 0;
}
#main #topheader #header{
	background : #330099 url('../img/background/header_bg3.jpg') repeat-x bottom left;
	padding : 4em 4em 2em 4em;
}
#main #topheader #header h1{
	color : #feffff;;
	font : bold italic 3em sans-serif;
}
#main #topheader #header h2{
	margin: 0 0 0 1em;
	color : #feffff;
	font : italic 1.2em sans-serif;
}

#main #menu{
	background : #3300cc;
	border-bottom : 0.1em solid #330099;
	font : 1em sans-serif;
	color : #feffff;
}
#main #menu ul{
	padding : 0.75em 4em;
}
#main #menu li{
	display : inline;
}
#main #menu li a{
	color : #feffff;
	text-decoration: none;
	padding : 0.75em 1.5em;
}
#main #menu li a:hover{
	background : #330099;
	text-decoration: none;
}
#main #menu li.selected a{
	background : #ebebeb;
	border-top: 0.1em solid #330099;
	border-right: 0.1em solid #330099;
	border-left: 0.1em solid #330099;
	border-bottom : 0.1em solid #ebebeb;
	color : #330099;
	text-decoration: none;	
}
#main #menu li.selected a:hover{
	background : #ebebeb;
	color : #c00000;
	text-decoration: none;
}

#main #menusec {
	background: #ebebeb;
	font: 1em sans-serif;
	color: #330098;
	border-bottom : 0.1em solid #330099;
}
#main #menusec ul{
	padding : 0.5em 0.5em;
}
#main #menusec li{
	display : inline;
}
#main #menusec li a{
	color : #330098;
	text-decoration: none;
	padding : 0.75em 1.5em;
}
#main #menusec li a:hover{
	color: #c00000;
	text-decoration: none;
}

#main #content{
	height : auto !important;
	height : 1%;
	min-height: 28em;
	color: #343434;
	background-color: #ffffff; 
	margin: 0 0 1em 0;
}
#main #content .article{
	padding : 0.25em 4em 0 4em;
}

#main #content ul.listadecimale{
	padding: 0 0 0 4em;
	list-style-type: decimal;
}
#main #content ul.listapois{
	padding: 0 0 0 3em;
	list-style-type: circle;
}
#main #content ul.listanull{
	padding: 0 0 0 1.5em;
	list-style-type: none;
}
#main #content ul.listalett{
	padding: 0 0 0 4em;
	list-style-type: lower-latin;
}
#main #content ul.listapoisplus{
	padding: 0 0 0 5em;
	list-style-type: circle;
}

#main #content #blockhomelink{
	float: right;
	margin: 1em 0 0 2em;
	border: 0.1em solid #330099;
	text-align: center;
}
#main #content #blockhomelink img{
	padding: 0;
	display: inline;
	background-color: #FFFFFF;
}
#main #content #blockhomelink ul.listanull{
	padding: 0 0 0.5em 0;
	list-style-type: none;
}

#main #content #topcontent #mappa{
	padding: 0.3em 0 0 4em;
	text-align: left;
}

#main #content #topcontent #barraico{
	margin: 0 0 0 2em;
	float: right;
	text-align: right;
	border-bottom: 0.1em solid #330099;
	border-left: 0.1em solid #330099;
}
#main #content #topcontent #barraico li{
	display : inline;
	
}
#main #content #topcontent #barraico ul.listanull{
	padding: 0;
	list-style-type: none;
}

#main #footer{
	padding: 0 2em 0 2em;
	border-top:  0.1em solid #330099;
	font-size : 0.8em;
	color : #343434;
	text-align: center;
}
#main #footer a{
	background: #ffffff;
	color : #0000ff;	
}

In attesa di notizie, vi ringrazio.

ps. in due settimane non c'ho cavato un ragno dal buco... help me!

**seed_squall_it** · 14-11-2007, 12:57

Il problema è...Internet Explorer! E' lui che sbaglia facendo lo zoom (mi è successa la stessa cosa pochi giorni fa). Opera invece esegue lo zoom come si deve. Tra l'altro, una cosa è il CTRL + + di Firefox (che NON fa lo zoom, ma aumenta solo la dimensione del font), un'altra è il CTRL + + in IE 7 (che esegue effettivamente l'ingrandimento di tutta la pagina). Può darsi che questo problema sia dovuto al comportamento inline degli elementi, che zoomando "perdono" la spaziatura. Ma anche in questo caso, il problema è sempre e soltanto IE 7.

In ogni caso ti consiglierei di lasciar perdere questi dettagli...invece di implementare una funzionalità molto più efficace come il ridimensionamento del font (che ancora non funziona se l'unità di misura del font è il pixel!), chi ha sviluppato IE 7 si è "perso" come al solito in cose inutili e non è riuscito a creare un browser degno di tale nome (doveva supportare min-height e non la supporta, centra ancora i box con text-align: center e non supporta ancora i contenuti generati). In altre parole, è un browser da abbandonare.

**Sgro** · 14-11-2007, 13:36

Innanzitutto il paragone che fai è sbagliato. Paragoni una funzione che esiste solo in IE (cioè lo zoom) con l'ingrandimento del font degli altri browser.

Se invece paragoni l'ingrandimento del font di IE (che si fa dal menu Pagina -> Dimensione testo) con l'ingrandimento del font degli altri browser, vedrai che si comportano tutti alla stessa maniera.

**sonikshadow** · 15-11-2007, 00:08

cavolo, grazie per le informazioni...

cmq questo fa parte anche di in progetto di un esame per l'università e il sito deve essere accessibile... però c'è la prova di ingrandimento caratteri... viene testato anche il ctrl++ per incrementare il testo, però deve funzionare anche su ie (benchè quello sia uno zoom).

insomma, è un po un'inculata...

non avete un'idea di come farlo funzionare? le ho provate tutte, ma niente...

**seed_squall_it** · 15-11-2007, 01:24

Ripeto che il problema è IE 7. Quindi il sito è perfettamente accessibile se è stato fatto come il W3C comanda. Il fatto che con IE 7 si presenti quel problema non ha nulla a che fare con l'accessibilità. IE e l'aderenza agli standard viaggiano da sempre su due binari paralleli. Al limite, potresti provare a dichiarare flottanti gli elementi di lista che compongono il menu. In quel modo gli dai un layout (imposti a true la proprietà hasLayout) e probabilmente IE 7 non sbaglia più a distanziare i box quando effettui lo zoom. Chiaramente, questo comporta che devi aggiungere un elemento vuoto subito dopo la lista a cui assegni una regola nel CSS che ripulisca il float e il comportamento dei tuoi elementi di lista sarà leggermente diverso di quando li hai dichiarati semplicemente inline (si comporteranno come elementi block-level affiancati, saranno sensibili al padding e al margin verticali, ecc.). Nota che devi fronteggiare ben 2 bug di IE se dichiari i[*] come flottanti:

1. Se assegni loro un margin diverso da 0 sullo stesso lato del float, devi necessariamente dichiararli ANCHE display: inline, altrimenti IE 6 raddoppierà quel margine.
2. L'elemento <ul> va dichiarato obbligatoriamente flottante perché altrimenti su IE 6 sarà renderizzato con uno spazio inferiore abbastanza ampio.

Inoltre, gli elementi <a> interni agli elementi di lista andrebbero dichiarati anch'essi flottanti per risolvere un bug di IE 5 per Mac. Se dichiari flottanti gli elementi[*] infine, IE fa sparire il loro punto elenco. Probabilmente è quello che vuoi, ma gli altri browser (giustamente!) non lo faranno. Quindi devi aggiungere alla regola dei[*]: list-style: none.

Secondo me quel problema di IE è proprio dovuto al fatto che gli elementi[*] sono affiancati senza avere un layout (con display: inline). Infatti anche io ho avuto lo stesso problema nella stessa circostanza. Dichiarandoli flottanti, e quindi assegnando loro un layout, dovresti risolvere.

**sonikshadow** · 15-11-2007, 09:45

scusa se ti sfrutto troppo, però quando dici che va dichiarato floattante vuoi dire
float: qualcosa?
perchè non ho capito bene come sistemarlo.

scusa e grazie per le informazioni.

edit 1: non capisco nemmeno questo

Chiaramente, questo comporta che devi aggiungere un elemento vuoto subito dopo la lista a cui assegni una regola nel CSS che ripulisca il float

edit: allego il css modificato (solo la parte del menu)

codice:

#main #menu{
	background : #3300cc;
	border-bottom : 0.1em solid #330099;
	font : 1em sans-serif;
	color : #feffff;
}
#main #menu ul{
	float: left;
	padding : 0.75em 4em;
}
#main #menu li{
	float: left;
	/*display: inline;*/
	list-style: none;
}
#main #menu li a{
	float: left;
	color : #feffff;
	text-decoration: none;
	padding : 0.75em 1.5em;
}
#main #menu li a:hover{
	float: left;
	background : #330099;
	text-decoration: none;
}
#main #menu li.selected a{
	float: left;
	background : #ebebeb;
	border-top: 0.1em solid #330099;
	border-right: 0.1em solid #330099;
	border-left: 0.1em solid #330099;
	border-bottom : 0.1em solid #ebebeb;
	color : #330099;
	text-decoration: none;	
}
#main #menu li.selected a:hover{
	float: left;
	background : #ebebeb;
	color : #c00000;
	text-decoration: none;
}

#main #menusec {
	background: #ebebeb;
	font: 1em sans-serif;
	color: #330098;
	border-bottom : 0.1em solid #330099;
}
#main #menusec ul{
	float: left;
	padding : 0.5em 0.5em;
}
#main #menusec li{
	float: left;
	/*display : inline;*/
	list-style: none;
}
#main #menusec li a{
	float: left;
	color : #330098;
	text-decoration: none;
	padding : 0.75em 1.5em;
}
#main #menusec li a:hover{
	float: left;
	color: #c00000;
	text-decoration: none;
}

in questo modo mi sbarellano sia il menu principale che il menu secondario e di conseguenza anche la mappa e il content.

FF

IE7

**seed_squall_it** · 15-11-2007, 20:48

Ho visto...per prima cosa, eviterei di dimensionare il padding usando l'unità em, specie se il sito ha un layout a larghezza fissa (potrebbe servire se il sito fosse liquido/elastico, ma con layout a larghezza fissa bastano i pixel per padding, border e margin).

Poi, quando rendi flottanti gli elementi di lista (e la lista stessa), alteri il flusso del documento. Un elemento flottante è un elemento che viene reso implicitamente block-level (indipendentemente dal suo comportamento di default) ma che viene anche estratto dal flusso del documento. Un elemento estratto dal flusso è come se non esistesse per tutti gli elementi posizionati normalmente (in modo statico) ad esso adiacenti, e quindi non ne influenza la disposizione. Per questo è necessario "ripulire" il float nel punto in cui vuoi che il flusso venga influenzato dagli elementi flottanti. Per farlo è necessario inserire un elemento vuoto (un <div> o un
per es.) a cui assegnerai tramite CSS una regola che effettua il clear in base al verso del float dichiarato prima.

Nel tuo caso, se hai un box #menu che contiene la tua lista e tutti i suoi elementi dichiarati float: left, dovrai inserire un elemento vuoto appena prima di chiudere il box #menu.

codice:

<div id="menu">
<ul>
<li class="selected">Home [1][*]Chi siamo [2][*]La malattia [3][*]Iniziative [4][*]Assemblee [5][*]Contatti [6][/list]
<br class="clrleft" />
</div>

A questo punto, dato che sia la lista che tutti i suoi elementi sono stati flottati a sinistra, dovrai creare la regola CSS per gli elementi con class="clrleft" in questo modo:

codice:

.clrleft {
clear: left;
}

Ovviamente, se dovessi flottare gli elementi a destra con float: right, dovrai ripulire il float con la dichiarazione clear: right, mentre se flotti due elementi contenuti in un box in direzioni opposte (uno left e uno right) dovrai ripulire entrambi i float con clear: both.

Ricordati che gli elementi flottanti vanno sempre contenuti in un box apposito e che questo box deve avere almeno una delle due dimensioni impostate (meglio se la larghezza), altrimenti IE può creare problemi. Per i problemi che il float può portare al resto della pagina, bisogna che rivedi il codice della struttura e le regole CSS che lo interessano e se è il caso, che lo modifichi opportunamente (ci sono vari modi per ottenere un layout...sta a noi trovare quello più solido e cross-browser). Per es. ho visto che hai flottato anche gli elementi del menu secondario...quindi dovrai ripulire il float anche nel box che contiene la lista di quel menu.
Un ultimo suggerimento, riguarda il padding delle liste. Ti sconsiglio di impostare un padding o un margin verticale sull'elemento <ul>, perché IE 6 può dare problemi con i padding e i margin inferiori delle liste (spesso non li considera). Piuttosto, applica il padding verticale al box che contiene la lista (per es. #menu).

Discussione: Problema zoom in IE7

Strumenti discussione

Ricerca discussione

Visualizza

Problema zoom in IE7

Permessi di invio