problemi visualizzazione explorer

**Aekold** · 15-06-2011, 13:48

salve a tutti.. sto realizzando un piccolo sito internet per la pasticceria di un mio amico. Diciamo che a parte qualcosina, non credo di dover fare grosse e sostanziali modifiche, il sito è quasi finito. L'ho testato con Chrome e con Mozilla, e fin qui nessun problema. Ma aprendo il sito con Explorer, i caratteri vengono visualizzati in modo errato, troppo grossi, e mi pare ci sia anche un font differente.. inoltre, alcune scritte nel menù, impostate in modo tale da divenire "invisibili" all'espansione di una sezione, su explorer restano visibili, rendendo il sito un pò meno gradevole esteticamente. A tutto ciò si aggiunge qualche problemino di velocità.. mentre FF e Chrome vanno benissimo, con Explorer, il cambiamento dello sfondo mi risulta un pò.. "scattoso"..
ultimo problema: ho provato a validare sia la home page che il relativo css con w3c validator. La home page risulta validata, mentre il css mi da qualche errore per quanto riguarda alcuni comandi (gli stupendi -moz-border-radius).. c'è un metodo per ovviare a questo problema? grazie a tutti per l'attenzione..

ecco il sito in questione:
http://effepicreations.altervista.or...zie/index.html http://effepicreations.altervista.or...zie/index.html

principalmente mi interessa risolvere il problema del font..

ecco com'è impostato il font:
nella Home page, sezione <head> ho inserito:

codice:

<link href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow:regular,bold" rel="stylesheet" type="text/css">

mentre nel css ho inserito:

codice:

