Jaws rovina il layout

[babeuf]

Salve,
ho creato un template a tre colonne, più header e footer, che visualizzo in modo coerente su Firefox, IE ed Opera. Ho però un problema quando passo a testarlo con Jaws. Il browser vocale infatti, quando inizia a leggere la schermata su Firefox o IE (su Opera non funziona), dopo alcuni secondi sposta di una dozzina di pixel a sinistra tutto il contenuto del body, così che tutto ciò che si trova a sinistra viene tagliato, creando un margine vuoto a destra.
Il mio layout è liquido, ma ho fatto una prova con valori fissi ed ho visto che non cambia nulla. Qualcuno conosce una dritta per risolvere la questione? Ho provato Jaws su diverse pagine web, ma il suo comportamento è "scorretto" solamente sul template che ho realizzato. Ah avevo dimenticato di dire che sia il codice, sia i css sono tutti validati.
Ringrazio chi saprà dirmi qualcosa.

[thomas_anderson]

non ha nessun senso: jaws serve solo a leggere, non a visualizzare. come credi che possa accorgersi un utente non vedente della "sfasatura" quando il suo concetto di "layout" non si estende in due dimensioni ma in tre?
leggi: http://www.diodati.org/w3c/css2/aural.html

[babeuf]

Se per un non vedente il problema non si pone, non vuol dire che non ci sia un problema. Anche senza pensare al caso in cui il non vedente volesse far vedere la pagina a qualcuno (e non basta ricaricare la pagina: bisogna chiudere e riaprire il browser per avere la visualizzazione regolare), il semplice fatto che Jaws vada ad interferire con la rappresentazione visiva data dal browser non mi sembra sia da trascurare proprio perché, come tu dici "jaws serve solo a leggere, non a visualizzare".
Il fatto che i siti sui quali ho testato Jaws non avessero il layout spaginato, contrariamente a quanto avveniva col mio template, mi aveva fatto sperare fosse possibile trovare una soluzione, o almeno la causa di questo comportamento. Ringrazio chi vorrà aiutarmi a trovare una delle due.

[thomas_anderson]

Io ho scritto così e ti ho dato quel link per farti capire che i problemi appartengono a due tipi di media diversi: screen e aural (CSS 2.1 speech). cmq, posta qui il codice per vedere meglio.



Nota: jaws è un browser acustico e si occupa del media acustico. quindi se io scrivo:

a {speak: none;}

per lui ha un senso, mentre per un browser visuale non ne ha nessuno. scusa se sono stato poco chiaro.

[babeuf]

Incollo qui il codice del css. Siccome non ho idea di dove possa risiedere il problema lo metto per intero.
Ti ringrazio per l'attenzione (ed il tempo) che ci vorrai eventualmente dedicare.
Per evitare di inserire anche il codice xhtml allego un'immagine che descrive il layout e la gerarchia degli elementi, spero sia sufficiente.


/* inizio css */

body{
font-family: Helvetica, Arial, sans-serif;
color: black;
background: #8099a8 url(../sfondo.gif) fixed left top repeat;
line-height: 1.2;
width: 70%;
margin: 0 auto 0 auto;
padding: 0 10px;
z-index:1;
}


#accessibile img{
text-align: right;
border-style: none;
}

#img_accessibile{
background-color: white;
color: black;
margin: 0 -4px 0 auto;
padding: 1px;
width: 142px;
height: 20px;
border: none;
}


/****** Box che contiene tutti gli elementi *****/

#container{
width: 100%;
height: 100%; /*Questa proprietà e la seguente permettono di creare dei bordi corretti*/
overflow: hidden;
background: white;
color: inherit;
font-size: 80%;
border: 2px solid #bc2626;
margin: 0;
padding: 5px 0;
position: relative;
z-index: 55;/*per visualizzare bordo sopra banner_manager*/
}


/********* div che serve a creare sfondo *******/

#shade{
background: white url(../shade.gif) left top repeat-x;
color: inherit;
}


/******************* Colonne ********************/

#col_sx{
vertical-align: top;
margin: -8px 0 0 0;
width: 128px;
padding: 10px 5px 0 5px;
float: left;
font-size: 95%;
position: relative;
z-index: 56; /*per sovrapporsi a banner_manager*/
}

#col_centrale{
float: left;
vertical-align: top;
width: 57%;
height: 100%;
margin: -8px 0 -10px -2px;
padding: 0 5px 0 5px;
font-size: 102%;
position: relative;
z-index: 55; /*per sovrapporsi a banner_manager*/
}

