What am I doing wrong?

JackAbsinth · Joined: 25 Sep 2008 Posts: 7

I'm horrible at coding, but I got my site looking just how I want it in IE, but it seems like it is broken in every other browser, it seems to be missing a chunk of code. Can anyone please try to help?

here is the code...
<!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" dir="<$BlogLanguageDirection$>">
<head><$BlogMetaData$><style type="text/css">
/*
-----------------------------------------------------
Blogger Template Style Sheet
Name: Wedding Book Scribe
Designer: Gabe Clogston
URL: gabeclogston.com
------------------------------------------------------ */
/* Defaults
----------------------------------------------- */
body {
margin:0;
padding:0;
font-family: Georgia, Times, Times New Roman, sans-serif;
font-size: small;
text-align:center;
color:#000000;
line-height:1.3;
background:#d8d8d8 url("http://www.gabeclogston.com/grafix/body_bg.gif") repeat;
}

blockquote {
font-style:italic;
padding:0 32px;
line-height:1.6;
margin:0 0 .6em 0;
}

p {margin:0;padding:0};

abbr, acronym {
cursor:help;
font-style:normal;
}

code {font:12px monospace;white-space:normal;color:#666;}

hr {display:none;}

img {border:0;}

/* Link styles */
a:link {color:#473624;text-decoration:underline;}
a:visited {color:#716E6C;text-decoration:underline;}
a:hover {color:#956839;text-decoration:underline;}
a:active {color:#956839;}

/* Layout
----------------------------------------------- */
@media all {

#wrap {
background-color:#5c0714;
border-left:1px solid #000000;
border-right:1px solid #000000;
width:850px;
height:auto;
margin:0 auto;
padding:8px;
text-align:center;
}
#main-top {
width:850px;
height:449px;
background:#FFFFFF url("http://www.gabeclogston.com/grafix/Header.png") no-repeat top center;
display:block;
}
#main-bot {
width:850px;
height:125px;
background:#FFFFFF url("http://www.gabeclogston.com/grafix/bg_bot.png") no-repeat top center;
margin:0;
padding:0;
display:block;
}
#main-content {
width:850px;
background:#FFFFFF url("http://www.gabeclogston.com/grafix/bg_mid.png") repeat-y;
margin:0;
text-align:left;
display:block;

}
}
@media handheld {
#wrap {
width:90%;
}
#main-top {
width:100%;
background:#d8d8d8;
}
#main-bot {
width:100%;
background:#d8d8d8;
}
#main-content {
width:100%;
background:#d8d8d8;
}
}
#inner-wrap {
padding:0 50px;
}
#blog-header {
margin-bottom:12px;
}

#blog-header h1 {
margin:0;
padding:0 0 6px 0;
font-size:225%;
font-weight:normal;
color:#000000;
}
#blog-header h1 a:link {
text-decoration:none;
}
#blog-header h1 a:visited {
text-decoration:none;
}
#blog-header h1 a:hover {
border:0;
text-decoration:none;
}
#blog-header p {
margin:0;
padding:0;
font-style:italic;
font-size:94%;
line-height:1.5em;
}
@media all {
#main {
width:640px;
float:right;
padding:8px 0;
margin-right:10px;
}
#sidebar {
width:150px;
float:left;
padding:8px 0;
margin:0;
}
}
@media handheld {
#main {
width:100%;
float:none;
}
#sidebar {
width:100%;
float:none;
}
}
#footer p {
line-height:1.5em;
font-family:Verdana, sans-serif;
font-size:75%;
}

/* Typography :: Main entry
----------------------------------------------- */
h2.date-header {
font-weight:normal;
text-transform:uppercase;
letter-spacing:.1em;
font-size:90%;
margin:0;
padding:0;
}
.post {
margin:8px 0 24px 0;
line-height:1.5em;
}
h3.post-title {
font-weight:normal;
font-size:140%;
color:#5c0714;
margin:0;
padding:0;
}
.post-body p {
margin:0 0 .6em 0;
}
.post-footer {
font-family:Verdana, sans-serif;
color:#000000;
font-size:74%;
border-top:1px solid #d8d8d8;
padding-top:6px;
}
.post ul {
margin:0;
padding:0;
}
.post li {
line-height:1.5em;
list-style:none;
background:url("http://www.blogblog.com/scribe/list_icon.gif") no-repeat 0px .3em;
vertical-align:top;
padding: 0 0 .6em 17px;
margin:0;
}

