No replies
kory.mathis
kory.mathis's picture
Offline
newbie
Last seen: 10 years 22 weeks ago
Timezone: GMT-4
Joined: 2010-05-29
Posts: 1
Points: 2

I wasn't sure how to correctly phrase this problem in a search engine, so I will start a new thread.

I am building a site using the blogger.com framework. Site can be seen here: reallyoldairplanes.blogspot.com

The design looks great in Firefox, Chrome, and Safari for Mac, and also in Firefox for Windows. However, in IE for Windows there is an enormous space between the header and the rest of the page content. It seems that the space is equal to the height of the post column, leading me to believe that when I changed the width of the blogger layout, something isn't adding up and is causing the problem. I'm not sure how to attack it though, so that's where I need help.

Here's the template code. The major adjustments I have made are changes to the width of the template divs, and a javascript code that makes the main-wrapper and sidebar-wrapper the same height.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
  <head>
    <b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>
    <b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name:     Minima
Date:     26 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */
 
/* Variable definitions
   ====================
   <Variable name="bgcolor" description="Page Background Color"
             type="color" default="#fff" value="#fff5ee">
   <Variable name="textcolor" description="Text Color"
             type="color" default="#333" value="#4c4c4c">
   <Variable name="linkcolor" description="Link Color"
             type="color" default="#58a" value="#aa5557">
   <Variable name="pagetitlecolor" description="Blog Title Color"
             type="color" default="#666" value="#666666">
   <Variable name="descriptioncolor" description="Blog Description Color"
             type="color" default="#999" value="#999999">
   <Variable name="titlecolor" description="Post Title Color"
             type="color" default="#c60" value="#aa5557">
   <Variable name="bordercolor" description="Border Color"
             type="color" default="#ccc" value="#999999">
   <Variable name="sidebarcolor" description="Sidebar Title Color"
             type="color" default="#999" value="#999999">
   <Variable name="sidebartextcolor" description="Sidebar Text Color"
             type="color" default="#666" value="#4c4c4c">
   <Variable name="visitedlinkcolor" description="Visited Link Color"
             type="color" default="#999" value="#aa5557">
   <Variable name="bodyfont" description="Text Font"
             type="font" default="normal normal 100% Georgia, Serif" value="normal normal 110% Times, serif">
   <Variable name="headerfont" description="Sidebar Title Font"
             type="font"
             default="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif">
   <Variable name="pagetitlefont" description="Blog Title Font"
             type="font"
             default="normal normal 200% Georgia, Serif" value="normal normal 200% Georgia, Serif">
   <Variable name="descriptionfont" description="Blog Description Font"
             type="font"
             default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
   <Variable name="postfooterfont" description="Post Footer Font"
             type="font"
             default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
   <Variable name="startSide" description="Side where text starts in blog language"
             type="automatic" default="left" value="left">
   <Variable name="endSide" description="Side where text ends in blog language"
             type="automatic" default="right" value="right">
*/
 
/* Use this with templates/template-twocol.html */
 
body {
  background:$bgcolor;
  margin:0;
  color:$textcolor;
  font:x-small Georgia Serif;
  font-size/* */:/**/small;
  font-size: /**/small;
  text-align: center;
  }
a:link {
  color:$linkcolor;
  text-decoration:none;
  }
a:visited {
  color:$visitedlinkcolor;
  text-decoration:none;
  }
a:hover {
  color:$textcolor;
  text-decoration:underline;
}
a img {
  border-width:0;
  }
 
#navbar {
display:none
}
 
/* Header
-----------------------------------------------
 */
 
#header-wrapper {
  background:$bgcolor;
  width:800px;
  margin:0 auto 10px;
 margin-bottom:0px;
 margin-top:10px;
  }
 
#header-inner {
  background-position: center;
  margin-left: auto;
  margin-right: auto;
}
 
