Parte del menu che in INTERNET explorer scappa giù...

**tanasuke** · 11-04-2013, 21:11

Ciao ragazzi,è la prima volta che scrivo sul forum,ma è da molto che seguo le guide e i vari tutorials che vengono proposti su HTML.it,tanto che sono riuscito a realizzare il mio sito web anche tramite ai vostri consigli.
Ho però un problema che spero sia risolvibile ma che mi stà facendo impazzire.
Stò riprogettando la grafica del mio sito e ho realizzato un DIV da 1000px che contiene un menu orizzontale (una classica lista UL). Il problema mi si presenta solo e unicamente con INTERNET EXPLORER (10 nel mio caso) e cioè che mentre su tutti gli altri browser(firefox,chrome,Opera,e safari) il menu è perfetto,in internet explorer non sò perchè ma l'ultima voce del menu mi SCAPPA SOTTO( come se vedesse il div che lo contiene CORTO e quindi la fà sgusciare fuori) .
Vi allego un'immagine per fare chiarezza.(MENU).L'immagine in alto è quella relativa a I.E. mentre quella sotto è la visualizzazione su tutti gli altri brower.
Per risolvere devo allungare il div di circa 30px con conseguente scentramento del menù sulla visualizzazione degli altri browser.
Volevo chiedervi secondo voi da cosa può dipendere questa cosa.Ho smanettato un pò col CSS provando a mettere la lunghezza al 100%,ho provato su AUTO,ma cosi facendo il menù trasla tutto a sx e non è più centrato.
Grazie per l'eventuale aiuto e scusate la lunghezza del post.Ciao

**Prill** · 12-04-2013, 09:04

Ciao tanasuke, benvenuto.
Hai elementi flottanti dunque. E' probabile sia problema di margini o padding, ma senza vedere il codice possiamo fare solo ipotesi. Per intanto: conviene sempre fare un reset per azzerarli (così che i diversi browser non usino i propri valori di default che possono differire), ripristinandoli con valori precisi poi dove servono:

codice:

* {margin:0;padding:0}

Se il problema persiste, mostraci il tuo codice (css e html)

**tanasuke** · 12-04-2013, 14:39

Ciao Prill e grazie per la risposta.
Guarda io nel "body" , la prima cosa che faccio quando inzio la creazione di un sito è appunto resettare margin e padding quindi penso che il problema non sia li.Comunque per comprendere meglio quello che ho fatto allego qui il codice html

codice:

<!doctype html> <html> <head>  <meta charset="utf-8"> <title>shibamania</title> <link href="prima pagina.css" rel="stylesheet" type="text/css">   </head>  <body>    <div class="wrapper">             <div class="container">             <ul class="menu" rel="sam1">                 <li class="active">Home[*]AAAAAAAAA                 <li >BBBBBBB[*]CCCCCCCCC[*]DDDDDDDDDDD[*]EEEEEEEEEE[*]FFFFFFFFFF[*]GGGGGGGG[/list]</div>    </body> </html>

e questo è il css

codice:

@charset "utf-8"; body {          margin: 0;     padding: 0;     background: #141414; } /*Inizio CSS Menu orizzontale principale*/ .wrapper { 	width: 100%; 	height: 80px; 	background : #464646; 	background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69))); 	background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69)); 	position: relative; }  .title {     position: absolute;     right: 20px;     top: 10px;     font-size: 18px;     text-transform: uppercase; }  .container { 	width: 1050px; 	margin-top: 0; 	margin-right: auto; 	margin-bottom: 0; 	margin-left: auto; }  .menu { 	height: 80px; 	float: none; }  a { 	text-decoration: none; 	color: #333333; 	text-transform: uppercase; 	font-size: 15px; 	font-weight: bold; }  ul {     margin: 0;     padding: 0; }  ul.menu li { 	list-style: none; 	float: left; 	height: 79px; 	text-align: center; 	font-family: Arial;     font-size: 14px;     text-shadow: 0 1px 1px rgba(255,255,255,0.4);     color: #262626; 	 	background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78,1)) );      	background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78,1) 100%); 	 	background: -o-radial-gradient(center bottom, ellipse cover, rgba(31,169,244,1) 0%,rgba(0,28,78,1) 100%); /* Opera 12+ */  background: -ms-radial-gradient(center bottom, ellipse cover, rgba(31,169,244,1) 0%,rgba(0,28,78,1) 100%); /* IE10+ */  background: radial-gradient(ellipse at center bottom, rgba(31,169,244,1) 0%,rgba(0,28,78,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1fa9f4', endColorstr='#001c4e',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */ 	 	}  ul li a {     display: block;     padding: 0 20px;     border-left: 1px solid rgba(255,255,255,0.1);     border-right: 1px solid rgba(0,0,0,0.1);     text-align: center;     line-height: 79px;     -webkit-transition-property: background;     -webkit-transition-duration: 700ms;     -moz-transition-property: background;     -moz-transition-duration: 700ms;     -ms-transision-property: background; 	-ms-transition-duration: 700ms;  	 	 	background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));     background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));      	 	 	}  ul li a:hover {     background: transparent none; }  ul[rel=sam1] li a {     background: #606060; }  ul[rel=sam1] li a:hover {     background: transparent none; }  ul li.active a{     background: rgb(173,0,0); 	color: #FFF; }  Fine CSS Menu orizzontale principale

Non riesco proprio a capire da cosa possa dipendere.
Ciao e grazie per l'aiuto

Discussione: Parte del menu che in INTERNET explorer scappa giù...

Strumenti discussione

Ricerca discussione

Visualizza

Parte del menu che in INTERNET explorer scappa giù...

Permessi di invio