/* Typography :: Sidebar
----------------------------------------------- */
h2.sidebar-title {
font-weight:normal;
font-size:120%;
margin:0;
padding:0;
color:#5c0714;
}
h2.sidebar-title img {
margin-bottom:-4px;
}
#sidebar ul {
font-family:Verdana, sans-serif;
font-size:86%;
margin:6px 0 12px 0;
padding:0;
}
#sidebar ul li {
list-style: none;
padding-bottom:6px;
margin:0;
}
#sidebar p {
font-family:Verdana,sans-serif;
font-size:86%;
margin:0 0 .6em 0;
}

/* Comments
----------------------------------------------- */
#comments {}
#comments h4 {
font-weight:normal;
font-size:120%;
color:#dddddd;
margin:0;
padding:0;
}
#comments-block {
line-height:1.5em;
}
.comment-poster {
background:url("http://www.blogblog.com/scribe/list_icon.gif") no-repeat 2px .35em;
margin:.5em 0 0;
padding:0 0 0 20px;
font-weight:bold;
}
.comment-body {
margin:0;
padding:0 0 0 20px;
}
.comment-body p {
font-size:100%;
margin:0 0 .2em 0;
}
.comment-timestamp {
font-family:Verdana, sans-serif;
color:#dddddd;
font-size:74%;
margin:0 0 10px;
padding:0 0 .75em 20px;
}
.comment-timestamp a:link {
color:#dddddd;
text-decoration:underline;
}
.comment-timestamp a:visited {
color:#dddddd;
text-decoration:underline;
}
.comment-timestamp a:hover {
color:#dddddd;
text-decoration:underline;
}
.comment-timestamp a:active {
color:#dddddd;
text-decoration:none;
}
.deleted-comment {
font-style:italic;
color:gray;
}
.paging-control-container {
float: right;
margin: 0px 6px 0px 0px;
font-size: 80%;
}
.unneeded-paging-control {
visibility: hidden;
}

/* Profile
----------------------------------------------- */
.profile-datablock {
margin:0 0 4px 0;
}
.profile-data {
display:inline;
margin:0;
padding:0 8px 0 0;
text-transform:uppercase;
letter-spacing:.1em;
font-size:90%;
color:#000000;
}
.profile-img {display:inline;}
.profile-img img {
float:left;
margin:0 8px 0 0;
border:1px solid #d8d8d8;
padding:2px;
}
.profile-textblock {
font-family:Verdana, sans-serif;font-size:86%;margin:0;padding:0;
}
.profile-link {
margin-top:5px;
font-family:Verdana,sans-serif;
font-size:86%;
}

/* Post photos
----------------------------------------------- */
img.post-photo {
border:1px solid #d8d8d8;
padding:4px;
}

/* Feeds
----------------------------------------------- */
#blogfeeds {
}
#postfeeds {
padding:0 0 12px 20px;
}
</style>

</head>

<body>


<div id="wrap">


<div id="main-top"></div>


<div id="main-content">

<div id="inner-wrap">


<div id="blog-header">
<h1><ItemPage><a href="<$BlogURL$>"></ItemPage>
<ItemPage></a></ItemPage></h1>
<p><$BlogDescription$></p>

</div>



<div id="sidebar">
<MainOrArchiveOrItemPage>
<h2 class="sidebar-title">Contents</h2>
<ul>
<li><a href="http://www.clogstondupreewedding.com">Home</a></li>
<li><a href="http://www.clogstondupreewedding.com/2008/09/our-story.html">Our Story</a></li>
<li><a href="http://www.clogstondupreewedding.com/2008/08/our-wedding.html">Our Wedding</a></li>
<li><a href="http://www.clogstondupreewedding.com/2008/08/our-honeymoon.html">Our Honeymoon</a></li>
<li><a href="http://www.clogstondupreewedding.com/2008/08/our-registry.html">Our Registry</a></li>
<li><a href="http://clogstondupreewedding.com/photo/main.php" target="_blank">Photo Albumn</a></li>
<li><a href="http://www.ultraguest.com/view/1221862960">Guestbook</a></li>
</ul>
</MainOrArchiveOrItemPage>

