aiuto: pagina che si "scompagina" zoomando

[lally_fragola]

Ciao a tutti, vorrei chiedere se potete darmi una mano a correggere un pò il css che ho fatto, in quanto basta che uno zooma un paio di volte e la pagina diventa un mezzo disastro, ma non so dove mettere le mani! Il problema principale risiede nel menu in alto, che ho fatto come menu orizzontale usando i css e, sempre usando i css, ho aggiunto in alcune voci un sottomenu a comparsa. L'ho provato in varie risoluzioni e non dà grossi problemi, laddove c'era da cambiare qualcosina aggiungo un altro foglio con javascript...ma se si usa lo zoom son dolori!
Questo è il codice html

<div id="cont_lista"><ul id="menu_css_orizzontale">[*] Home [*]  Imprese
<li id=\"menu_verticale\">Bilancio<ul class=sub_menu > <li class="sub_li">Dati Ordinario <li class="sub_li">Dati Consolidato <li class="sub_li">Gestione <li class="sub_li">Visualizza[/list][*]Partecipazioni</a>[/list]</div>

Non ho riportato tutto il menu perchè gli altri campi sono solo altri li con dei link ed eventualmente sottomenu. Il menu sta dentro ad un'altro div, con id= "div_menu".
Il codice css per questi elementi è il seguente:

#cont_lista{
 background-color:#1d8435; width:100%; } 
#div_menu{ height:25%; 
margin-bottom:0px; overflow:visible; 
}
#menu_css_orizzontale{
	margin-top:0px;
	list-style:none;
	overflow:visible;
	padding:1px;
	background-color:#1d8435;
	width:100%;
	height:15%;
	margin-bottom:2px;
	
	
}

#menu_css_orizzontale li{
	display:inline;
}

#menu_css_orizzontale a{
	background-color:#1d8435;
	display:block;
	float:left;
	margin-left:1px;
	padding-left: 10px;
	padding-right:10px;
	border-left: 10px solid #016833;
	font-family:"Century Gothic";
	font-size:0.88em;
	font-weight:bold;
	text-transform:uppercase;
	text-decoration:none;
	color: white;
	line-height:22px;
}

#menu_css_orizzontale a:hover{
background-color:#01f637;
border-left:10px solid white;
color:white;
}

#menu_css_orizzontale a.no_dec{
	width:20px;
}

#menu_css_orizzontale a.no_dec:hover{
	background-color:black;
	color: white;
	border-left: 10px solid #c7e2e2;
}

#menu_css_orizzontale li ul.sub_menu {
	position: absolute;
	left: 120px;
	top:125px;
	width: 150px;
	visibility:hidden;
}



#menu_css_orizzontale li:hover ul.sub_menu {
	visibility:visible;
}
.lung_fissa{
	width:90px;
}
.lung_fissa_bil{
	width:140px;
}

Quando si zooma alcune voci del menu vanno a capo e si disallinea tutto in modo pessimo
Ci sono accorgimenti che posso prendere per evitare questa cosa??
In casi estremi, si potrebbe disattivare direttamente lo zoom :P?
Grazie mille

[Mich_]

Disattivare lo zoom. E` un po' drastica come decisione. Per fortuna non e` possibile.
Ma come fai a decidere tu quale e` la dimensione minima dei caratteri che un utente deve usare per leggere? Non siamo nello studio dell'oculista! E non puoi decidere quale e` la larghezza minima della finestra del browser.

Comunque ci sono vari accorgimenti che puoi mettere in pratica. Ne cito qualcuno, ma ogni layout ed ogni pagina e` una storia a se` e non si puo` generalizzare.

- dare una dimensione minima definita in em al contenitore di tutto il menu
- usare posizionamenti assoluti (dimensioni in em) - io la sconsiglio a meno che non hai buona esperienza con i posizionamenti

Comunque la cosa migliore e piu` semplice e` andare a farti un giro tra i menu pronti (alcuni link tra i "link utili" del forum - a me piacciono quelli di CSSplay) e provare a zoomare nei vari menu per vedere come si comportano; quando vedi quello che si comporta bene, analizza il codice e ...