Blog vises fint i Firefox men i IE: kaos. Java script årsag?
Hej,Det her er egentlig ikke mit problem, men da jeg gerne vil lære lidt om css og javascript og alligevel har forsøgt at bryde hovedet med det vil jeg gerne have en forklaring.
Det er denne her blog: http://interfusion.blogspot.com/
Firefox viser den som den skal se ud, med header øverst og rigtige proportioner. I IE ser den derimod kaotisk ud: Headeren er trukket ind bag ved posterne og sidebaren, eller ses som en ramme omkring disse.
Der er indsat et javascript der gør at baggrundsbilledet i headeren skifter, og det er scriptet der er noget uldent ved (går jeg ud fra). Templaten' en grundlæggende en standard Minima template. Standarddelen ser helt almindelig ud, jeg kan ikke se nogen knækkede tags eller proportioner der ikke passer sammen etc.
Men så er der de her java scripts, og det har jeg ingen forstand på. En wx validering af xhtml har fundet 107 fejl (ejeren af bloggen siger 89). De går primært på scripts' ene.
... Er det noget med at det ikke må være "strict" dokument når der er java script i, eller...???
Jeg kopierer template' en ind herunder. Vil sætte stor pris på en god forklaring - Det er som sagt ikke min blog men jeg har som sagt allerede brugt tid på at forsøge at forstå W3 validatorerns forklaringer og lege med det og er blevet stædig nu...
Ejeren af bloggen er vist også ved at rive håret ud, og I kan også svare direkte (på engelsk): <a href="http://groups.google.com/group/blogger-help-customizing/browse_frm/thread/c791d8fcd11d3ad4/8bacbae476c6a46d?q=header+firefox&rnum=1#8bacbae476c6a46d">Google</a>
Men jeg vil meget gerne høre svaret også, så skriv det meget gerne her på dansk også så...
En rigtig tidsrøver... her er template' en:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title><$BlogPageTitle$></title>
<$BlogMetaData$>
<style type="text/css">
/*
-----------------------------------------------
Blogger Template Style
Name: Minima
Designer: Douglas Bowman
URL: www.stopdesign.com
Date: 26 Feb 2004
----------------------------------------------- */
body {
background:#fff;
margin:0;
padding:40px 15px;
font:x-small Georgia,Serif;
text-align:center;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
background-image:url(http://static.flickr.com/43/104676580_b1be751924_m.jpg)
}
a:link {
color:#58a;
text-decoration:none;
}
a:visited {
color:#969;
text-decoration:none;
}
a:hover {
color:#c60;
text-decoration:underline;
}
a img {
border-width:0;
}
/* Header
----------------------------------------------- */
@media all {
#header {
width:660px;
margin:0 auto 10px;
}
}
@media handheld {
#header {
width:90%;
}
}
#blog-title {
margin:5px 5px 0;
padding:20px 20px .25em;
font-size:200%;
line-height:1.2em;
font-weight:normal;
color:#666;
text-transform:uppercase;
letter-spacing:.2em;
}
#blog-title a {
color:#666;
text-decoration:none;
}
#blog-title a:hover {
color:#c60;
}
#description {
margin:0 5px 5px;
padding:0 20px 20px;
max-width:700px;
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#999;
}
/* Content
----------------------------------------------- */
@media all {
#content {
width:660px;
margin:0 auto;
padding:0;
text-align:left;
background:#fff;
}
#main {
width:410px;
float:left;
background:#FFFFF0;
padding-left:15px
}
#sidebar {
width:220px;
float:right;
background:#FFFFF0;
padding-left:10px
}
}
@media handheld {
#content {
width:90%;
}
#main {
width:100%;
float:none;
}
#sidebar {
width:100%;
float:none;
}
}
/* Headings
----------------------------------------------- */
h2 {
margin:1.5em 0 .75em;
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#A10048;
}
/* Posts
----------------------------------------------- */
@media all {
.date-header {
margin:1.5em 0 .5em;
}
.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted #ccc;
padding-bottom:1.5em;
}
}
@media handheld {
.date-header {
padding:0 1.5em 0 1.5em;
}
.post {
padding:0 1.5em 0 1.5em;
}
}
.post-title {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:#A10048;
}
.post-title a, .post-title a:visited, .post-title strong {
display:block;
text-decoration:none;
color:#c60;
font-weight:normal;
}
.post-title strong, .post-title a:hover {
color:#333;
}
.post div {
margin:0 0 .75em;
line-height:1.6em;
}
p.post-footer {
margin:-.25em 0 0;
color:#ccc;
}
.post-footer em, .comment-link {
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.1em;
}
.post-footer em {
font-style:normal;
color:#999;
margin-right:.6em;
}
.comment-link {
margin-left:.6em;
}
.post img {
padding:4px;
border:1px solid #ddd;
}
.post blockquote {
margin:1em 20px;
}
.post blockquote p {
margin:.75em 0;
}
/* Comments
----------------------------------------------- */
#comments h4 {
margin:1em 0;
font:bold 78%/1.6em "Trebuchet
MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#999;
}
#comments h4 strong {
font-size:130%;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block dt {
margin:.5em 0;
}
#comments-block dd {
margin:.25em 0 0;
}
#comments-block dd.comment-timestamp {
margin:-.25em 0 2em;
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block dd p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}
/* Sidebar Content
----------------------------------------------- */
#sidebar ul {
margin:0 0 1.5em;
padding:0 0 1.5em;
border-bottom:1px dotted #ccc;
list-style:none;
}
#sidebar li {
margin:0;
padding:0 0 .25em 15px;
text-indent:-15px;
line-height:1.5em;
}
#sidebar p {
color:#666;
line-height:1.5em;
}
/* Profile
----------------------------------------------- */
#profile-container {
margin:0 0 1.5em;
border-bottom:1px dotted #ccc;
padding-bottom:1.5em;
}
.profile-datablock {
margin:.5em 0 .5em;
}
.profile-img {
display:inline;
}
.profile-img img {
float:left;
padding:4px;
border:1px solid #ddd;
margin:0 8px 3px 0;
}
.profile-data {
margin:0;
font:bold 78%/1.6em "Trebuchet
MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.1em;
}
.profile-data strong {
display:none;
}
.profile-textblock {
margin:0 0 .5em;
}
.profile-link {
margin:0;
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.1em;
}
/* Footer
----------------------------------------------- */
#footer {
width:660px;
clear:both;
margin:0 auto;
}
#footer hr {
display:none;
}
#footer p {
margin:0;
padding-top:15px;
font:78%/1.6em "Trebuchet MS",Trebuchet,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.1em;
}
</style>
<script language="javascript">
// drawPercentBar()
// Written by Matthew Harvey (matt AT unlikelywords DOT com)
// (http://www.unlikelywords.com/html-morsels/)
// Distributed under the Creative Commons
// "Attribution-NonCommercial-ShareAlike 2.0" License
// (http://creativecommons.org/licenses/by-nc-sa/2.0/)
function drawPercentBar(width, percent, color, background)
{
var pixels = width * (percent / 100);
if (!background) { background = "none"; }
document.write("<div style=\"position: relative; line-height: 1em;
background-color: "
+ background + "; border: 1px solid black; width: "
+ width + "px\">");
document.write("<div style=\"height: 1.5em; width: " + pixels +
"px; background-color: "
+ color + ";\"></div>");
document.write("<div style=\"position: absolute; text-align:
center; padding-top: .25em; width: "
+ width + "px; top: 0; left: 0\">" + percent +
"%</div>");
document.write("</div>");
}
</script>
</head>
<script type="text/javascript" language="JavaScript">
<!-- Copyright 2002 Bontrager Connection, LLC
//
// Type the number of images you are rotating.
NumberOfImagesToRotate = 7;
// Specify the first and last part of the image tag.
FirstPart =
'http://img.photobucket.com/albums/f400/midnightandoreo/tester';
LastPart = '.jpg';
function printImage() {
var r = Math.ceil(Math.random() * NumberOfImagesToRotate);
document.getElementById("header").style.backgroundImage =
'url('+FirstPart + r + LastPart +')';
}
//-->
</script>
<body>
<div id="header">
<h1 id="blog-title">
<div id="header"><script type="text/javascript"
language="JavaScript"><!--
printImage();
//--></script><div>
</h1>
<p id="description"><$BlogDescription$></p>
</div>
<!-- Begin #content -->
<div id="content">
<!-- Begin #main -->
<div id="main"><div id="main2">
<Blogger>
<BlogDateHeader>
<h2 class="date-header"><$BlogDateHeaderDate$></h2>
</BlogDateHeader>
<!-- Begin .post -->
<div class="post"><a name="<$BlogItemNumber$>"></a>
<BlogItemTitle>
<h3 class="post-title">
<BlogItemUrl><a href="<$BlogItemUrl$>" title="external
link"></BlogItemUrl>
<$BlogItemTitle$>
<BlogItemUrl></a></BlogItemUrl>
</h3>
</BlogItemTitle>
<div class="post-body">
<div>
<$BlogItemBody$>
</div>
</div>
<p class="post-footer">
<em>posted by <$BlogItemAuthorNickname$> at <a
href="<$BlogItemPermalinkUrl$>" title="permanent
link"><$BlogItemDateTime$></a></em>
<MainOrArchivePage><BlogItemCommentsEnabled>
<a class="comment-link"
href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnclick$>><$BlogItemCo mmentCount$>
comments</a>
</BlogItemCommentsEnabled><BlogItemBacklinksEnabled>
<a class="comment-link" href="<$BlogItemPermalinkUrl$>#links">links to
this post</a>
</BlogItemBacklinksEnabled>
</MainOrArchivePage> <$BlogItemControl$>
</p>
</div>
<!-- End .post -->
<!-- Begin #comments -->
<ItemPage>
<div id="comments">
<BlogItemCommentsEnabled><a name="comments"></a>
<h4><$BlogItemCommentCount$> Comments:</h4>
<dl id="comments-block">
<BlogItemComments>
<dt class="comment-poster" id="c<$BlogCommentNumber$>"><a
name="c<$BlogCommentNumber$>"></a>
<$BlogCommentAuthor$> said...
</dt>
<dd class="comment-body">
<p><$BlogCommentBody$></p>
</dd>
<dd class="comment-timestamp"><a href="#<$BlogCommentNumber$>"
title="comment permalink"><$BlogCommentDateTime$></a>
<$BlogCommentDeleteIcon$>
</dd>
</BlogItemComments>
</dl>
<p class="comment-timestamp">
<$BlogItemCreate$>
</p>
</BlogItemCommentsEnabled>
<BlogItemBacklinksEnabled>
<a name="links"></a><h4>Links to this post:</h4>
<dl id="comments-block">
<BlogItemBacklinks>
<dt class="comment-title">
<$BlogBacklinkControl$>
<a href="<$BlogBacklinkURL$>"
rel="nofollow"><$BlogBacklinkTitle$></a> <$BlogBacklinkDeleteIcon$>
</dt>
<dd class="comment-body"><$BlogBacklinkSnippet$>
<br />
<span class="comment-poster">
<em>posted by <$BlogBacklinkAuthor$> @
<$BlogBacklinkDateTime$></em>
</span>
</dd>
</BlogItemBacklinks>
</dl>
<p class="comment-timestamp"><$BlogItemBacklinkCreate$></p>
</BlogItemBacklinksEnabled>
<p class="comment-timestamp">
<a href="<$BlogURL$>"><< Home</a>
</p>
</div>
</ItemPage>
<!-- End #comments -->
</Blogger>
</div></div>
<!-- End #main -->
<!-- Begin #sidebar -->
<div id="sidebar"><div id="sidebar2">
<!-- Begin #profile-container -->
<$BlogMemberProfile$>
<!-- End #profile -->
<MainOrArchivePage>
<h2 class="sidebar-title">Links</h2>
<ul>
<li><a href="http://youknitwhat.blogspot.com/">You Knit
What??</a></li>
<li><a href="http://annamyriah.blogspot.com/">Anna Myriah's
Log</a></li>
</ul>
</MainOrArchivePage>
<h2 class="sidebar-title">Now Playing</h2>
Perpetual Prayer Shawl
<script language="javascript">drawPercentBar(200, 65, 'pink');
</script>
Another Sparkly Scarf
<script language="javascript">drawPercentBar(200, 100, 'pink');
</script>
<h2 class="sidebar-title">Coming Attractions</h2>
<li>Not Your Standard Issue Sweatshirt</li>
<li> <a href="http://www.knitty.com/ISSUEwinter05/PATTtubey.html"target="new">Tubey</a></li>
<li> <a href="http://knitty.com/ISSUEspring05/PATTbranchingout.html"
target="new">Branching Out</a></li>
<li> <a href="http://knitty.com/ISSUEwinter04/PATTwavy.html"target="new">Wavy</a></li>
<li>Another pair of socks</li>
<h2 class="sidebar-title">Previous Posts</h2>
<ul id="recently">
<BloggerPreviousItems>
<li><a
href="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></a></li>
</BloggerPreviousItems>
</ul>
<MainOrArchivePage>
<h2 class="sidebar-title">Archives</h2>
<ul class="archive-list">
<BloggerArchives>
<li><a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a></li>
</BloggerArchives>
</ul>
</MainOrArchivePage>
<p id="powered-by"><a href="http://www.blogger.com"><img
src="http://buttons.blogger.com/bloggerbutton1.gif" alt="Powered by
Blogger" /></a></p>
<a href="http://photobucket.com/"><img
src="http://pic.photobucket.com/banners/banner1_88x31.jpg" border="0"
alt="Photobucket.com image hosting and photo sharing"></a>
<a
href="http://www.spreadfirefox.com/?q=affiliates&id=0&t=64"><img
border="0" alt="Get Firefox!" title="Get Firefox!"
src="http://sfx-images.mozilla.org/affiliates/Buttons/110x32/get.gif"/></a>
<script language="javascript">
var data, p;
var agt=navigator.userAgent.toLowerCase();
p='http';
if((location.href.substr(0,6)=='https:')||(location.href.substr(0,6)=='HTTP S:'))
{p='https';}
data = '&r=' + escape(document.referrer) + '&n=' +
escape(navigator.userAgent) + '&p=' + escape(navigator.userAgent) +
'&g=' + escape(document.location.href);
if(navigator.userAgent.substring(0,1)>'3') {data = data + '&sd=' +
screen.colorDepth + '&sw=' + escape(screen.width+
'x'+screen.height)};document.write('<a href="http://www.blogpatrol.com"
target="_blank" >');
document.write('<img border=0 hspace=0 '+'vspace=0
src="http://www.blogpatrol.com/counter.php?i=37457' + data + '">');
document.write('</a>');
</script>
<!--
<p>This is a paragraph of text that could go in the sidebar.</p>
-->
</div></div>
<!-- End #sidebar -->
</div>
<!-- End #content -->
<!-- Begin #footer -->
<div id="footer"><hr />
<p><!--This is an optional footer. If you want text here, place it
inside these tags, and remove this comment. --> </p>
</div>
<!-- End #footer -->
</body>
</html>
