Problema di visualizzazione su Firefox/Opera

**cripo** · 16-06-2011, 10:29

Salve a tutti,
non riesco in nessun modo a far scomparire lo spazio sopra i bordi del menu della mia pagina che compare utilizzando Firefox/Opera.
Tanto per cambiare su IE non ci sono problemi ma su FF e Opera si.
Questo comportamento mi è apparso non appena sono passato ad XHTML 1.0 / 1.1 (ora è 1.1).
Qualche anima pia potrebbe aiutarmi? Ho cercato in tutti i modi di utilizzare un clearfix pensando potesse essere quello il problema, ma purtroppo non lo è.

Vi posto HTML e CSS. La pagina di esempi la trovate su www.chrisoft.net/ovunquecasa
Grazie a tutti

HTML:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml" lang="it" xml:lang="it">

	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />
		<title>
			Immobiliare Giampà di Caterina Giampà
		</title>
		<style type="text/css">
			@import url("css/stile.css");
		</style>
	</head>
	<body>
		<div id="container" class="clearfix">
			<div id="header">
				<div id="logo-sx">
					[img]images/immobiliare-giampa-logo.jpg[/img]
				</div>
				<div id="centro">
				</div>
				<div id="logo-dx">
					[img]images/immobiliare-giampa-logo-dx-up.jpg[/img]

					<a href="http://www.ovunquecasa.it">
						[img]images/immobiliare-giampa-logo-dx-down.jpg[/img]
					</a>
				</div>
			</div>
			<div id="menu" class="clearfix">
				<div class="clearfix">
					home
					vendita
					affitto
					servizi
					chi siamo
					contatti
				</div>
			</div>
			<div id="foto"></div>
			<div id="corpo">
				<div class="riga-vetrina">
					<div class="annuncio">
						<div class="annuncio_titolo">
							Roma - Aurelio
						</div>
						<div class="annuncio_corpo">
							<div class="annuncio_corpo_testo">
								Casa di diverse stanze con immagini bellissime che si vedono dalle finestre. Scorci di tramonti notturni. mldksmflòdfmlòdmòlfjdv sVNKnvkldnSKVò vv78
							</div>
							<div class="annuncio_corpo_prezzo">
								prezzo: € 20.000
							</div>
						</div>
						<div class="annuncio_tipo">
							AFFITTASI
						</div>
						<div class="annuncio_foto">
							[img]images/esempio.jpg[/img]
						</div>						
					</div>
					
					<div class="annuncio">
						<div class="annuncio_titolo">
							Roma - Laurentino
						</div>
						<div class="annuncio_corpo">
							<div class="annuncio_corpo_testo">
								Casa di diverse stanze con immagini bellissime che si vedono dalle finestre. Scorci di tramonti notturni. mldksmflòdfmlòdmòlfjdv sVNKnvkldnSKVò vv78
							</div>
							<div class="annuncio_corpo_prezzo">
								prezzo: € 20.000
							</div>
						</div>
						<div class="annuncio_tipo">
							VENDESI
						</div>
						<div class="annuncio_foto">
						</div>						
					</div>

					<div class="annuncio">
						<div class="annuncio_titolo">
							Santa Marinella (RM)
						</div>
						<div class="annuncio_corpo">
							<div class="annuncio_corpo_testo">
								Casa di diverse stanze con immagini bellissime che si vedono dalle finestre. Scorci di tramonti notturni. mldksmflòdfmlòdmòlfjdv sVNKnvkldnSKVò vv78
							</div>
							<div class="annuncio_corpo_prezzo">
								prezzo: € 20.000
							</div>							
						</div>
						<div class="annuncio_tipo">
							VENDESI
						</div>
						<div class="annuncio_foto">
						</div>						
					</div>

					<div class="annuncio">
						<div class="annuncio_titolo">
							Roma - Medaglie d'Oro
						</div>
						<div class="annuncio_corpo">
							<div class="annuncio_corpo_testo">
								Casa di diverse stanze con immagini bellissime che si vedono dalle finestre. Scorci di tramonti notturni. mldksmflòdfmlòdmòlfjdv sVNKnvkldnSKVò vv78
							</div>
							<div class="annuncio_corpo_prezzo">
								prezzo: € 20.000
							</div>							
						</div>
						<div class="annuncio_tipo">
							VENDESI
						</div>
						<div class="annuncio_foto">
						</div>						
					</div>
				</div>
			</div>
			<div id="footer">
				immobiliare GIAMP&Agrave; di Caterina Giampà - Via Aurelia, 104 00165 ROMA (RM) tel.: 066631615
			</div>
		</div>
	</body>