#header { 
  margin: 0px;
  text-align: center;
  color:$pagetitlecolor;
}
 
#header h1 {
  margin:5px 5px 0;
  padding:15px 20px .25em;
  line-height:1.2em;
  text-transform:uppercase;
  letter-spacing:.2em;
  font: $pagetitlefont;
}
 
#header a {
  color:$pagetitlecolor;
  text-decoration:none;
  }
 
#header a:hover {
  color:$pagetitlecolor;
  }
 
#header .description {
  margin:0 5px 5px;
  padding:0 20px 15px;
  max-width:700px;
  text-transform:uppercase;
  letter-spacing:.2em;
  line-height: 1.4em;
  font: $descriptionfont;
  color: $descriptioncolor;
 }
 
#header img {
  margin-$startSide: auto;
  margin-$endSide: auto;
}
 
 
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
  width: 800px;
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
  }
 
#main-wrapper {
  padding:3px;
  background-color:#fbfbfb;
  width: 550px;
  float: $startSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }
 
#sidebar-wrapper {
  padding:5px;
  background-color:#F5F5F5;
  width: 234px;
  float: $endSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}
 
 
/* Headings
----------------------------------------------- */
 
h2 {
  margin:1.5em 0 .75em;
  font:$headerfont;
  line-height: 1.4em;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:$sidebarcolor;
}
 
 
/* Posts
-----------------------------------------------
 */
h2.date-header {
  margin:1.5em 0 .5em;
  }
 
.post {
  margin:.5em 0 1.5em;
  border-bottom:1px dotted $bordercolor;
  padding-bottom:1.5em;
  }
.post h3 {
  margin:.25em 0 0;
  padding:0 0 4px;
  font-family:helvetica;
  font-size:130%;
  font-weight:normal;
  line-height:1.4em;
  color:$titlecolor;
}
 
.post h3 a, .post h3 a:visited, .post h3 strong {
  display:block;
  text-decoration:none;
  color:$titlecolor;
  font-weight:normal;
}
 
.post h3 strong, .post h3 a:hover {
  color:$textcolor;
}
 
.post-body {
  margin:0 0 .75em;
  line-height:1.6em;
}
 
.post-body blockquote {
  line-height:1.3em;  
}
 
.post-footer {
  margin: .75em 0;
  color:$sidebarcolor;
  text-transform:uppercase;
  letter-spacing:.1em;
  font: $postfooterfont;
  line-height: 1.4em;
}
 
.comment-link {
  margin-$startSide:.6em;
}
.post img, table.tr-caption-container {
  padding:4px;
  border:1px solid $bordercolor;
}
.tr-caption-container img {
  border: none;
  padding: 0;
}
.post blockquote {
  margin:1em 20px;
}
.post blockquote p {
  margin:.75em 0;
}
 
/* Comments
----------------------------------------------- */
#comments h4 {
  margin:1em 0;
  font-weight: bold;
  line-height: 1.4em;
  text-transform:uppercase;
  letter-spacing:.2em;
  color: $sidebarcolor;
  }
 
#comments-block {
  margin:1em 0 1.5em;
  line-height:1.6em;
  }
#comments-block .comment-author {
  margin:.5em 0;
  }
#comments-block .comment-body {
  margin:.25em 0 0;
  }
#comments-block .comment-footer {
  margin:-.25em 0 2em;
  line-height: 1.4em;
  text-transform:uppercase;
  letter-spacing:.1em;
  }
#comments-block .comment-body p {
  margin:0 0 .75em;
  }
.deleted-comment {
  font-style:italic;
  color:gray;
  }
 
#blog-pager-newer-link {
  float: $startSide;
 }
 
#blog-pager-older-link {
  float: $endSide;
 }
 
#blog-pager { 
  text-align: center;
 }
 
.feed-links {
  clear: both;
  line-height: 2.5em;
}
 
