ok, forse sono stato poco chiaro...
ho eliminato i contenuti solo per ridurre il testo all'interno del messaggio con cui ho aperto il thread...
facevo riferimento all'articolo css crossbrowser (che tra l'altro riporta l'esempio "@import url") perchè sembra dire che sia sufficiente inserire questo scriptperchè tutto funzioni a meraviglia, ed accomuna con else if (document.getElementById) le versioni più recenti dei principali browsers... (Netscape 6.x, Explorer 5 e 6, Opera 5 e 6, Mozilla)<SCRIPT language="JavaScript">
<!--
if (document.layers){ //Netscape 4.x
document.write("<link rel='stylesheet' href='stile_netscape4.css' type='text/css'>");
}
else if (document.all && !document.getElementById) { // solo Explorer 4
document.write("<link rel='stylesheet' href='stile_explorer4.css' type='text/css'>");
}
else if (document.getElementById){ //Netscape 6.x, Explorer 5 e 6, Opera 5 e 6, Mozilla
document.write("<link rel='stylesheet' href='stile_dom.css' type='text/css'>");
}
//-->
</SCRIPT>
sembrerebbe che con un unico foglio di stile (nell'esempio stile_dom.css) si possano risolvere tutti i problemi di incompatibilità...
il codice che ho passato ci dice che ciò è vero a patto che poi si intervenga all'interno del css con trucchi vari, @import url, tantek celik, ecc...VVoVe:
ora, questo è il mio codice completo di contenuti:
html
css (style.css)<head><title>testo</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<SCRIPT language="JavaScript">
<!--
if (document.layers){ //Netscape 4.x
document.write("<link rel='stylesheet' href='stileN4.css' type='text/css'>");
}
else if (document.all && !document.getElementById) { // solo Explorer 4
document.write("<link rel='stylesheet' href='stileIE4.css' type='text/css'>");
}
else if (document.getElementById){ //Netscape 6.x, Explorer 5 e 6, Opera 5 e 6, Mozilla
document.write("<link rel='stylesheet' href='style.css' title="blue" type='text/css'>");
}
//-->
</SCRIPT>
<link rel="alternate stylesheet" type="text/css" title="blue" href="style.css">
<link rel="alternate stylesheet" type="text/css" title="brown" href="style2.css">
<link rel="alternate stylesheet" type="text/css" title="text" href="style3.css">
<script type="text/javascript" src="styleswitcher.js"></script>
</head>
<body>
<div id="testata">
scegli uno stile
[img]blue.gif[/img][img]brown.gif[/img][img]text.gif[/img]</p></div>
<div id="main">
...........
testo allineato bottom right
</p></div>
<div id="image">
... testo,
testo.</p></div>
<div id="menu"><div class="link">
testo testo testo testo testo testo testo</p></div></div></body></html>
body {
margin:0px;
font:11px verdana, arial, helvetica, sans-serif;
line-height:18px;
color:#0000FF;
background-color:#00FF00;
height: 100%;
}
#testata {
margin:0px 230px 0px 0px;
padding: 0px 10px 0px 10px;
border-right:1px solid #0000FF;
background-color:#0000FF;
background-image:url(studiot.gif);
background-repeat:no-repeat;
background-position:top left;
overflow: auto;
scrollbar-face-color: #0000FF;
scrollbar-highlight-color: #FF0000;
scrollbar-shadow-color: #12124B;
scrollbar-3dlight-color: #0000FF;
scrollbar-arrow-color: #FF0000;
scrollbar-track-color: #FF0000;
scrollbar-darkshadow-color: #12124B;
scrollbar-base-color: #0000FF;
height:10%;
}
#testata p {
font-size:9px;
text-align:right;
line-height:26px;
color:#FF0000;
}
#main {
margin:0px 230px 0px 0px;
padding: 10px 20px 0px 40px;
border-right:1px solid #0000FF;
text-align:right;
overflow: auto;
scrollbar-face-color: #FF0000;
scrollbar-highlight-color: #00FF00;
scrollbar-shadow-color: #4D4DD5;
scrollbar-3dlight-color: #FF0000;
scrollbar-arrow-color: #00FF00;
scrollbar-track-color: #00FF00;
scrollbar-darkshadow-color: #4D4DD5;
scrollbar-base-color: #FF0000;
height:60%;
position:relative;
}
#main p {position:absolute;
bottom:10px;
right:20px;
}
#main span {
font:9px verdana, arial, helvetica, sans-serif;
right:20px;
}
#image {
position:absolute;
top:0px;
right:0px;
width:230px;
height:70%;
padding: 10px 0px 0px 0px;
background-image:url(rodin.jpg);
background-repeat:no-repeat;
background-position:bottom right;
voice-family: "\"}\"";
voice-family:inherit;
width:230px;
}
body>#image {width:230px;}
#image p {
position:absolute;
top:20px;
right:5px;
text-align:right;
color:#0000FF;
font-size:9px;
line-height:12px;
}
#menu {
margin:0px;
padding:10px;
border-top:1px solid #0000FF;
background-color:#FF0000;
background-image:url(studio.gif);
background-repeat:no-repeat;
background-position:center;
height:30%;
}
#menu p {
font-size:12px;
text-align:center;
color:#00FF00;
}
.link a:link {
color:#0000FF;
text-decoration:none;
}
.link a:active {
color:#0000FF;
text-decoration:none;
}
.link a:visited {
color:#0000FF;
text-decoration:none;
}
.link a:hover {
color:#FFFFFF;
text-decoration:none;
}
il risultato che vorrei ottenere è quello visibile in IE, quali correzioni vanno apportate per mozilla???
Rispondi quotando