Dotted Box

[BlueLaw]

God I hate internet explorer.

On some older versions of IE the site I'm building doesn't look quite right.

The gap above my content and news is too big, and then the two dotted lines down the sides come down too far

look:



You can see how this is wrong right? It works fine on Safari and on Firefox and on most IE.

This is the kind of code I'm using:

html:

Code: Select all

<div class="leftcolumn" id="leftcolumn">
            	<div class="contenttopbar" id="contenttopbar"></div>
            	   	<div class="content" id="content">
                	  {content}
               	  </div>
   	  <div class="contentbottombar" id="contentbottombar"></div>
                
                <div class="spacer" id="spacer"></div>
                
                <div class="newstopbar" id="newstopbar"></div>
            	              	<div class="news" id="news">
                	  <p>LATEST NEWS:</p>
                	   
                	  {news detailpage="audio"}
               	  </div>
             <div class="newsbottombar" id="newsbottombar"></div>
      </div>

CSS:

Code: Select all

#leftcolumn {
	width:302px;
	float:left;
background-image:url(online/images/backgroundstrip2.jpg);
}

.contenttopbar {
	height:4px;
	background-image: url(online/images/contenttopbar.jpg);
	background-repeat:no-repeat;
}

.content {
	padding: 15px;
	font-family: "Lucida Grande","Lucida Sans Unicode", "Verdana", "Helvetica", sans-serif;
	font-size: 12px;
	line-height: 24px;
	color: #009E77;
	text-decoration: none;

}

.contentbottombar {
	height:4px;
	background-image: url(online/images/contentbottombar.jpg);
	background-repeat:no-repeat;
}

.spacer {
	height:22px;
	background-color:#FFFFFF;
}

.newstopbar {
	height:4px;
	background-image: url(online/images/contenttopbar.jpg);
	background-repeat:no-repeat;
}

.newscontainer {
	background-image:url(online/images/backgroundstrip2.jpg);
}

.news {
	padding: 15px;
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Verdana", "Helvetica", sans-serif;
	font-size: 12px;
	line-height: 16px;
	color: #009E77;
	text-decoration: none;

}

#news a:hover {  
    border-bottom:2px dotted #009E77;
}

.newsbottombar {
	height:4px;
	background-image: url(online/images/contentbottombar.jpg);
	background-repeat:no-repeat;
}

Here's the site in progress:

http://www.amieburnswalker.com/index.php

Please let me know if you know. I don't have much access to Microsoft computers s it's taking me ages to figure it out.