[css] foglio non compatibile su IE e Mozilla

**araim** · 08-09-2009, 14.56.01

La pagina

Codice HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<LINK REL=STYLESHEET TYPE="text/css" HREF="./_tmp/style_ie.css">
<title>terre di araim</title>
</head>
<script type="text/javascript">
self.moveTo(0,0);
function() {
window.moveTo(0,0);
window.resizeTo(screen.availWidth, screen.availHeight);
}</SCRIPT>
<body onload="javascript: function();">
<div style="background-color: #F4E7B9; position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px;">
    <div id="menu"><iframe name="menu" width="100%" height="300" frameborder="0" scrolling="no" src="menu.php"></iframe></div>
    <div id="page"><iframe name="page" width="100%" height="100%" frameborder="0" scrolling="auto" src="mappa.php" ></iframe></div>
	<div id="torre"><iframe name="torre" width="280" height="300" frameborder="0" scrolling="auto" src="userlist.php" ></iframe></div>

</div>
</body>
</html>

Il foglio di stile

Codice HTML:

@charset "UTF-8";
/* CSS Document */

body { background-color: #F4E7B9; color: #000000; font-family: verdana, "Comic Sans MS", cursive; font-size: 12px; background-image:url(titolobg.png); background-position: left; background-repeat: repeat-y; }
a { text-decoration: none; color: #FFF; }
img{ border: none; }

DIV#titolo { margin: 0 auto; width: 400px; height: 20px; }

DIV#bordo { position: fixed; margin-left: 16px; float: left; width: 400px; height: auto; background-color: #600; }
DIV#bordo_destra { margin-left: 450px; margin-right: 25px; float: left; height: 650px; width: 400px; }
DIV#menu { border-bottom: 1px solid #600; width: auto; height: 25px; text-align: left; }
DIV#page { width: auto; height: 640px; text-align: justify; }
.menu { color: #000; font-size: 10px; font-weight: bold; }

DIV#pagina { width: 800px; height: 650px; text-align: justify; position: absolute; left: 400px; }

DIV#bordolog { margin: 0 auto; width: 500px; height: 400px; }
DIV#paginalog { width: 500px; height: 300px; text-align: justify; }
DIV#filletlog { margin: 0 auto; width: 500px; height: 20px; margin-top: 5px; }
DIV#userlabel { float: left; width: 150px; height: 15px; margin-bottom: 10px; text-align: right; }
DIV#passlabel { float: left; width: 150px; height: 15px; margin-bottom: 10px; text-align: right; }
DIV#userin { float: left; width: 200px; height: 15px; margin-bottom: 10px; margin-left: 5px; text-align: left; }
DIV#passin { float: left; width: 200px; height: 15px; margin-bottom: 10px; margin-left: 5px; text-align: left; }
DIV#separatorelog { height: 50px; }
DIV#bottonlog { width: 380px; height: 30px; text-align: center; margin-top: 50px; }

cosa mi consigliate di fare per evitare problemi?? oltre a creare uno stile dedicato naturalmente... che sto già preoccupandomi di fare...

in pratica una stessa pagina index.php su due browser crea il conflitto più totale, anche negli iframe...

09-09-2009, 12.16.24

Originalmente inviato da araim

La pagina

Codice HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<LINK REL=STYLESHEET TYPE="text/css" HREF="./_tmp/style_ie.css">
<title>terre di araim</title>
</head>
<script type="text/javascript">
self.moveTo(0,0);
function() {
window.moveTo(0,0);
window.resizeTo(screen.availWidth, screen.availHeight);
}</SCRIPT>
<body onload="javascript: function();">
<div style="background-color: #F4E7B9; position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px;">
    <div id="menu"><iframe name="menu" width="100%" height="300" frameborder="0" scrolling="no" src="menu.php"></iframe></div>
    <div id="page"><iframe name="page" width="100%" height="100%" frameborder="0" scrolling="auto" src="mappa.php" ></iframe></div>
	<div id="torre"><iframe name="torre" width="280" height="300" frameborder="0" scrolling="auto" src="userlist.php" ></iframe></div>

</div>
</body>
</html>

Il foglio di stile

Codice HTML:

@charset "UTF-8";
/* CSS Document */

body { background-color: #F4E7B9; color: #000000; font-family: verdana, "Comic Sans MS", cursive; font-size: 12px; background-image:url(titolobg.png); background-position: left; background-repeat: repeat-y; }
a { text-decoration: none; color: #FFF; }
img{ border: none; }

DIV#titolo { margin: 0 auto; width: 400px; height: 20px; }

DIV#bordo { position: fixed; margin-left: 16px; float: left; width: 400px; height: auto; background-color: #600; }
DIV#bordo_destra { margin-left: 450px; margin-right: 25px; float: left; height: 650px; width: 400px; }
DIV#menu { border-bottom: 1px solid #600; width: auto; height: 25px; text-align: left; }
DIV#page { width: auto; height: 640px; text-align: justify; }
.menu { color: #000; font-size: 10px; font-weight: bold; }

DIV#pagina { width: 800px; height: 650px; text-align: justify; position: absolute; left: 400px; }

DIV#bordolog { margin: 0 auto; width: 500px; height: 400px; }
DIV#paginalog { width: 500px; height: 300px; text-align: justify; }
DIV#filletlog { margin: 0 auto; width: 500px; height: 20px; margin-top: 5px; }
DIV#userlabel { float: left; width: 150px; height: 15px; margin-bottom: 10px; text-align: right; }
DIV#passlabel { float: left; width: 150px; height: 15px; margin-bottom: 10px; text-align: right; }
DIV#userin { float: left; width: 200px; height: 15px; margin-bottom: 10px; margin-left: 5px; text-align: left; }
DIV#passin { float: left; width: 200px; height: 15px; margin-bottom: 10px; margin-left: 5px; text-align: left; }
DIV#separatorelog { height: 50px; }
DIV#bottonlog { width: 380px; height: 30px; text-align: center; margin-top: 50px; }

cosa mi consigliate di fare per evitare problemi?? oltre a creare uno stile dedicato naturalmente... che sto già preoccupandomi di fare...

in pratica una stessa pagina index.php su due browser crea il conflitto più totale, anche negli iframe...

Potresti cominciare a spiegare meglio il tuo problema.

**araim** · 09-09-2009, 14.36.53

in pratica su Mozilla è perfetto, così come l'ho pensato il sito si vede,
mentre su Internet Explorer è un miracolo che si veda qualcosa ...

per provare cosa si vede basta andare su questo link e loggare con
l'account di prova una volta con IE ed una volta con MOZILLA.

09-09-2009, 15.03.47

Dovresti usare i commenti condizionali .

**araim** · 22-09-2009, 13.07.17

argh ... se vi linko il sito e date un'occhiata direttamente??
non c'è bisogno di registrarsi c'è un account di prova ...

se usate sia IE che mozilla potreste vedere da voi ...

http://terrediaraim.altervista.org/

Discussione: [css] foglio non compatibile su IE e Mozilla

LinkBack

Strumenti discussione

Display

[css] foglio non compatibile su IE e Mozilla

Regole di scrittura