[ Home ] - [ Articoli ] - [ Traduzioni ] - [ Altro ] - [ Appunti sui CSS ] - [ L'autore ]
Sei qui: Home > Traduzioni > direction:rtl distrugge i layout in Internet Explorer
Articolo originale: http://www.aplus.co.yu/css/directionrtl-breaks-css-layouts-in-ie/
Traduzione: Gabriele Romanato (6 gennaio 2008)
Il "divertimento" con Internet Explorer 6 non sembra mai finire, come nel caso dei recenti sforzi fatti nell'internazionalizzazione di un sito. Avevamo bisogno di creare una versione ebraica del nostro sito web principale (l'ebraico è una lingua in cui la scrittura va da destra a sinistra).
Quindi il nostro layout a tre colonne, costruito con i float, si supponeva dovesse risultare invertito. Unitamente a ciò, un gran numero di altre parti doveva essere spostato orizzontalmente (fra cui i tab variabili da me creati in precedenza). Le specifiche CSS 2.1 definiscono alcune regole per la visualizzazione da destra a sinistra. Così abbiamo usato:
body {
unicode-bidi: embed;
direction: rtl;
}
Con queste regole il layout funzionava in Firefox, ma in Internet Explorer 6 quasi tutto
collassava.
Non solo viene tutto confuso nella visualizzazione, ma quando spostate il mouse sugli elementi
questi scompaiono o vengono spostati. Sembrava che la causa fosse solo la regoladirection,
e così ho aggiunto solo questa riga al mio esempio sui tab:
#tabs {
direction: rtl;
}
Ecco lo screenshot, nel caso non possiate verificarlo in Internet Explorer.
L'Holly hack non aiuta e neppure impostare width/height o position.
Nulla funziona, le ho provate tutte. È qualcosa connesso con la proprietà float,
ma rimuovere questa regola non serve a molto.
La soluzione
consiste nel sovrascrivere direction
per i float ed applicarla solo agli elementi che contengono
effettivamente del testo:
body {
direction: rtl;
}
#tabs li {
direction: ltr;
}
#tabs a {
direction: rtl;
}
Naturalmente le ultime due righe vanno date tramite commenti condizionali, in modo da inviarle solo ad Internet Explorer. Vedrò se succede qualcos'altro durante i lavori a venire.