#col_dx{
float: right;
vertical-align: top;
margin: -12px 0 0 auto;
width: 128px;
padding: 0 5px 0 5px;
font-size: 95%;
position: relative;
z-index: 55; /*per sovrapporsi a banner_manager*/
}



/************ Layout Div Principali ************/

#top_header{
background-color: white;
color: inherit;
margin: -5px 0 0 0;
padding: 0;
width: 100%;
height: 110px;
}

#top_header object{
width: 100%;
height: 110px;
margin: 0;
padding: 0 8px;
}



#nav_modules{
width: 100%;
background-color: #fde0e0;
color: inherit;
text-align: center;
font-weight: bold;
padding: 5px 8px 2px 8px;
margin: 0 -8px 5px -8px;
border-top: 2px solid #bc2626;
border-bottom: 1px solid #bc2626;
}



#nav{
width: 100%;
float: left;
margin: 0 -5px 0 -5px;
padding: 5px 5px 12px 5px;
border-bottom: 2px solid #fff;
}



#link_manager{
float: left;
width: 100%;
margin: 0 -5px 0 -5px;
padding: 5px 5px 12px 5px;
border-bottom: 2px none #bc2626;
}



#banner_manager{
margin: 10px auto 2px;
padding: 0 10px 10px 10px;
width: 700px;
height: 90px;
position:relative;
z-index: 50;
}

.img_banner_manager{
vertical-align: top;
margin: 1px 5px 0 0px;
padding: 0;
width: 132px;
height: 82px;
float: left;
overflow: hidden;
}

span.img_banner_manager img{
width: 130px;
height: 80px;
vertical-align: top;
display: inline;
}



#latest_news{
background: #cae3c8 url(../topleft.gif) left top no-repeat;
color: inherit;
width: 100%;
margin: 0 5px 5px;
padding: 5px 5px 0;
}

#latest_news h3{
margin: -2px 0 -10px;
padding: 0 5px;
}

#latest_news p{
padding: 0 5px 5px;
}

#latest_news .topright{
background: url(../topright.gif) right top no-repeat;
margin: -5px -5px 0 0;
}

#latest_news .bottomright{
background: url(../bottomright.gif) right bottom no-repeat;
}

#latest_news .bottomleft{
background: url(../bottomleft.gif) left bottom no-repeat;
margin: 0 0 0 -5px;
}



#content{
margin: -5px 0 0 0;
padding: 0 5px;
float: left;
width: 100%;
height: 100%;
}



#news_manager{
float: left;
width: 100%;
margin: 0px -5px 0 -5px;
padding: 5px 5px 12px 5px; /*per distanziare il bordo inferiore*/
border-bottom: 2px none #fff;
}



.download_manager{
text-align: right;
width: 100%;
border-bottom: 2px solid #ddd;
}



#download_manager_gen{
float: left;
width: 100%;
margin: 0px -5px 0 -5px;
padding: 5px 5px 12px 5px;
border-bottom: 2px none #bc2626;
}



#event_manager{
float: left;
width: 100%;
margin: 0px -5px 0 -5px;
padding: 5px 5px 12px 5px;
border-bottom: 1px none #bc2626;
}



#footer{
background-color: #fde0e0;
color: inherit; /*elemento necessario a validazione*/
float: left;
font-size: 85%;
text-align: center;
width: 100%;
margin: 10px 0 -6px 0px;
padding: 3px 10px;
border-top: 1px solid #bc2626;
border-bottom: 1px solid #bc2626;
}



#certificate{
width: 100%;
float: left;
text-align: center;
margin: 0px -10px 0px -10px;
padding: 0;
display: inline;
list-style: none;
}

#certificate ul{
margin: 0 auto;
display: inline;
list-style: none;
}

#certificate li{
display: inline;
list-style: none;
}

#certificate img{
width: 80px;
height: 15px;
margin: 0 -2px;
padding: 0;
border: 2px solid white;
}




/***** Componenti per bordi arrotondati ********/

.mod_sx {
background: #fde0e0 url(../sx_down.gif) left bottom no-repeat;
color: inherit;
padding: 0 5px 9px 5px;
margin: 0 -5px -9px -5px;
}

.mod_sx h3{
background: #bc2626 url(../sx_up.gif) left top no-repeat;
color: white;
padding: 2px 0 2px 7px;
margin: 0 -5px;
}

.mod_sx li a{
text-decoration: none;
}

.mod_dx {
background: #fde0e0 url(../dx_down.gif) left bottom no-repeat;
color: inherit;
padding: 0 5px 9px 5px;
margin: 0 -5px -9px -5px;
}