/* Sidebar Content
----------------------------------------------- */
.sidebar { 
  color: $sidebartextcolor;
  line-height: 1.5em;
 }
 
.sidebar ul {
  list-style:none;
  margin:0 0 0;
  padding:0 0 0;
}
.sidebar li {
  margin:0;
  padding-top:0;
  padding-$endSide:0;
  padding-bottom:.25em;
  padding-$startSide:15px;
  text-indent:-15px;
  line-height:1.5em;
  }
 
.sidebar .widget, .main .widget { 
  border-bottom:0px dotted $bordercolor;
  margin:0;
  margin-bottom:15px;
  padding:0;
 }
 
.main .Blog { 
  border-bottom-width: 0;
}
 
 
/* Profile 
----------------------------------------------- */
.profile-img { 
  float: $startSide;
  margin-top: 0;
  margin-$endSide: 5px;
  margin-bottom: 5px;
  margin-$startSide: 0;
  padding: 4px;
  border: 1px solid $bordercolor;
}
 
.profile-data {
  margin:0;
  text-transform:uppercase;
  letter-spacing:.1em;
  font: $postfooterfont;
  color: $sidebarcolor;
  font-weight: bold;
  line-height: 1.6em;
}
 
.profile-datablock { 
  margin:.5em 0 .5em;
}
 
.profile-textblock { 
  margin: 0.5em 0;
  line-height: 1.6em;
}
 
.profile-link { 
  font: $postfooterfont;
  text-transform: uppercase;
  letter-spacing: .1em;
}
 
/* Footer
----------------------------------------------- */
#footer {
  width:800px;
  clear:both;
  margin:0 auto;
  padding-top:15px;
  line-height: 1.6em;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-align: center;
}
 
/* Customizations
----------------------------------------------- */
#snake {
  text-indent:-999px;
  display: block;
  width: 150px;
  height: 60px;
  background: url("http://img37.imageshack.us/img37/1583/homelink01.png") no-repeat 0 0;
}
 
#snake:hover { 
  background-position: 0 -60px;
}
 
p {
  font-family:helvetica;
  font-size:11pt;
}
 
#recentnews {
 margin:0;
 padding:0px;
 padding-bottom:1px;
 background-color:#dedede;
}
 
#recentnewslist {
 margin:5px;
 margin-top:0;
 padding-left:5px;
 background-color:#f5f5f5;
}
 
#myspaceroll {
  display: block;
  width: 224px;
  height: 50px;
  background: url("http://img687.imageshack.us/img687/3991/myspaceroll01.png") no-repeat 0 0;
}
 
#myspaceroll:hover { 
  background-position: 0 -50px;
}
 
#myspaceroll span {
  display: none;
}
 
#youtuberoll {
  display: block;
  width: 224px;
  height: 50px;
  background: url("http://img411.imageshack.us/img411/6198/youtuberoll01.png") no-repeat 0 0;
}
 
#youtuberoll:hover { 
  background-position: 0 -50px;
}
 
#youtuberoll span {
  display: none;
}
 
#facebookroll {
  display: block;
  width: 224px;
  height: 50px;
  background: url("http://img241.imageshack.us/img241/4705/facebookroll01.png") no-repeat 0 0;
}
 
#facebookroll:hover { 
  background-position: 0 -50px;
}
 
#facebookroll span {
  display: none;
}
 
#addthese {
 text-align:center;
}
 
#addthese ul, #addthese li {
 list-style-type:none;
 padding:0;
 margin:0;
}
 
#album {
width: 600px;
}
 
#album ul, #album li {
align:center;
 list-style-type:none;
 }
 
#album li{
float:left;
margin:5px;
width:265px;
}
 
#main-wrapper img {
text-align:center;
border:0;
}
 
#player p, #player {
 margin:0;
 padding:0;
 padding-left:5px;
}
 
#player {
 background-color:#dedede;
}
 
h2 {
 display:none;
}
 
