Forum Moderators: not2easy
I recently finished coding my blog! It is a two column liquid layout and unfortunately it is not compatible in Internet Explorer! It looks fine in the newest versions of Firefox, Chrome and Safari, however in Internet Explorer my two background images do not stay fixed to the browser window and my right side bar does not display correctly.
Could anyone take a look at the code and see if they can find a solution?
<!--Force IE6 into quirks mode with this comment tag-->
<!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" lang="en" xml:lang="en">
<head>
<title><$BlogPageTitle$></title>
<style type="text/css">#body {
margin: 0;
padding: 0;
border: 0;
height:100%
max-height: 100%;
overflow:scroll;
}
#topcut {
width:992px;
z-index:20;
position:fixed;
top:0;
left:0;
}
#textover {z-index:22;}
#bottomcut {
z-index:21;
position:absolute;
right:0px;
bottom:0px;
}
#jbritz22 {
position:absolute;
top:60px;
left:30px;
z-index:20;
height:139px;
margin-bottom:190px;
}
#navbar-iframe {
display: none !important;
}
#framecontent{
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 75%; /*Width of frame div*/
height: 100%;
background: #eaff00;
font-family: Arial, Helvetica, sans-serif;
border: 1px solid transparent;
}
#maincontent{
position: fixed;
top: 0;
left: 75%; /*Set left value to WidthOfFrameDiv*/
right: 0;
bottom: 0;
background: #ffb702;
}
.innertube{
background: #eaff00;
margin-top:190px;
}
* html body{ /*IE6 hack*/
padding: 0 0 0 200px; /*Set value to (0 0 0 WidthOfFrameDiv)*/
}
* html #maincontent{ /*IE6 hack*/
height: 100%;
width: 100%;
}
/* Content
----------------------------------------------- */
@media all {
#content {
width:660px;
margin:0 auto;
padding:0;
text-align:left;
}
#main {
width:410px;
float:left;
}
#sidebar {
width:220px;
float:right;
}
}
@media handheld {
#content {
width:90%;
}
#main {
width:100%;
float:none;
}
#sidebar {
width:100%;
float:none;
}
}
/* Posts
----------------------------------------------- */
@media all {
.date-header {
margin:1.5em 0 .5em;
}
.post {
margin-left:80px;
border-bottom:1px dotted #FFB702;
padding-bottom:1.5em;
width:80%;
}
}
@media handheld {
.date-header {
padding:0 1.5em 0 1.5em;
}
.post {
padding:0 1.5em 0 1.5em;
}
}
.post-title {
font-family: Arial, Helvetica, sans-serif;
margin:0 0 0;
padding:0 0 0;
font-size:32pt;
font-weight:bolder;
line-height:1.4em;
color:#412010;
}
.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 {
padding-bottom:20px;
color:#677000;
font-family: Arial, Helvetica, sans-serif;
font-size:14pt;
font-weight:bold;
height:20px;
}
.post-footer em, .comment-link {
color:#677000;
font-family: Arial, Helvetica, sans-serif;
font-size:10pt;
font-weight:bold;
}
.post-footer em {
font-style:normal;
color:#999;
margin-right:.6em;
}
.comment-link {
margin-left:.6em;
}
.post img {
padding:4px;
border:0;
}
.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;
}
.paging-control-container {
float: right;
margin: 0px 6px 0px 0px;
font-size: 80%;
}
.unneeded-paging-control {
visibility: hidden;
}
/* 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;
}
#post {
font-family: arial, helvetica,sans-serif;
}
.post-date {
font-family: Arial, Helvetica, sans-serif;
font-size:12pt;
font-weight:bold;
color:#677000;
text-transform:uppercase;
}
.aboutmee {
color:#FFFFFF;
font-family:Arial,Helvetica,sans-serif;
font-size:8pt;
font-weight:normal;
margin-left:15px;
margin-top:2px;
}
a:link {color:#081230;}
a:visited {color:#412010;}
</style>
</head>
<body>
<div id="jbritz22"><img src="http://img13.imageshack.us/img13/3590/jbritz22.png"></div>
<div id="framecontent">
<div class="innertube">
<img src="http://img23.imageshack.us/img23/364/topcut.gif" id="topcut">
<blogger>
<!-- 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-date"><$BlogItemDateTime$></div>
<div class="post-body">
<div>
<$BlogItemBody$>
</div>
</div>
<p class="post-footer">
<div id="textover"> <span class="comment-link"><$I18NNumComments$></span> <a class="comment-link" href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnclick$>><span style="text-transform:lowercase">Post a Comment</span></a></div>
</p>
</div>
<!-- End .post -->
</blogger>
</div>
</div>
<div id="maincontent">
<img src="http://img707.imageshack.us/img707/8297/22025401.gif" style="margin-top:60px; margin-left:15px; padding-right:4px;"><br>
<div class="aboutmee"><$BlogOwnerAboutMe$></div>
<img src="http://img16.imageshack.us/img16/8619/blogo.gif" style="margin-top:10px; margin-left:15px;>
<div class="innertube">
<img src="http://img192.imageshack.us/img192/7443/bottomcut.gif" id="bottomcut">
<div class="aboutmee"><BloggerArchives>
<a href='<$BlogArchiveURL$>'><$BlogArchiveName$></a>
</BloggerArchives><br><br>
<img src="http://img683.imageshack.us/img683/3448/thelist.gif" style="margin-bottom:10px;"><br>
<a href="http://twitter.com/jbritz22"><img src="http://img96.imageshack.us/img96/1570/tweet.gif" border="0" style="margin-bottom:10px;"></a><br>
<a href="http://www.last.fm/user/jbritz22/charts?rangetype=3month&subtype=tracks"><img src="http://img641.imageshack.us/img641/9875/listeny.gif" border="0" style="margin-bottom:10px;"></a><br>
<a href="http://www.last.fm/user/jbritz22/?chartstyle=edwardsha"><img src="http://imagegen.last.fm/edwardsha/recenttracks/3/jbritz22.gif" border="0" /></a>
</div>
</div>
</div>
</body>
</html>