.mod_dx h3{
background: #bc2626 url(../dx_up.gif) left top no-repeat;
color: white;
padding: 2px 0 2px 7px;
margin: 0 -5px;
}

.mod_dx li a{
text-decoration: none;
}




/********* Liste per organizzare i link ********/

#nav_modules ul{
margin: 0;
padding: 0;
}

#nav_modules li{
display: inline;
list-style: none;
margin: 0 -1px;
padding: 0;
}

#banner_manager ul{
margin: 0;
padding: 0;
display: inline;
list-style: none;
}

#banner_manager li{
display: inline;
list-style: none;
margin: 0;
padding: 0;
vertical-align: top;
}

.modules ul{
width: 100%;
margin: 0;
padding: 0;
}

.modules li{
width: 100%;
padding: 0;
display: inline;
}



/**************** Link styles ******************/

a{
background: inherit;
color: #006699;
text-decoration: underline;
}

img{
border-style: none;
}

a:link{
text-decoration: underline;
}

a:visited{
text-decoration: underline;
background: inherit;
color: purple;
}

a:hover{
text-decoration: none;
}

a img{
margin: 0;
padding: 0;
vertical-align: top;
}


/***** banner_manager *****/

span.img_banner_manager a img:hover{
border: 1px solid #bc2626;
padding: 0px;
}

a:hover img{
border-color: #bc2626;
}/**** SOLO PER IE ****/

a img{
margin: 0;
padding: 0;
vertical-align: top;
}

span.img_banner_manager a img{
border: 1px solid white;
margin: 0;
padding: 0;
}


/***** nav_modules *****/

#nav_modules a span.sx{
background: url(../sx.gif) left top no-repeat;
width: 10px;
padding: 0 0 0 10px;
}

#nav_modules a:hover span.sx{
background: url(../sx2.gif) left top no-repeat;
width: 10px;
padding: 0 0 1px 10px;
border-bottom: 1px none #bc2626;
}

#nav_modules a.open span.sx{
background: url(../sx2.gif) left top no-repeat;
width: 10px;
padding: 0 0 2px 10px;
}

#nav_modules a{
background: #bc2626 url(../dx.gif) right top no-repeat;
color: white;
margin: 0;
padding: 0 10px 1px 0;
border-bottom: 1px solid #bc2626;
text-decoration: none;
position: relative;
z-index: 40;
overflow: hidden;
}

#nav_modules a.open{
background: white url(../dx2.gif) right top no-repeat;
color: #bc2626;
border-bottom: none;
padding: 0 10px 2px 0;
text-decoration: none;
}

#nav_modules a:hover{
background: white url(../dx2.gif) right top no-repeat;
color: #bc2626;
text-decoration: none;
}


/********* nav **********/

#nav a{
line-height: 1.3;
display: block;
margin: 2px -5px 0 -5px;
padding: 0 5px 0 7px;
border-style: solid none;
border-width: 2px;
border-color: #fde0e0;
}

#nav a:visited{
background: transparent;
text-decoration: none;
}

#nav a:hover{
background: #ffeaea;
color: #bc2626;
text-decoration: none;
border-color: #bc2626;
}


/**** download_manager ****/

#content .download_manager a img{
width: 22px;
height: 22px;
margin: -10px 5px 0 5px;
padding: 0 0 2px;
float: right;
vertical-align: top;
display: inline;
position: relative;
z-index: 80;
}

#content .download_manager{
width: 100%;
float: right;
margin: -10px 0 10px 0;
}


/** download_manager_gen **/

#download_manager_gen a{
background: transparent url(../download_icon.gif) left top no-repeat;
line-height: 1.3;
display: block;
margin: 2px -5px 0 -5px;
padding: 0px 5px 0 18px;
border-style: solid none;
border-width: 2px;
border-color: #fde0e0;
}

#download_manager_gen a:visited{
background-color: transparent;
text-decoration: none;
border-color: #fde0e0;
}

#download_manager_gen a:hover{
background-color: #ffeaea;
color: #bc2626;
text-decoration: none;
border-color: #bc2626;
}


/**** event_manager *****/

#event_manager a{
background: transparent url(../event_icon.gif) left top no-repeat;
line-height: 1.3;
display: block;
margin: 2px -5px 0 -5px;
padding: 0 5px 0 16px;
border-style: solid none;
border-width: 2px;
border-color: #fde0e0;
}

#event_manager a:visited{
background-color: transparent;
text-decoration: none;
border-color: #fde0e0;
}

#event_manager a:hover{
background-color: #ffeaea;
color: #bc2626;
text-decoration: none;
border-color: #bc2626;
}


/***** link_manager *****/