<MainOrArchiveOrItemPage>
<h2 class="sidebar-title">Links</h2>
<ul>
<li><a href="http://www.dessy.com/">Dessy Group</a></li>
</ul>
</MainOrArchiveOrItemPage>

<MainOrArchiveOrItemPage>
<h2 class="sidebar-title">Contact Us</h2>
<ul>
<li><a href="mailto:gabeatgabeclogston.com">Email Gabe</a></li>
<li><a href="mailto:karendupreeatyahoo.com">Email Karen</a></li>
</ul>
</MainOrArchiveOrItemPage>
<MainOrArchivePage>

<h2 class="sidebar-title">Archive</h2>
<ul class="archive-list">
<BloggerArchives>
<li><a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a></li>
</BloggerArchives>

</ul>
</MainOrArchivePage>

<p><a href="http://www.blogger.com/" title="Powered by Blogger"><img src="http://buttons.blogger.com/blogger-simple-white.gif" alt="Powered by Blogger" /></a></p>
<p id="blogfeeds"><$BlogFeedsVertical$></p>



</div></div>


<div id="main">

<Blogger>

<BlogDateHeader>
<h2 class="date-header"><$BlogDateHeaderDate$></h2>
</BlogDateHeader>


<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">

<p><$BlogItemBody$></p>

</div>

<p class="post-footer"><$I18NPostedByAuthorNickname$> | <a href="<$BlogItemPermalinkUrl$>" title="permanent link"><$BlogItemDateTime$></a>
<MainOrArchivePage><BlogItemCommentsEnabled> |
<a class="comment-link" href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnclick$>><span style="text-transform:lowercase"><$I18NNumComments$></span></a>
</BlogItemCommentsEnabled><BlogItemBacklinksEnabled>
<a class="comment-link" href="<$BlogItemPermalinkUrl$>#links"><span style="text-transform:lowercase"><$I18NLinksToThisPost$></span></a>
</BlogItemBacklinksEnabled>
</MainOrArchivePage> <$BlogItemControl$> </p>

</div>



<ItemPage>

<div id="comments">

<BlogItemCommentsEnabled><a name="comments"></a>

<h4><$I18NNumComments$>:</h4>

<dl id="comments-block">
<$CommentPager$>
<BlogItemComments>
<dt class="comment-poster" id="<$BlogCommentAnchorName$>"><a name="<$BlogCommentAnchorName$>"></a>
<$I18NCommentAuthorSaid$>
</dt>
<dd class="comment-body">
<p><$BlogCommentBody$></p>
</dd>
<dd class="comment-timestamp"><a href="<$BlogCommentPermalinkURL$>" title="comment permalink"><$BlogCommentDateTime$></a>
<$BlogCommentDeleteIcon$>
</dd>
</BlogItemComments>
<$CommentPager$>
</dl>

<p class="comment-timestamp">
<$BlogItemCreate$>
</p>
<p id="postfeeds"><$BlogItemFeedLinks$></p>
</BlogItemCommentsEnabled>
<BlogItemBacklinksEnabled>
<a name="links"></a><h4><$I18NLinksToThisPost$>:</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><$I18NPostedByBacklinkAuthor$> @ <$BlogBacklinkDateTime$></em>
</span>
</dd>
</BlogItemBacklinks>
</dl>
<p class="comment-timestamp"><$BlogItemBacklinkCreate$></p>
</BlogItemBacklinksEnabled>

<p class="comment-timestamp">
<a href="<$BlogURL$>"><< <$I18NHome$></a>
</p>
</div>

</ItemPage>


</Blogger>
</div>



<div id="main-bot">