</html>

Css:

codice:

@import url(reset.css);

body {	font-size: 10px;
 	font-family: arial;
	margin: 10px 0 0 0;
	padding:0}
				
div {	margin:0;
 	padding:0;}

div#container {	width: 1000px;
 		height: 100%;
 		position: relative;
 		left: 50%;
 		margin-left: -500px;}

div#header 	{width: 100%;
 		  height:130px;
 		 display:block;}

div#logo-sx {	width: 200px !important;
 		width: 210px;
 		height: 100%;
 		float: left;
 		padding: 5px 0 0 10px;}
 							
div#centro  {	width: 680px;
  		height: 100%;
 		float: left;}
 							
div#logo-dx {	width: 110px;
 		height: 100%;
 		float: left;
		padding: 5px 0 0 0;}

div#menu {	width:100%;
 		text-align:center;
 		height:35px;
 		background:  #333333 url('../images/immobiliare-giampa-bg-menu.jpg') no-repeat;}
 					
div#menu div {	height:inherit;
 		border-width:0 0 0 1px;
 		border-style: solid;
 		border-color: #555555;
		overflow:visible;
		width:608px;
		padding:0;
 		margin: 0 auto}
 								
div#menu a {	float:left;
		width:100px;
		height: inherit;
		border-width: 0 1px 0 0;
		border-style: solid;
		border-color: #555555;
		height:25px !important;
 		height:35px;
 		font-size:1.2em;
		border-width: 0 1px 0 0;
		border-style: solid;
		border-color: #555555;
		font-family:arial;
		text-transform:lowercase;
		text-decoration:none;
		color:#ffffff;
		padding-top:12px;
		margin:0;}
							
div#menu a:hover {	background-color: #ff0100;}

div#menu a#home {	border-width: 0 1px ;
									border-style: solid;
									border-color: #555555;}

div#foto {	width:100%;
 						height:235px;
 						background:  #333333 url('../images/immobiliare-giampa-1.jpg') no-repeat}
 						
div#corpo {	width:100%;
 		min-height: 500px;
 		height:500px;
 		background-color: #E9E9EB;}
 						
div#footer {	width:100%;
 		min-height: 30px;
 		height: 30px !important;
 		height:50px; 
		background-color: #191919;
		border-width:10px 0 0 0;
 		border-style: solid;
 		border-color: #444444;
		color: #FFFFFF;
 		font-weight: normal;
 		font-size: 1.1em;
 		text-align: center;
 		padding:15px 0 0 0;}
 							
div.riga-vetrina {	width: 100%;
 		display:table-row;
		padding:10px 0 10px 0;}
										
div.annuncio{	width:250px;
 		padding:0 10px 0 10px;
 		float:left;
 		color: #ffffff;
 		text-align: center;
 		display:table-row;}
 							
div.annuncio_titolo{width:100%;
		 background-color: #8D8D8D;
 		 height:25px !important;
  		 height: 30px;
 		 padding: 8px 0 0 0;
		 font-size: 1.2em;}
											
div.annuncio_corpo{width:100%;
 		 height:130px;
 		 background-color: #dadadf;}
 										
div.annuncio_corpo_testo{	width:100%;
 			height:100px;
 			overflow: hidden;
 			font-size: 1.2em;
			text-align:justify;
 			color: #000000;
			line-height:1.4em;
			padding: 5px 5px 0 5px;}
													
div.annuncio_corpo_prezzo{	width:100%;
 			height: 30px;
			padding:6px 0 6px 0;
 			color: #ff0000;
 			font-weight: bold;
 			font-size: 1.2em;
			text-align: left;}
														
div.annuncio_tipo{	width:100%;
	             background-color: #8D8D8D;
 		height:20px !important;
 		height:30px;
 		padding: 7px 0 0 0;
		font-size: 1.2em;
		font-family: arial;
		font-weight: normal;}
										
div.annuncio_foto{	width:100%;
 		height:150px;
 		background-color: black;
 		font-size: 0;}
 										
html>body .annuncio {	width:230px;
			padding:10px}
											
html>body .annuncio_corpo{	width:100%;
 			padding:0;}
 														
html>body .annuncio_corpo_testo {	width:96%;							padding:0 5px;}
 																	
html>body .annuncio_corpo_prezzo {	width:96%;
 				padding:0 5px;}
 																		
html>body .menu_bottone {float: none;}

html>body div#menu {padding-top:0;}



/* For modern browsers */
.clearfix:before,
.cf:after {
    content:"";
    display:table;
}

.clearfix:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.clearfix {
    zoom:1;
}

Css reset.css:

codice:

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

**pr0v4** · 16-06-2011, 10:41

Controllando il codice della pagina ho visto questa regola che non mi torna molto:

codice:

div#menu a{
  height: 25px !important;
  padding-top: 12px;
}