#link_manager a{
background: transparent;
line-height: 1.3;
display: block;
margin: 2px -5px 0 -5px;
padding: 0 5px 0 7px;
border-style: solid none;
border-width: 2px;
border-color: #fde0e0;
}

#link_manager a:visited{
background-color: transparent;
text-decoration: none;
}

#link_manager a:hover{
background: #ffeaea;
color: #bc2626;
text-decoration: none;
border-color: #bc2626;
}


/***** news_manager *****/

#news_manager li a{
text-decoration: underline;
}

#news_manager li a:visited{
text-decoration: underline;
}

#news_manager li a:hover{
text-decoration: none;
}



/****************** .headers *******************/

h1{
font-family: Verdana,Arial,sans-serif;
font-size: 120%;
background-color: inherit;
color: #bc2626;
margin: 0;
padding: 0;
}

h2{
font-family: Arial,sans-serif;
font-size: 112%;
background-color: inherit;
color: #006699;
margin: 0;
padding: 0;
}

h3{
font-family: Arial,sans-serif;
font-size: 105%;
background-color: inherit;
color: #334d55;
margin: 0;
padding: 0;
}

h4{
font-family: Arial,sans-serif;
font-size: 100%;
font-weight: normal;
background-color: inherit;
color: #333333;
margin: 0;
padding: 0;
}

h5{
font-family: Verdana,Arial,sans-serif;
font-size: 95%;
background-color: inherit;
color: #334d55;
margin: 0;
padding: 0;
}


#top_header h1{
font-size: 110%;
}

h1#nome_sito{
font-size: 200%;
}

#content h1, h2, h3, h4, h5, h6{
line-height: 1.5;
margin: 0 0 13px;
}



/**************** .paragraphs *****************/

#news_manager p{
line-height: 1.1;
margin: 2px -5px;
padding: 5px 5px 0 7px;
}


#content p{
line-height: 1.3;
margin: -10px 0 20px 0;
}



/**************** .list styles *****************/

ul{
list-style-type: square;
}


ul ul{
list-style-type: disc;
}


ul ul ul{
list-style-type: none;
}



/************** .images styles *****************/

#content img{
float: left;
padding: 0;
margin: 5px 5px 0 0;
}



/************** #search styles ****************/

label{
padding: 0;
font-family: Arial,sans-serif;
font-size: 100%;
font-weight: bold;
background-color: inherit;
color: #334d55;
}

#search{
background: url(../search_bg.gif) left no-repeat;
padding: 7px 0 5px 10px;
margin: -13px -8px 3px -9px;
font-size: 90%;
position: relative;
z-index: 100;
}

#search p{
padding: 0;
margin: 0;
}

#search form{
margin: 0;
padding: 0 0 5px 0;
}

#search label{
display: block;
margin: 0px;
}

/**** fine css ****/

[thomas_anderson]

ciao!
scusa per il ritardo. allora, nel tuo layout ci sono molti elementi potenzialmente pericolosi (tra virgolette), soprattutto per IE. Uno di questi è 'z-index' impostato per body. ancora: usi molto 'position: relative', altra bestia nera di Explorer. ancora: 'height' e 'overflow', altri problemi con Explorer dovuti alla sua proprietà hasLayout (http://gabrieleromanato.altervista.o...inglayout.html), come per i precedenti. il mio consiglio è quello di eliminare queste dichiarazioni e di rivedere il layout, usando solo la marginazione e la dichiarazione di 'width' per i blocchi incorniciati. una buona risorsa è http://www.brunildo.org/test/ dove trovi tutti i bug di explorer e degli ottimi cosnigli per risolverli (vedi 'float', tu hai messo dei margini negativi che creano problemi anche agli altri browser). non so quando ti potrò rispondere ancora. scusa in anticipo e ciao .

[babeuf]

Ciao, grazie per l'analisi ...anche se mi ha rovinato la giornata
Avrai capito che non è molto che mi dedico ai siti web, ed in effetti il codice che hai visto si riferisce praticamente al primo template che realizzo. Nei vari manuali che ho letto l'unico problema di IE a venire affrontato era il box model, e soluzioni come quella di attribuire uno 'z-index' al body e di usare i vari 'position: relative' erano tranquillamente consigliate per attivare la proprietà 'z-index'... Ho cominciato a dare una scorsa ai link che mi hai indicato, ed in effetti un mondo nuovo mi si è aperto, anzi, mi è caduto addosso. Ora ho un bel po' di materiale da leggere e di modifiche da fare al codice che spero di riuscire a gestire in tempo utile.
Ciao e grazie ancora per il tuo, di tempo.