- Home
- Categorie
- Coding e Sistemistica
- HTML e CSS
- tab con linguette
-
tab con linguette
Buongiorno a tutti,
volevo modificare le linguette di tab ottenute con effetti border con altre ottenute con immagini di background. Siccome mi interessa che si adatti come larghezza alle dimensioni del testo ho utilizzato tre immagini di background, una a sinistra (sul tag h1 posizionata a top left) una a destra (posizionata su un tag span interno ad h1 con top right, ed una centrale (posizionata su un tag span ancora più interno, che contiene il testo, ripetutata orizzontalemente da sx a dx in posizione top).
Il mio problema è che non ho risultati identici sui vari browser.
Firefox lo visualizza come io desidero.
Opera e Internet Explorer appiano con le immagini sfalsate.
Qualcuno può suggerirmi un metodo per ottenere quello che desidero ?
[php]
<html>
<head>
<style type="text/css">
/<![CDATA[/
//
/* div con linguetta */
//
h1.linguetta {
margin : 25px 0 0 10px;
font-size:small;
background: transparent url('/gif/tab_left.png') no-repeat top left;
padding:8px 1px 0 0;
}
h1.linguetta .right {
background: transparent url('/gif/tab_right.png') no-repeat top right;
padding:8px 1px 0 0;
}
h1.linguetta .center {
margin:0 15px;
background: transparent url('/gif/tab_center.png') repeat left top;
padding:8px 1px 0 0;
text-align:center;
}
div.tab_testo {
padding:10px 10px;
margin:0 5px;
background-color:#f8a3a3;
}
/]]>/
</style>
<title>Prova linguetta</title>
</head>
<body>
<h1 class="linguetta">
<span class="right">
<span class="center">
Canto primo
</span>
</span>
</h1>
<div class="tab_testo">
Nel mezzo del cammin di nostra vita mi ritrovai in una selva oscura
</div>
</body>
</html>
[/php]Il link di prova e su mondobimbi.com/test
ciao
sergio
-
Di solito quel tipo di problemi sono dati dall'attributo padding che ff e ie gestiscono in maniera diversa...
-
Dimenticavo...IE6 non gestisce la trasparenza dei png!