A mio parere se vuoi allineare verticalmente i tuoi testi potresti fare degli esperimenti con il line-height e rimuoverei completamente le regole che hai impostato per l'altezza ed il padding...

prova ad impostare questa regola, sul mio ff4 si vede tranquillamente:

codice:

div#menu a{ line-height: 25px; }

Facci sapere come va!

**cripo** · 16-06-2011, 11:22

Ciao,
grazie per la solerte risposta. Ho impostato il line-height ma purtroppo ne risente solo il testo e i bordi non vengono toccati. Il testo si sposta verticalmente ma lo spazio sopra rimane invariato.

Inoltre il line-height: 25px posiziona il testo correttamente su FF e Opera ma non su IE dove anche i bordi laterali sono piu' corti di 10px rispetto a quando dovrebbero essere.

**ResianTaxidrive** · 16-06-2011, 11:51

diciamo che potresti dare un position:relative e top:-4px a clearfixed e poi regolare l'altezza dei tag <a>. Cmq io metterei una lista non ordinata come menu, non degli a dentro un div. Magari poi si riesce a gestire meglio il tutto, oltre ad avere una correttezza semantica.

**cripo** · 16-06-2011, 11:57

Grazie,
ho provato a modificare il clearfix ma nulla. Anche con la lista ottengo lo stesso risultato, avevo già provato.

**cripo** · 16-06-2011, 12:02

Ci sono riuscito inserendo direttamente nel a position:relative e top:-5px ma ora ho il problema opposto in IE, i bordi sono troppo su e in questo caso IE interpreta la clausola !important quindi non riesco a modificarlo.

**ResianTaxidrive** · 16-06-2011, 12:08

ma la lista lasciala, è cmq la cosa più corretta.

IE lascialo per ultimo, casomai gli fai uno stile condizionale, risolvi prima per tutti gli altri.

Io facendo come ti ho detto con FF vedevo bene, tranne la voce home. Adesso a che punto sei? Aggiorna il link in base alle ultime modifiche.

**cripo** · 16-06-2011, 12:36

Ciao,
ho ripostato le modifiche, compreso il menu con l'elenco ordinato su www.chrisoft.net/ovunquecasa
Ora il problema è solo su Explorer. Non c'è un modo per risolvere anche li' senza usare css condizionali?
Grazie infinite, stavo diventando pazzo per togliere quello spazio.

**ResianTaxidrive** · 16-06-2011, 13:50

tra l'altro solo explorer 7 e penso 6.

guarda, fai quest'altro esperimento.
Anzichè assegnare un'altezza al ul mettigli float:left; in questo modo ho notato che non c'è il solito spazio superiore nei li (togli il top:-5px)
adesso devi giocare di padding-top però forse così funziona per tutti.
Vedi un po' cosa ti viene e fammi sapere.

**cripo** · 16-06-2011, 14:07

Niente da fare, torna il problema dello spazio sopra il bordo. Ho tolto un po' di altezze inutili da ul e li.
Con il commento condizionale funziona bene, ma mi sarebbe piaciuto non creare un altro foglio di stile solo per IE.
Grazie comunque. Se hai qualche altro consiglio fammi sapere.
Ciao

Discussione: Problema di visualizzazione su Firefox/Opera

Strumenti discussione

Ricerca discussione

Visualizza

Problema di visualizzazione su Firefox/Opera

Permessi di invio