body{ background:#000; color:#fff; font-family: 'PT Sans Narrow', Arial, sans-serif; text-transform:uppercase; }

suggerimenti?

**rickynewtek** · 15-06-2011, 15:24

Scusa se sono così "diretto" ma quel sito non ha nulla di html5... posterei in jQuery dato il problema è lì.

punto 2: hai usato qualcosa per filtrare l'opacity del menu principale al click del mouse? se hai usato i css3 dovresti usare questo tool

punto3: probabilmente il problema sta nel codice jquery.... io proverei x far sparire il menu a impostare un controllo (anche se il codice che hai postato è molto avanzato quindi ne saprai più di me, in ogni caso te lo posto):

INIZIO DOM
[...]
if( $('.ac_menu').is(':visible') ) {
$(this).hide();
}
else {
$(this).fadeIn("fast");
}

punto 4: internet explorer 8 ha problemi risaputi anche dai developer a renderizzare velocemente il codice jQuery, la "scattosità" rispetto agli altri browser è data dal suo motore di rendering javascript obsoleto. Difatti se lo provi con iE9 lo vedrai come su tutti gli altri browser.

punto 5: il moz e webkit non vengono accettati dagli standard css3, è normale, in teoria dovresti usare solo box-shadow etc, ma in questo modo taglieresti fuori chi ha firefox o chorome non aggiornati correttamente.

punto6: per il problema dei font prova a eliminare text-transform:uppercase; (anche se non penso sia dovuto a quello), penso invece che il tuo problema risieda nel fatto che hai specificato il selettore nel body, dovresti specificarlo nella singola classe: es .ac_menu

punto7: bel sito =D

**Aekold** · 15-06-2011, 16:08

ciao, nessun problema per "l'essere così diretto".. anzi meglio

il sito è in effetti un pò in accozzaglia, anche se qualche frammento di HTML 5 mi pare ci sia (il "footer", ad esempio, mi pare sia stato introdotto con HTML 5.. ma è anche possibile che io stia dormendo come capita spesso XD)..cionostante si, non è HTML 5 puro, mea culpa

per quanto riguarda i punti 2 e 3: non penso sia quello il problema, anche perchè su Chrome, Firefox e Safari (ho appena provato anche con quello), funziona tutto bene.. il problema è solo di explorer.. per quanto riguarda meglio il punto 2, proverò non appena sarà possibile riaprire la pagina che mi hai consigliato (per ora ha superato i limiti di traffico disponibile e non me la fa aprire).. thanks

per i punti 4 e 5: è proprio come temevo allora.. il problema è sempre sto odioso browser (IE).. a quanto ho appena letto sti comandi non sono riconosciuti w3c per colpa di explorer -.-.. mi accontento così a sto punto, tanto non credo che al mio amico interessi troppo se il css del suo sito è standard o menoXD

per il punto 6: non credo c'entri molto.. uppercase serve a rendere tutti i caratteri, ove non specificato diversamente, maiuscoli (che poi è + per pigrizia in fase di scrittura, per non dover ogni volta andare di Caps...).. per il resto ho provato a mettere il selettore nelle singole classi, ma non funge uguale.. o meglio.. su explorer non funge, sugli altri browser funzionava già T.T

per il punto 7: beh.. che dire.. grazie infinite^^ anche se non posso prendermi tutto il merito.. lo shadowbox e la jquery per il menù non sono certo opera mia^^ (infatti una delle cose che devo ancora inserire sono i ringraziamenti)

Grazie mille per la tua disponibilità^^

**rickynewtek** · 15-06-2011, 17:10

mmm probabilmente allora c'è qualcosa da modificare nel css, però dovrei vederlo =D, non sarebbe la prima volta che i8 renderizza male un sito, mi capita quasi ogni giorno =D,esistono in ogni caso alcuni tricks e trucchetti via CSS per risolvere molti problemi comuni.

ps : in ogni caso usa css3 pie , è indispensabile se usi i css3 su ie8 (come penso che sia) altrimenti è normale che ti si "sputtana" tutto=D.

cerca tricks ie8 o tips ie8 su bigG

fammi sapere

**Aekold** · 15-06-2011, 17:21

ecco il Css, o meglio, i Css che ho usato

Css principale:

codice:

@import url('reset.css'); body{ background:#000; color:#fff; font-family: 'PT Sans Narrow', Arial, sans-serif; text-transform:uppercase; } a{ color:#fff; text-decoration:none; } img.ac_bgimage{ position:fixed; left:0px; top:0px; width:100%; opacity:0.8; display:none; } .ac_overlay{ width:100%; height:100%; position:fixed; top:0px; left:0px; background:transparent url(../images/pattern.png) repeat top left; } .ac_loading{ position:fixed; top:10px; right:10px; background:#000 url(../images/loader.gif) no-repeat center center; width:50px; height:50px; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px 10px 10px 10px; z-index:999; opacity:0.7; display:none; } .ac_content{ position:fixed; height:90px; width:100%; top:50%; left:0px; margin-top:-65px; } .ac_content h1{ background:transparent url(../images/bg_menu.png) repeat top left; display:block; float:left; width:120px; height:50px; padding:20px; font-size:20px; font-weight:bold; line-height:20px; margin-right:1px; } .ac_content h1 span{ display:block; font-weight:normal; font-size:12px; } .ac_menu{ background:transparent url(../images/bg_menu.png) repeat top left; float:left; position:relative; height:90px; width:0px; } .ac_menu > ul{ float:right; } .ac_menu > ul > li{ float:left; position:relative; height:90px; overflow:hidden; } .ac_menu > ul > li a{ margin-top:10px; color:#fff; display:auto; height:90px; padding:0px 10px; text-align:left; line-height:90px; outline:none; font-size:18px; font-weight:bold; text-shadow:1px 1px 1px #000; } .ac_subitem{ width:400px; height:0px; /* animate to 400px */ top:50%; right:0px; margin-top:0px; /* animate to -200px */ position:fixed; z-index:99; overflow:hidden; background:transparent url(../images/bg_menu2.png) repeat top left; text-transform:none; padding-left: 1.5em; padding-right: 1.5em; text-align: justify; } .ac_subitem h2{ font-size:22px; font-weight:bold; color:#fff; padding: 40px 0px 0px 40px; text-shadow:0px 0px 1px #000; } .ac_subitem ul{ padding:0px 40px; text-align:left; } .ac_subitem ul li{ margin:10px 0px; text-align:left; } .ac_subitem ul li:first-child{ font-size:14px; text-transform:none; border-bottom:1px dotted #333; padding-bottom:15px; margin-bottom:15px; } span.ac_close{ float:right; margin:10px; width:11px; height:12px; cursor:pointer; background:transparent url(../images/close.png) no-repeat top left; opacity:0.4; } span.ac_close:hover{ opacity:1.0; } .ac_footer{ position:fixed; bottom:0px; left:0px; width:100%; font-size:13px; background:#000; opacity:0.9; height:20px; padding:5px; text-transform:none; color:#ddd } .ac_footer a{ position:fixed; padding:5px; bottom:0px; right:5px; font-size:13px; letter-spacing:0px; color:#ddd; float:right; height:20px; text-transform:none; } .footer a:hover{ color:#ddd; text-transform:none; } .ac_footer a span{ font-weight:bold; text-transform:none; } .ac_footer a.ac_left{ float:left; text-transform:none; }

Css secondario

codice:

/* CSS reset */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; } html,body { margin:0; padding:0; height:100%; } table { border-collapse:collapse; border-spacing:0; } fieldset,img { border:0; } input{ border:1px solid #b0b0b0; padding:3px 5px 4px; color:#979797; width:190px; } address,caption,cite,code,dfn,th,var { font-style:normal; font-weight:normal; } ol,ul { list-style:none; } caption,th { text-align:left; } h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; } q:before,q:after { content:''; } abbr,acronym { border:0; }

ci sarebbe anche un terzo Css, ma quello riguarda solo la Shadowbox, e quella non mi da alcun problema..cmq lo posto ugualmente

codice:

#sb-title-inner,#sb-info-inner,#sb-loading-inner,div.sb-message{font-family:"HelveticaNeue-Light","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:200;color:#fff;} #sb-container{position:fixed;margin:0;padding:0;top:0;left:0;z-index:999;text-align:left;visibility:hidden;display:none;} #sb-overlay{position:relative;height:100%;width:100%;} #sb-wrapper{position:absolute;visibility:hidden;width:100px;} #sb-wrapper-inner{position:relative;border:1px solid #303030;overflow:hidden;height:100px;} #sb-body{position:relative;height:100%;} #sb-body-inner{position:absolute;height:100%;width:100%;} #sb-player.html{height:100%;overflow:auto;} #sb-body img{border:none;} #sb-loading{position:relative;height:100%;} #sb-loading-inner{position:absolute;font-size:14px;line-height:35px;height:24px;top:50%;margin-top:-12px;width:100%;text-align:center;} #sb-loading-inner span{background:url(../images/loader.gif) no-repeat;padding-left:35px;display:inline-block;} #sb-body,#sb-loading{background-color:#060606;} #sb-title,#sb-info{position:relative;margin:0;padding:0;overflow:hidden;} #sb-title,#sb-title-inner{height:26px;line-height:26px;} #sb-title-inner{font-size:16px;} #sb-info,#sb-info-inner{height:20px;line-height:20px;} #sb-info-inner{font-size:12px;} #sb-nav{float:right;height:16px;padding:2px 0;width:45%;} #sb-nav a{display:block;float:right;height:16px;width:16px;margin-left:3px;cursor:pointer;background-repeat:no-repeat;} #sb-nav-close{background-image:url(../images/close2.png);} #sb-nav-next{background-image:url(../images/next.png);} #sb-nav-previous{background-image:url(../images/previous.png);} #sb-nav-play{background-image:url(../images/play.png);} #sb-nav-pause{background-image:url(../images/pause.png);} #sb-counter{float:left;width:45%;} #sb-counter a{padding:0 4px 0 0;text-decoration:none;cursor:pointer;color:#fff;} #sb-counter a.sb-counter-current{text-decoration:underline;} div.sb-message{font-size:12px;padding:10px;text-align:center;} div.sb-message a:link,div.sb-message a:visited{color:#fff;text-decoration:underline;}

ecco tutto

Discussione: problemi visualizzazione explorer

Strumenti discussione

Ricerca discussione

Visualizza

problemi visualizzazione explorer

Permessi di invio