</div></div>
</div></div>

</body>

</html>

PayneLess Designs · Joined: 28 Feb 2007 Posts: 1391 Location: Biloxi, MS

Missing character encoding meta tag and you have about 43 Errors, 46 warning(s) to correct. Some reported errors will be reduced after making corrections because of the cascading effect. Being a blog, I imagine a lot of the errors are flagged by validator and can be ignored. A link to actual site would be nice.

JackAbsinth · Joined: 25 Sep 2008 Posts: 7

The site address is www.clogstondupreewedding.com

Like I said, I'm horrible at any coding other than basic html, but the site does display perfectly in IE7. In Firefox and Safari however the it's a different story. The header image, middle background image, and the footer image are all supposed to be surrounded by a red border, but instead the header and footer are surounded by the border and the middle content image doesn't display at all.

PayneLess Designs · Joined: 28 Feb 2007 Posts: 1391 Location: Biloxi, MS

Would like to finish helping you with this, but you need to help me by correcting all the HTML coding errors first. Will help you through this one by one if you don't know what to do, but I can't do all the work for you.

JackAbsinth · Joined: 25 Sep 2008 Posts: 7

I've looked through the errors and I don't see a single error which I can fix, more than half of them are in the blogger code which I don't even have a place to edit, then the rest are in code that if I change it, the content won't display.

Thank you for your time, but I guess I'm just going to leave things how they are.

PayneLess Designs · Joined: 28 Feb 2007 Posts: 1391 Location: Biloxi, MS

Then at least change your DocType to:

PayneLess Designs · Joined: 28 Feb 2007 Posts: 1391 Location: Biloxi, MS

Try adding overflow: auto; to both #main-content and #wrap styling.

JackAbsinth · Joined: 25 Sep 2008 Posts: 7

Well, we have made progress...

I tried switching the DocType but that seemed to just create more errors. I added "overflow: auto" and that got me going in the right direction. It seems the only real issue now is that the bottom image isn't displaying on the bottom for some reason. I keep looking through the code trying to find something that might cause it and nothing is standing out to me, and I can't think of a tag that will tell it to dock at the bottom.

PayneLess Designs · Joined: 28 Feb 2007 Posts: 1391 Location: Biloxi, MS

Still need to clean up the code if you can. Code like this is not allowed:

JackAbsinth · Joined: 25 Sep 2008 Posts: 7

I understand your frustration, buy neither of those pieces of code you just pointed out are in the code that I can edit. If you look at the code I posted in my first post that is the only stuff I can edit, basically I can only edit the appearance, the actual coding and structure, as bad as it is, is the blogger code. All the errors are in it, it is all things I have no control over. Honestly I wouldn't be using blogger if I had know this ahead of time, but I just wanted a simple solution to accomplish what I needed. And now I have too much time invested to start over, besides that site really just needs to last me untill my wedding, after that it won't have much purpose. Till then, I just wanted it to look nice, I guess I got over ambitious.

JackAbsinth · Joined: 25 Sep 2008 Posts: 7

Thank you again for bothering to try and help me.

PayneLess Designs · Joined: 28 Feb 2007 Posts: 1391 Location: Biloxi, MS

OK. My solutions are not going to work very well since you can only edit the "presentation" part and not the actual source code.

IE is such a very sloppy browser where parsing code is concern. That's why everyone loves it so and it seems to get it right, but doesn't actually. Firefox is trying to parse to its web standards which is much, much higher than IE's and will not accept sloppy code.

I could redo the page for you, but that wouldn't do since the blogger editor wouldn't accept it. I guess you can't even edit the CSS files?????

JackAbsinth · Joined: 25 Sep 2008 Posts: 7

Nope, I can't.

There may be nothing left that you can help me with, thats fine, you've helped more than I expected anyone would.

Thank you very much.

PayneLess Designs · Joined: 28 Feb 2007 Posts: 1391 Location: Biloxi, MS

Real sorry to hear you can't edit any code. The best solution I can think of is to transition your pages to a free hosting site that uses a standard visual/source code editor. Your time limit may prevent this method.