Coding issue for Tumblr layout?

Asked by spacedip (1

) December 31st, 2009

Basically I strip a few premade layouts and started putting codes together. I am basically done but I still have a few issues. How could I align the sidebar and content so it would be the same, instead of the sidebar being way up. And how could I fix the bottom? And lastly I notice that my layout works on FF but not on IE, how could I make it compatible? Please and thank you.

Current layout.
http://spacedip.tumblr.com

The Code:
<!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” xml:lang=“en” lang=“en”>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8”/>
{block:Description}<meta name=“description” content=”{MetaDescription}” />{/block:Description}
<title>{Title}{block:PostSummary} – {PostSummary}{/block:PostSummary}</title>
<link rel=“icon” href=”{Favicon}”/>
<link rel=“alternate” type=“application/rss+xml” title=“RSS” href=”{RSS}”/>
<meta name=“viewport” content=“width=775”/> <!—iPhone—>
<style type=“text/css”>
body {
background-image: url(‘http://i180.photobucket.com/albums/x106/myhappyend/vintage-5.jpg’);
background-repeat:repeat;
font: 12px “Helvetica Neue”, Helvetica, Arial, sans-serif;

}

#content {
background: #fff;
margin: 0px 500px 500px 300px;
padding: 30px;
width: 390px;
}
#header {
border-bottom: 10px solid #e5e5e5;
margin: 0 0 100em 10;
padding-bottom: 1em;
}
#header #description {
font-size: 10px;
}
#header #description span {
font-family: Helvetica, Arial, sans-serif;
font-size: 100%;
}
#header #description span.and {
font-family: Baskerville, serif;
font-style: oblique;
}
a {
color: #1f1e1d;
outline: 0;
text-decoration: underline;
}
a:hover {
color: #ff0000;
}
h1 {
font-size: 30px;
margin: 1em 0 .5em 0;
}
h2 {
font-size: 18px;
font-weight: normal;
margin: .25em 0 .5em 0;
}
h2 a:hover {
color: #ff0000;
}
h1 a {
font-family: Baskerville, serif;
font-style: oblique;
text-decoration: none;
}
img {
border: 0;
}
.post {
margin-bottom: 2em;
}
.post .pf {
font-family: Lucida Grande, Verdana, sans-serif;
font-size: 11px;
margin-top: .5em;
}
.post .pf a {
color: #333;
background: #eee;
-moz-border-radius: 3px;
padding: 3px 2px 3px 2px;
text-decoration: none;
}
.post .pf a:hover {
color: #000;
}
.post .date {
margin-left: -2em;
margin-bottom: .5em;
}
.post .date:hover .day {
display: inline;
}
.post .date .day {
display: none;
}
.post .date a {
background: #fff;
color: #1f1e1d;
display: block;
font-size: 11px;
padding: 1.5px;
text-decoration: none;
}
.post .caption {
margin-top: .25em;
}
.post .quote span.quote {
font-size: 18px;
}
.post .quote .box {
font-family: Lucida Grande, Georgia, sans-serif;
}
.post .chat li {
list-style: none;
margin-left: -40px;
}
.post .chat .label {
font-family: Courier New, monospace;
}

.post .regular img {
max-width: 100%;
}

#sidebar {
float: left;
width: 230px;
background: {color:Center Background};
padding: 40px 20 20 20;
margin: 0 0px 0px 0;
}

.following{
margin-top: 5px;
margin-bottom: 5px;

}
.following a img{
border: 1px solid #222;
padding: 1px;
margin: 1px;
}
.following a img:hover{
border: 1px solid #b32600;
padding: 1px;
margin: 1px;
}
#sidebar h3 {
font-size: 17px;
text-transform: uppercase;
letter-spacing: -1px;
color: #222;
border-bottom: 6px solid #222;
padding: 0px 0px 5px 0px;
margin: 0px 0px 0px 0px;
}

#sidebar p {
padding: 0px;
}
{CustomCSS}
</style>
</head>

<body>

<!Buttons>

<!Sidebar Starts>

<!—Description—>

<h3>Spacedip, infinity & beyond</h3>

<p>{Description}</p>

<!—To add links, Just remove the ’/’ and add the URL. Then change the title.—>

<!— <h3>Links</h3>
<div class=“other_links”>
<p>
<a href=”/”>Link Name</a><br>
<a href=”/”>Link Name</a><br>
<a href=”/”>Link Name</a><br>
</p>
</div>
—>

<!—Email string- If you want to put your email address on your page, change “whoever@wherever.com” to your email address.—>
<!—<br><center>Email Me: <a href=“mailto:whoever@wherever.com”>whoever@wherever.com</a></center>—>

<br>

<!—Twitter—>

<!— <h3>Twitter</h3>

<!—Meta—>

<br>

<!—Following—>

<h3>Following</h3>
{block:Following}
<div class=“following”>
{block:Followed}
<a href=”{FollowedURL}”><img src=”{FollowedPortraitURL-40}” alt=”{FollowedURL}”/></a>
{/block:Followed}
</div>

{/block:Following}

</div>
<div id=“content”>
<div id=“header”>

</div> <!—END HEADER—>

{block:Posts}
<div class=“post”> <!—BEGIN POSTS—>

<div class=“date”>
<a href=”{Permalink}”>{DayOfWeek}, {Month} {DayOfMonth} {Year}</a>
</div>

{block:Regular}
<div class=“regular”>
{block:Title}<h2>{Title}</h2>{/block:Title}
{Body}
</div>
{/block:Regular}

{block:Photo}
<div class=“photo”>
<div class=“img”>
{LinkOpenTag}<img src=”{PhotoURL-400}” alt=”{PhotoAlt}”/>{LinkCloseTag}
</div>
{block:Caption}
<div class=“caption”>{Caption}</div>
{/block:Caption}
</div>
{/block:Photo}

{block:Quote}
<div class=“quote”>
<div class=“box”>
<span class=“quote”>{Quote}</span>
</div>
{block:Source}<div class=“caption”>{Source}</div>{/block:Source}
</div>
{/block:Quote}

{block:Link}
<div class=“link”>
<h2><a href=”{URL}” class=“link” {Target}>{Name}</a></h2>
{block:Description}
<div class=“caption”>{Description}</div>
{/block:Description}
</div>
{/block:Link}

{block:Conversation}
<div class=“chat”>
{block:Title}<h2>{Title}</h2>{/block:Title}
<ul>
{block:Lines}
<li>
{block:Label}<span class=“label”>{Label}</span>{/block:Label}
{Line}
</li>
{/block:Lines}
</ul>
</div>
{/block:Conversation}

{block:Audio}
<div class=“audio”>
{AudioPlayerWhite}
{block:Caption}
<div class=“caption”>{Caption}</div>
{/block:Caption}
</div>
{/block:Audio}

{block:Video}
<div class=“video”>
{Video-400}
{block:Caption}
<div class=“caption”>{Caption}</div>
{/block:Caption}
</div>
{/block:Video}

{block:HasTags}
<div class=“pf”>
Filed ↓ {block:Tags}<a href=”/tagged/{Tag}”>{Tag}</a> {/block:Tags}
</div>
{/block:HasTags}

</div> <!—END POSTS—>
{/block:Posts}

<div id=“footer”> <!—BEGIN FOOTER—>
{block:PreviousPage}
<a href=”{PreviousPage}”>« Previous</a>
{/block:PreviousPage}

{block:NextPage}
<a href=”{NextPage}”>Next »</a>
{/block:NextPage}
</div> <!—END FOOTER—>
</div>
</body>
</html>