#nav {
 margin-bottom:0px;
 font-family:helvetica;
 font-size:12pt;
 color:black;
}
 
#nav ul {
 margin: 0;
 padding: 0;
 list-style-type: none;
 text-align: center;
 background-color:black;
}
 
#nav ul li {
 display: inline;
}
 
#nav ul li a {
 text-decoration: none;
 padding: .2em 1em;
 color:white;
}
 
#nav ul li a:hover {
 color: #fff;
 background-color: #5588aa;
}
]]></b:skin>
 
&lt;script type=&#39;text/javascript&#39;&gt;
function popUp(URL) {
day = new Date();
id = day.getTime();
eval(&quot;page&quot; + id + &quot; = window.open(URL, &#39;&quot; + id + &quot;&#39;, &#39;toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=240,height=120&#39;);&quot;);
}
&lt;/script&gt;
 
&lt;!-- Equal Columns JavaScript Start --&gt;
 
 
&lt;script type=&#39;text/javascript&#39;&gt;
function matchColumns(classname){
     var divs,contDivs,maxHeight,divHeight,d;
     // get all &lt;div&gt; elements in the document
     divs=document.getElementsByTagName(&#39;div&#39;);
     contDivs=[];
     // initialize maximum height value
     maxHeight=0;
     // iterate over all &lt;div&gt; elements in the document
     for(var i=0;i&lt;divs.length;i++){
          // make collection with &lt;div&gt; elements with class attribute &#39;container&#39;
          if(new RegExp(&quot;\\b&quot; + classname + &quot;\\b&quot;).test(divs[i].className)){
                d=divs[i];
                contDivs[contDivs.length]=d;
                // determine height for &lt;div&gt; element
                if(d.offsetHeight){
                     divHeight=d.offsetHeight;                    
                }
                else if(d.style.pixelHeight){
                     divHeight=d.style.pixelHeight;                   
                }
                // calculate maximum height
                maxHeight=Math.max(maxHeight,divHeight);
          }
     }
     // assign maximum height value to all of container &lt;div&gt; elements
     for(var i=0;i&lt;contDivs.length;i++){
          contDivs[i].style.height=maxHeight + &quot;px&quot;;
     }
}
// Runs the script when page loads
window.onload=function(){
     if(document.getElementsByTagName){
          matchColumns(&#39;crosscol&#39;); // class=column       
          matchColumns(&#39;column&#39;); // class=maincolumn   
     }
}
&lt;/script&gt;
&lt;!-- Equal Columns JavaScript End --&gt;
 
  </head>
 
  <body>
  <div id='outer-wrapper'><div id='wrap2'>
 
    <!-- skip links for text browsers -->
    <span id='skiplinks' style='display:none;'>
      <a href='#main'>skip to main </a> |
      <a href='#sidebar'>skip to sidebar</a>
    </span>
 
    <div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Really Old Airplanes (Header)' type='Header'/>
</b:section>
    </div>
 
    <div id='content-wrapper'>
 
      <div id='crosscol-wrapper' style='text-align:center'>
        <b:section class='crosscol' id='crosscol'>
<b:widget id='HTML2' locked='false' title='Navigation' type='HTML'/>
</b:section>
      </div>
 
      <div class='column' id='main-wrapper'>
        <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
      </div>
 
      <div class='column' id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML1' locked='false' title='Music Player' type='HTML'/>
<b:widget id='HTML4' locked='false' title='Recent News' type='HTML'/>
<b:widget id='HTML3' locked='false' title='Add These' type='HTML'/>
</b:section>
      </div>
 
      <!-- spacer for skins that want sidebar and main to be the same height-->
      <div class='clear'>&#160;</div>
 
    </div> <!-- end content-wrapper -->
 
    <div id='footer-wrapper'>
      <b:section class='footer' id='footer'/>
    </div>
 
  </div></div> <!-- end outer-wrapper -->
</body>
</html>