Salve a tutti. Vi scrivo per chiedervi aiuto nel risolvere un problema con un menù a tendina che su GoogleCrome funziona perfettamente (questo è il link della pagina caricata sulla directory secondaria per prova. Andate su VINI e vedrete comparire il menù http://www.sergiodelcasale.com/scaricabili/Sito%20Sergio%202013/HTML/index.html) mentre su IE8 non funziona, o meglio la tendina non compare.
Premetto che il sito l'ho costruito a partire da un template perchè sono solo un'appassionata di programmazione e di certo sono carente in molte nozioni.
Ho comunque provato per giorni a cercare di capire quale potesse essere il problema, aiutata dalle discussioni simili fatte su questo forum, ma non riesco proprio a risolvere il tutto.
Vi chiedo quindi il gran favore di dirmi cosa c'è che non và, e vi ringrazio fin da ora per tutto l'aiuto che mi darete.
Grazie
Paola
codice:/*HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH TOP MENU HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH*/ .topmenu { position:relative; width:100%; margin:0; z-index:5; border-bottom:1px solid #c9c9c9; background: rgb(226,226,226); /* Old browsers */ background: -moz-linear-gradient(top, #e9e9e9 0%, #d9d9d9 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e9e9e9), color-stop(100%,#d9d9d9)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #e9e9e9 0%,#d9d9d9 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #e9e9e9 0%,#d9d9d9 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #e9e9e9 0%,#d9d9d9 100%); /* IE10+ */ background: linear-gradient(to bottom, #e9e9e9 0%,#d9d9d9 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#d3d3d3',GradientType=0 ); /* IE6-9 */ } .topmenu .nav { display:table; margin:0 auto; padding:0px 0; } /* =================== SUPERFISH AMMENDMENT ====================== */ .sf-menu, .sf-menu * { margin: 0; padding: 0; list-style: none;} .sf-menu { margin: 0 auto; line-height: 1.0; position:relative; z-index:99; } .sf-menu ul { position: absolute; top: -999em; width: 14em; /* left offset of submenus need to match (see below) */} .sf-menu ul li { width:100%; position: relative;z-index:101;} .sf-menu li:hover { visibility: inherit; /* fixes IE7 'sticky bug' */} .sf-menu li { float: left; background:none; list-style-position:inside; position: relative; } .sf-menu a { display: block; position: relative; text-transform: uppercase; } .sf-menu li:hover ul, .sf-menu li.sfHover ul { left: 0; top:2.9em; /* match top ul list item height */ } .sf-menu li:hover li ul, .sf-menu li.sfHover li ul { top:-999em; } .sf-menu li li:hover ul, .sf-menu li li.sfHover ul { left: 14em; top:0; /* match ul width */ } .sf-menu li li:hover li ul, .sf-menu li li.sfHover li ul { top:-999em; } .sf-menu li li li:hover ul, .sf-menu li li li.sfHover ul { left: 14em; bottom: 10em; top: 0;/* match ul width */ } /* =================== Menu Settings ====================== */ .sf-menu a { padding:1em 1.4em; text-decoration:none; } .sf-menu a, .sf-menu a:visited { text-decoration:none; color:#999; /* visited pseudo selector so IE6 applies text colour*/ } .sf-menu li a { font-size:11px; font-weight:normal; background: rgb(226,226,226); /* Old browsers */ background: -moz-linear-gradient(top, #e9e9e9 0%, #d9d9d9 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(226,226,226,1)), color-stop(100%,#d9d9d9)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #e9e9e9 0%,#d9d9d9 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #e9e9e9 0%,#d9d9d9 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #e9e9e9 0%,#d9d9d9 100%); /* IE10+ */ background: linear-gradient(to bottom, #e9e9e9 0%,#d9d9d9 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#d3d3d3',GradientType=0 ); /* IE6-9 */} .sf-menu li > a { font-weight:bold; } .sf-menu li li a { font-weight:normal; font-size:11px; } .sf-menu li ul { -webkit-box-shadow: 0 2px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 2px 4px rgba(0,0,0,.2); box-shadow: 0 2px 4px rgba(0,0,0,.2); } .sf-menu li li { background-image: (../images/opacs/dark10.png); background-position: bottom left; background-repeat: repeat-x; border-right:1px solid #ddd; } .sf-menu li li:last-child { background-image:none;} .sf-menu li:hover, .sf-menu li.sfHover, .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active { background:#ffffff; outline:0; text-decoration:none; color:#000; } .sf-menu li li:hover, .sf-menu li li.sfHover, .sf-menu li li a:focus, .sf-menu li li a:hover, .sf-menu li li a:active { text-decoration:none; outline:0; color:#000; } /* Active Page Status CSS for all the browsers*/ .sf-menu li.current-cat a, .sf-menu li.current_page_item a { margin:0; } .sf-menu li.current-cat > a, .sf-menu li.current_page_item > a { } .sf-menu li a span { display:block; text-transform:capitalize; letter-spacing:1px; padding-top:3px; font:normal normal 10px Arial, Helvetica, sans-serif; }
codice:/*HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH MOBILE MENU CSS HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH*/ .m-select-container{ position: relative; padding:10px 0px; height:37px; display: none; } .m-select { position: absolute; padding: 10px 10px 10px 5px; left:0; right:0; margin:0 auto; width: 97%; display: inline-block; font-size: 12px; color: #CCC; opacity: 0.7; filter: alpha(opacity = 70); background-color: #000; -moz-box-sizing: border-box; box-sizing: border-box; z-index: 2; -webkit-border-radius: 3px; -khtml-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; } #m-select-active{ background-image: url('../images/down.png'); background-repeat: no-repeat; background-position: right; } .m-select-links { margin: 0px; padding: 5px 0px 0px; display: none; } .m-select-links li{ list-style: none; padding: 1px; margin: 0px; overflow: hidden; } .m-select-links li a{ font-weight: normal; display: block; padding: 5px; margin: 0px; } .m-select-links li a:hover{ color: #ddd; text-decoration:none; background-color: #282828; -webkit-border-radius: 3px; -khtml-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; }
Se può in qualche modo esservi utile, vi posto anche il codice relativo ai bottoni:
codice:/*HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH BUTTONS HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH*/ .button, .button span { display: inline-block; } .button { position:relative; zoom:1; /* zoom and *display = ie7 hack for display:inline-block */ overflow: visible; line-height:1em; margin-bottom:10px; border: 1px solid #ddd;/* IE Hack*/ border: rgba(0, 0, 0, .1) 1px solid;/* Safari 4+, Chrome, FF3.5+ */ border-bottom:rgba(0, 0, 0, .2) 3px solid; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.1); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.1); box-shadow: 0 1px 2px rgba(0,0,0,.1); outline: none; white-space: nowrap; cursor: pointer; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; /* FF3.5+ */ background: -moz-linear-gradient( center top, rgba(255, 255, 255, .1) 0%, rgba(0, 0, 0, .1) 100% ); /* Safari 4+, Chrome */ background: -webkit-gradient( linear, center bottom, center top, from(rgba(0, 0, 0, .1)), to(rgba(255, 255, 255, .1)) ); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#19FFFFFF', EndColorStr='#19000000'); /* IE6,IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#19FFFFFF', EndColorStr='#19000000')"; /* IE8 */ -moz-user-select: none; -webkit-user-select:none; -khtml-user-select: none; user-select: none; } button::-moz-focus-inner { border: none; /* overrides extra padding on sides FF3.5 */ } button.button { margin:0; padding:0px; } .button.full, .button.full span { display: block; } button.button:hover, .button:hover, .button.hover { position:relative; /* FF3.5 */ background: -moz-linear-gradient( center top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .1) 100% ); /* Safari4+, Chrome */ background: -webkit-gradient( linear, center bottom, center top, from(rgba(255, 255, 255, .1)), to(rgba(255, 255, 255, .2)) ); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#33FFFFFF', EndColorStr='#19FFFFFF'); /* IE6,IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#33FFFFFF', EndColorStr='#19FFFFFF')"; /* IE8 */ } button.button:active, .button:active, .button.active { top:1px; /* FF3.5 */ background: -moz-linear-gradient( center top, rgba(0, 0, 0, .1) 0%, rgba(255, 255, 255, .1) 100% ); /* Safari4+, Chrome */ background: -webkit-gradient( linear, center bottom, center top, from(rgba(255, 255, 255, .1)), to(rgba(0, 0, 0, .1)) ); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#19000000', EndColorStr='#19FFFFFF'); /* IE6,IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#19000000', EndColorStr='#19FFFFFF')"; /* IE8 */ } .button span { position: relative; padding:0.5em 1.3em; border-top:1px solid rgba(255, 255, 255, 0.1); border-bottom:1px solid rgba(0, 0, 0, 0.1); line-height:1em; text-align:center; text-decoration:none; white-space: nowrap; color:#fff; } @media screen and (-webkit-min-device-pixel-ratio:0) { /* Safari, Google Chrome margin fix */ button.button span { margin-top: -1px; margin-left:-2px; margin-right:-2px; } } .button.small span { font-size:10px; text-transform:uppercase; } .button.medium span { font-size:14px; } .button.large span { font-size:18px; } /* ---- Buttons Color Scheme ---- */ .button.gray { background-color: #666666; } .button.gray:hover { background-color: #666666; } .button.brown { background-color: #A52A2A; } .button.brown:hover { background-color: #A52A2A; } .button.cyan { background-color: #00FFFF; } .button.cyan:hover { background-color: #00FFFF; } .button.orange { background-color: #ff5c00; } .button.orange:hover { background-color: #ff5c00; } .button.red { background-color: #861D23; } .button.red:hover { background-color: #861D23; } .button.magenta { background-color: #A9014B; } .button.magenta:hover { background-color: #A9014B; } .button.yellow { background-color: #ffb515; } .button.yellow:hover { background-color: #ffb515; } .button.blue { background-color: #00ADEE; } .button.blue:hover { background-color: #00ADEE; } .button.pink { background-color: #e22092; } .button.pink:hover { background-color: #e22092; } .button.green { background-color: #91bd09; } .button.green:hover { background-color: #91bd09; } .button.black { background-color: #333333; } .button.black:hover { background-color: #333333; } .button.white { background-color: #FFFFFF; } .button.white span { color: #666666; } a.button, a.button:hover, button.button:hover { background-color:#EDEDED; }
Rispondi quotando
