Visualizzazione non uniforme Firefox vs. Explorer

**LimohetfielD** · 08-04-2006, 15:37

Ciao a tutti, ho un piccolo blog su blogspot (limonta.blogspot.com), ma ho notato una cosa strana.

Non so se si sia sempre verificato (con Explorer non l'avevo mai guardato prima), ma la visualizzazione con Firefox mostra il risultato che vorrei ottenere, mentre con Explorer la visualizzazione è diversa.

Ho utilizzato un template non di mia "scrittura", quindi non credo ci siano grossi errori. Qualcuno mi può indicare i motivi di questa differenza ed eventualmente come risolvere?

Grazie in anticipo.

**thomas_anderson** · 08-04-2006, 16:39

Ciao

è probabile che il CSS non sia compatibile con IE. spesso i template sono orientati verso browser che rispettano gli standard, come FF, quindi IE viene trascurato. posta il codice della parte della pagina che non va.

**LimohetfielD** · 08-04-2006, 16:55

Grazie per la risposta.

Come dicevo, usando Linux (scelta di filosofia più che di capacità informatiche personali) non ho mai avuto la curiosità di provarlo con Explorer, ma ora che sono da un amico ho notato la cosa.

Divido in due messaggi perché troppo lungo.

**LimohetfielD** · 08-04-2006, 16:55

<!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>
<title><$BlogPageTitle$></title>

<meta name="keywords" content="<$BlogTitle$>" />
<meta name="description" content="<$BlogTitle$>" />
<$BlogMetaData$>
<style type="text/css">

/*################# CHANGE THE IMAGE HERE #################*/

#header-k2{background-image: url(http://img238.imageshack.us/img238/2967/blog11nd.jpg); background-color:white}

/*################# CHANGE THE IMAGE HERE #################*/

body{font-size:62.5%;font-family:'Lucida Grande', Verdana, Arial, Sans-Serif;color:#999999;background-color:#222;text-align:center;margin:20px 0 30px;background-image: url(http://img51.imageshack.us/img51/4853/clover10af.jpg);}
#page{background:#000;text-align:left;margin:20px auto;padding:10px;position:relative;width:760px;_w idth:720px}
#header-k2{cursor:hand;cursor

ointer;padding:0;margin:0;position:relative;height :200px;background-position:center center;background-repeat:no-repeat}
.primary{width:65%;float:left;padding:20px 2% 10px;margin:0}
.secondary{font:1em/1.5em 'Lucida Grande', Verdana, Arial, Sans-Serif;padding:10px 0;margin:0 0 20px 71%;width:26%;color:#666;_margin-left:0;_margin-right:-3%;_width:28%}
.comments{text-align:left;padding:30px 0 0;position:relative}
#footer{margin:10px auto 0}
ul.menu{margin:0;padding:0;position:absolute;botto m:0;left:20px;width:90%}
ul.menu li{display:inline;margin:0}
ul.menu,ul.menu li a{padding:5px 15px 6px}
ul.menu li a{font:1em Verdana, Helvetica, Arial, Sans-Serif;color:white;margin:0}
ul.menu li a:hover{background:#222;color:#eee !important;text-decoration:none}
ul.menu li.current_page_item a,ul.menu li.current_page_item a:hover{color:#888 !important;background:black;text-decoration:none}
h1,h2,h3,h4{font-family:'Trebuchet MS', Verdana, Sans-Serif}
h1{font-size:3em;letter-spacing:-1px;padding-top:75px;margin:0 0 0 40px;font-weight:700;width:100%}
h1,h1 a,h1 a:hover,h1 a:visited,#header-k2 .description{text-decoration:none;color:black}
.primary h2{font-size:2.4em;font-weight:700;margin:0 0 10px;padding:0;letter-spacing:-1px;text-align:center;display:inline}
.secondary h2{font-size:1.5em;font-weight:400;padding:0;display:inline}
.primary h3,.primary h4{font-size:2em;font-weight:400;letter-spacing:-1px;display:inline}
.primary .aside h3{font-size:1.4em;font-weight:400}
.itemhead{margin-top:10px}
.itemtext h3{font-size:1.7em;display:block;padding:15px 0 0}
.itemtext h4{font-size:1.5em;display:block;padding:15px 0 0}
.secondary > div{margin:20px 0 0;padding:0}
.primary .metalink a,.primary .metalink a:visited,
.secondary .metalink a,.secondary .metalink a:visited,.secondary span a,.secondary span a:visited{color:#888;font-weight:400}
.primary .item .itemhead .metalink,.comments .primary .metalink{font-size:1.8em;letter-spacing:-1px;text-transform:lowercase;margin-left:15px}
.comments .primary .metalink{margin:0 15px 0 0;float:none}
.secondary div > .metalink{text-align:right}
.secondary span a{margin-left:10px}
.metalink a span{display:none}
.metalink a:hover > span{display:inline}
h2,h2 a,h2 a:visited,h3,h3 a,h3 a:visited,h4,h4 a,h4 a:visited{color:#fff}
h2,h2 a,h2 a:hover,h2 a:visited,h3,h3 a,h3 a:hover,h3 a:visited,h4,h4 a,h4 a:hover,h4 a:visited{text-decoration:none}
.metadata{display:block}
.primary .item{margin:0;padding:5px 0 15px}
.primary .item .itemtext{font:1.1em/1.5em 'Lucida Grande', Verdana, Arial, Sans-Serif;text-align:justify}
.primary .item .itemtext p,.primary .item .itemtext ul,.primary .item .itemtext ol,.primary .item .itemtext div,.primary .item .itemtext blockquote{margin:13px 0}
.comments .commentlist{margin:0;padding:20px 0 0;width:100%}
.comments .commentlist li{margin:10px 0 10px 25px;padding:10px 10px 5px;list-style:decimal}
.comments .commentlist li .commentauthor{font-size:1.5em;font-weight:700;letter-spacing:-1px}
.comments .commentlist li.authorcomment{background:#f6f7f8}
.comments form{clear:both;padding:1px 0 30px;margin:0}
input[type=text],textarea{background:#000;font:1em Verdana, Arial, Helvetica, Sans-Serif;border:1px #ccc solid;padding:3px;color:#888}
input[type=text]:focus,textarea:focus{background:#555;color:#ccc;b order-color:#555}
.comments form input[type=text]{width:45%;margin:5px 5px 1px 0}
.comments form textarea{height:250px;width:100%;padding:2px}
.comments form #submit{margin:0;float:right}
#footer p{text-align:center}
#footer a{color:#888;border-bottom:1px solid #ccc;font-weight:700}
#footer a:hover{border:none;text-decoration:none;color:#aaa}
a:hover,a:visited:hover{text-decoration:underline}
h2 a:hover,h2 span a:hover{color:#27d !important}
a{color:#27d;text-decoration:none}
.itemtext a:visited{color:#b41}
.clear{clear:both !important;margin:0 !important;padding:0 !important}
.primary img{margin-left:-5px;padding:4px;border:1px solid #ccc;max-width:100%}
.center{text-align:center}
.alignright{float:right}
.alignleft{float:left}
small{font-size:.9em;line-height:1.5em;color:#777}
blockquote{margin:20px 0;padding:0 20px 0 50px;background:url('images/quote.png') 10px top no-repeat;border:none}
hr{display:none}
.navigation{text-align:center;margin:10px 0;padding:0;width:100%}
.navigation p{margin:0;padding:0}
.navigation a{color:#999}
.itemtext ol,.itemtext ul{padding:0 0 0 35px;margin:0}
.itemtext ol li,.itemtext ul li{margin:0 0 3px;padding:0}
.secondary ul,.secondary ol,.secondary > div > div{margin:5px 0 0;padding-left:0}
.secondary ul{_margin-left:0}
.secondary ol{margin-left:15px}
.secondary ul li,.secondary ol li{margin:0;padding:1px 0}
.secondary ul li{list-style-type:none;list-style-image:none}
ol li{list-style:decimal outside}
#b-navbar{height:0;visibility:hidden;display:none}
.hide{display:none}
.show{display:inline}
.comments form .out{background:gray;border:1px solid buttonface;margin:1px;padding:0}
.comments form .over{background:white;border-top:1px solid buttonshadow;border-left:1px solid buttonshadow;border-bottom:1px solid buttonhighlight;border-right:1px solid buttonhighlight;margin:1px;padding:0}
h2{color:#63aa82}
</style>

<script type="text/javascript">

function sh (id) {

whichpost = document.getElementById(id);

if (whichpost.className=="show") {
whichpost.className="hide";
}
else {
if (whichpost.className=="hide") {
whichpost.className="show";
}
}
}

<ItemPage>
var hasChanged = 0;
var hostName = 'blogspot.com';

function setCookie (name, value, expires) {
document.cookie = name + '=' + escape(value) + '; expires=' + expires.toGMTString() + '; domain=' + hostName + '; path=/';
}

function getCookie (name) {
var key = name + '=';
var c = document.cookie;
var i = c.indexOf(key);
if (i < 0) return '';
var j = c.indexOf(';', i + key.length);
if (j < 0) j = c.length;
return unescape(c.substring(i + key.length, j));
}

function rememberMe (f) {
var now = new Date();
now.setTime(now.getTime() + 365 * 24 * 60 * 60 * 1000);
setCookie('author', f.anonName.value, now);
setCookie('site', f.anonURL.value, now);
}

function setFormValues (f) {
f.anonName.value = getCookie("author");
f.anonURL.value = getCookie("site");
}

function doLoaded () {
if (!document.frmComment) return;
setFormValues(document.frmComment);
if (document.frmComment.anonName.value)
document.frmComment.rememberInfo.checked = 1;
}
onload = doLoaded;

function escapeQuotes(text) {

text=text.replace(/'/g,"\\'");
text=text.replace(/\n/g,"\\n");
return text;
}

function insertTags(tagOpen, tagClose, sampleText) {

var txtarea = document.cFrm.postBody;
// IE
if(document.selection) {
var theSelection = document.selection.createRange().text;
if(!theSelection) { theSelection=sampleText;}
txtarea.focus();
if(theSelection.charAt(theSelection.length - 1) == " "){
theSelection = theSelection.substring(0, theSelection.length - 1);
document.selection.createRange().text = tagOpen + theSelection + tagClose + " ";
} else {
document.selection.createRange().text = tagOpen + theSelection + tagClose;
}
// Mozilla
} else if(txtarea.selectionStart || txtarea.selectionStart == '0') {
var startPos = txtarea.selectionStart;
var endPos = txtarea.selectionEnd;
var myText = (txtarea.value).substring(startPos, endPos);
if(!myText) { myText=sampleText;}
if(myText.charAt(myText.length - 1) == " "){ // exclude ending space char, if any
subst = tagOpen + myText.substring(0, (myText.length - 1)) + tagClose + " ";
} else {
subst = tagOpen + myText + tagClose;
}
txtarea.value = txtarea.value.substring(0, startPos) + subst + txtarea.value.substring(endPos, txtarea.value.length);
txtarea.focus();
var cPos=startPos+(tagOpen.length+myText.length+tagClo se.length);
txtarea.selectionStart=cPos;
txtarea.selectionEnd=cPos;
// All others
} else {
tagOpen=tagOpen.replace(/\n/g,"");
tagClose=tagClose.replace(/\n/g,"");
document.infoform.infobox.value=tagOpen+sampleText +tagClose;
txtarea.focus();
}
if (txtarea.createTextRange) txtarea.caretPos = document.selection.createRange().duplicate();
}

//Preview
function PreviewpostBody(){
if (cFrm.postBody.value=='') return;
var preview=window.open('','Preview','width=500,height =200');preview.document.open();
var text=cFrm.postBody.value;while(text.indexOf("\n") > -1)
text=text.replace("\n","
");
preview.document.write('<html><style>*{font-size:11px;font-family:Verdana,Arial,Sans-Serif}<\/style><bo'+'dy>'+text+'<\/body><\/html>');
preview.document.close();
}
</ItemPage>
</script>

</head>

<body>

<div id="page">

<div id="header-k2"></div>
<div style="text-align:right"><$BlogDescription$></div>

<hr />
<div class="primary">

<hr />

<div class="navigation">
<p class="alignleft">« Home</p>

<p class="alignright"> <span><BloggerPreviousItems><$BlogPreviousItemTitle$> »</span><span class="hide"></BloggerPreviousItems></span></p>
<div class="clear"></div>
</div>

**LimohetfielD** · 08-04-2006, 16:56

<MainOrArchivePage>
<Blogger>

<hr />

<div id="post-<$BlogItemNumber$>" class="item entry">
<div class="itemhead">
<h3><$BlogItemTitle$></h3>
<BlogItemCommentsEnabled><span class="metalink"><$BlogItemCommentCount$> <span>comments</span></span></BlogItemCommentsEnabled>

<small class="metadata">
Published <BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader> by <$BlogItemAuthor$>. <$BlogItemControl$></small>

</div>

<div class="itemtext">

<$BlogItemBody$></p>

</div>

</div>

</Blogger>
</MainOrArchivePage>

<ItemPage>
<Blogger>

<hr />

<div id="post-<$BlogItemNumber$>" class="item entry">
<div class="itemhead">
<h3><$BlogItemTitle$></h3>

<small class="metadata">
Published <BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader> by <$BlogItemAuthor$> | E-mail this post <$BlogItemControl$></small>

<div class="hide" id="sendmail">
<form id="cSend" action="http://www.blogger.com/email-post.do" method="post">
<div class="comments-open">
<h3 class="comments-open-header">E-mail this post</h3>
<div class="comments-open-content">
<input type="hidden" name="blogID" value="<$BlogID$>" />
<input type="hidden" name="postID" value="<$BlogItemNumber$>" />
<input type="hidden" name="returnTo" value="<$BlogURL$>" />
<input type="text" name="fromName" class="inputCom" id="fromName" size="20" value="Your name" onblur="if (this.value == '') {this.value = 'Your name';}" onfocus="if (this.value == 'Your name') {this.value = '';}" />
<input type="text" name="fromEmail" class="inputCom" id="fromEmail" size="20" value="Your email" onblur="if (this.value == '') {this.value = 'Your email';}" onfocus="if (this.value == 'Your email') {this.value = '';}" />
<input type="text" name="toEmail" class="inputCom" id="toEmail" size="20" value="Your friend's email" onblur="if (this.value == '') {this.value = 'Your friend\'s email';}" onfocus="if (this.value == 'Your friend\'s email') {this.value = '';}" />

<input type="text" name="messageBody" class="inputCom" size="60" id="messageBody" value="Your message here" maxlength="300" onblur="if (this.value == '') {this.value = 'Your message here';}" onfocus="if (this.value == 'Your message here') {this.value = '';}" />

<script type="text/javascript">
//<![CDATA[
var bgSended = false;
var cSend = document.getElementById('cSend');
cSend.target = 'bgSend';
if (cSend.addEventListener) {
cSend.addEventListener('submit', function(){return cSendPost()}, false);
} else {
cSend.onsubmit = function(){return cSendPost()};
}
if (document.cookie != '') {
cSend.fromName.value = document.cookie.replace(/^.*fromName=?([^;]*);?.*$/, '$1');
cSend.fromEmail.value = document.cookie.replace(/^.*fromEmail=?([^;]*);?.*$/, '$1');
}
function cSendPost() {
with (cSend) {
fromName.value = fromName.value.replace(/^\s+|\s+$/g, '');
fromEmail.value = fromEmail.value.replace(/^\s+|\s+$/g, '');
if (fromName.value == '') {
alert('Please enter your name');
fromName.focus();
return false;
}
if (fromEmail.value == '') {
alert('Please enter your email');
fromEmail.focus();
return false;
}
if (toEmail.value == '') {
alert('Please enter your friend\'s email');
toEmail.focus();
return false;
}
}
bgSended = true;
return true;
}
function bgSendLoad() {
if (bgSended == true) {
if (cSend.notforget.checked) {
var expires = new Date();
expires.setFullYear(expires.getFullYear()+1);
document.cookie = "fromName=" + unescape(cSend.fromName.value) + "; path=/" + "; expires=" + expires.toGMTString();
document.cookie = "fromEmail=" + unescape(cSend.fromEmail.value) + "; path=/" + "; expires=" + expires.toGMTString();
document.cookie = "anonName=" + unescape(cFrm.anonName.value) + "; path=/" + "; expires=" + expires.toGMTString();
document.cookie = "anonURL=" + unescape(cFrm.anonURL.value) + "; path=/" + "; expires=" + expires.toGMTString();
}
alert('Your message has been sent');
}
}
document.write('<iframe style="position:absolute;left:-9999px;top:0" name="bgSend" onload="bgSendLoad()"><\/iframe>');
//]]>
</script>

<input type="submit" class="inputCom" name="post" value="Send" />

<input type="checkbox" id="notforget" /> Remember me (?)
<p class="hide" id="explanation">

All personal information that you provide here will be governed by the Privacy Policy of Blogger.com. More...
</p>
</div>
</div>
</form>

<hr />
</div>

</div>

<div class="itemtext">

<$BlogItemBody$></p>

</div>

</div>

<BlogItemCommentsEnabled>

<hr />

<div class="comments">

<h4><a name="comments"></a><$BlogItemCommentCount$> Responses to “<$BlogItemTitle$>”</h4>

<BlogItemComments>

<li class="item">
<a name="comment-<$BlogCommentNumber$>"></a>

<span class="commentauthor" style="font-weight:bold"><$BlogCommentAuthor$></span>
<small class="commentmetadata">on <$BlogCommentDateTime$> <$BlogCommentDeleteIcon$></small>

<div class="itemtext">

<$BlogCommentBody$></p>

</div>

</BlogItemComments>

<div id="loading" style="display: none;">
Posting your comment...
</div>
<h4>Leave a Reply</h4>

<form name="cFrm" id="cFrm" action="http://www.blogger.com/login-comment.do" method="post">

<input type="hidden" name="blogID" value="<$BlogID$>"/>
<input type="hidden" name="postID" value="<$BlogItemNumber$>"/>
<input type="hidden" name="isPopup" value="false"/>
<input type="hidden" name="iden" value="Other"/>

<input type="text" name="anonName" id="author" value="" size="22" tabindex="1" />
<label for="author">Name (required)</label></p>

<input type="text" name="anonURL" id="url" value="" size="22" tabindex="2" />
<label for="url">Website</label></p>

","[/b]","")' />

","[/i]","")' />

","</a>","")} else {}' /> <span id="bold" class="hide">Convert to bold</span><span id="italic" class="hide">Convert to italic</span><span id="link" class="hide">Convert to link</span>

<textarea name="postBody" id="comment" cols="100%" rows="6" tabindex="3"></textarea></p>

<script type="text/javascript">
//<![CDATA[
document.write('

<input type="checkbox" name="remember" id="remember" style="width:auto"> <label for="remember">Remember me<\/label><\/p>');
//]]>
</script>

<script type="text/javascript">
//<![CDATA[
var bgPosted = false;
var cFrm = document.getElementById('cFrm');
cFrm.target = 'bgpost';
cFrm.onsubmit = function(){return cFrmPost()};
if (document.cookie != '') {
cFrm.anonName.value = document.cookie.replace(/^.*anonName=?([^;]*);?.*$/, '$1');
cFrm.anonURL.value = document.cookie.replace(/^.*anonURL=?([^;]*);?.*$/, '$1');
}
cFrm.postBody.value = '';
function cFrmPost() {
with (cFrm) {
anonName.value = anonName.value.replace(/^\s+|\s+$/g, '');
anonURL.value = anonURL.value.replace(/^\s+|\s+$/g, '');
postBody.value = postBody.value.replace(/^\s+|\s+$/g, '');
if (anonName.value == '') {
alert('Please enter your name');
anonName.focus();
return false;
}
if (postBody.value == '') {
alert('Please enter a comment');
postBody.focus();
return false;
}
anonURL.value = anonURL.value.replace(/^http:\/\//g, '');
}
bgPosted = true;
document.cFrm.post.disabled=true;document.cFrm.pos t.value="Please wait...";
return true;
}
function bgpostLoad() {
if (bgPosted == true) {
if (cFrm.remember.checked) {
var expires = new Date();
expires.setFullYear(expires.getFullYear()+1);
document.cookie = "anonName=" + unescape(cFrm.anonName.value) + "; path=/" + "; expires=" + expires.toGMTString();
document.cookie = "anonURL=" + unescape(cFrm.anonURL.value) + "; path=/" + "; expires=" + expires.toGMTString();
document.cookie = "fromName=" + unescape(cSend.fromName.value) + "; path=/" + "; expires=" + expires.toGMTString();
document.cookie = "fromEmail=" + unescape(cSend.fromEmail.value) + "; path=/" + "; expires=" + expires.toGMTString();
}
window.location.reload();
}
}
document.write('<iframe style="position:absolute;left:-9999px;top:0" name="bgpost" onload="bgpostLoad()"><\/iframe>');
//]]>
</script>

<p style="text-align:right">

<input type="button" value="Preview" onclick="javascript:PreviewpostBody()" tabindex="4" /> <input style="font-weight:bold" type="submit" name="post" value="Post" id="FinalPublish" tabindex="5" />

<br class="clear" />
</p>

</form>

</div>

</BlogItemCommentsEnabled>

</Blogger>
</ItemPage>

</div>

<hr />

<div class="secondary">

<div>
<h2>Chi sono</h2>

<ul>
[*]I'm <$BlogOwnerNickname$>
[*]From <$BlogOwnerLocation$>
[*]<$BlogOwnerAboutMe$>

[*]Profilo[/list]
</div>

<div>
<MainOrArchivePage>
<h2>Ultimi post</h2>
<ul>
<BloggerPreviousItems>[*]<$BlogPreviousItemTitle$></BloggerPreviousItems>
[/list]
</MainOrArchivePage>

<ItemPage>
<h2>Previous posts</h2>
<ul class="module-list">
<BloggerPreviousItems>[*]<$BlogPreviousItemTitle$></BloggerPreviousItems>
[/list]
</ItemPage>
</div>

<div>
<h2>Archivio</h2>
<ul>
<BloggerArchives>[*]<$BlogArchiveName$>
</BloggerArchives>
[/list]
</div>

<div>
<h2>Segnalo</h2>
<ul>

[*]Beppe Grillo[*]Macchianera Blog[*]Corriere della Sera

[/list]

ATOM 0.3
</div>

**LimohetfielD** · 08-04-2006, 16:56

</A>
</noscript>

<div>
<h2>Sul comodino:</h2>

<ul>
<li color=#999999>Matthew Pearl, 2003, Il "Circolo Dante"
[/list]
</div>

<div>
<h2>In diffusione:</h2>

<ul>
<li color=#999999>Fear Factory, 2001, Digimortal
[/list]
</div>

<div>
<h2>Sullo schermo:</h2>

<ul>
<li color=#999999>Andrew Niccol, 1997, Gattaca
[/list]
</div>

</div> <br class="clear" />

</div>

<hr />

<p id="footer">
Powered by Blogger and Blogger Templates
</p>

</body>
</html>

**LimohetfielD** · 09-04-2006, 03:03

Risolto!

Il problema stava nell'html di alcuni post: si erano aperti decine di tag inutilmente (e da soli).

Grazie.

Discussione: Visualizzazione non uniforme Firefox vs. Explorer

Strumenti discussione

Ricerca discussione

Visualizza

Visualizzazione non uniforme Firefox vs. Explorer

1^ parte del codice

2^ parte del codice

3^ parte del codice

Permessi di invio