IE Error - A possible double margin error? Not fixed by display:inline

[redhillccwebmas]

Hi there,

Please take a look at http://www.jh-webdesign.co.uk/projects/dmb/site/ in IE.

You will notice that the image, which reads 'Site News' is out of place and does not align with the other float:right element on the page, 'Album Selector'
I thought that this could be a possible IE double margin error, so I used display:inline however this doesn't work.
In Firefox and Opera, my page displays fine;

Any ideas on how to get the 'Site News' element aligned to the right just like 'Album Selector'?

My CSS is below:

*{margin:0px;padding:0;}
	
	body {margin-top:5px;background-color:#9191FF;}

	div{font-family: Arial, Helvetica, sans-serif;font-size: 12px;}

	.container{
	margin:0 auto;
	width:615px;
	background-color:#ffffff;}

* html .main_container{height:1%;}

/* FONT CLASSES */

p {font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #9191ff;}

   .newsdate{font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #9191ff;
        font-weight:bold;}
   
   .newsbody{font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #9191ff;}


.albumdate{font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #9191ff;
        font-weight:bold;margin-bottom:10px;}

.linksbar{margin-top:6px;margin-left:35px;
         font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #ffffff;
        font-weight:bold;float:left;}

.linksbar a{text-decoration:none;
            color: #ffffff; }


/* BAND_NEWS.ASP */

.news{font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	color: #9191ff;
        font-weight:bold; 
        margin-bottom:10px;}

.date{font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #9191ff;
        font-weight:bold; 
        margin-bottom:5px;}

#bandnews_contain{width:465px;margin-bottom:15px;}
#bandnews_pic{width:150px:height:150px;float:left;margin-right:10px;margin-bottom:10px;}
.bandnewsbody,.albumdescr{font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #9191ff;margin-bottom:25px;}

/* OTHER RECENT NEWS */

#otherrecentnews{float:left;display:inline;}
#otherrecentnews_title{height:20px;background:url(images/band_news.asp_OtherRecentNews.png);margin-bottom:10px;}

#otherrecentnews_container{width:120px;float:left;margin-left:13px;}







head+body .container{overflow:hidden;}





#header{
background:url(images/header.png);height:112px;}

#links{
background:url(images/links.png);height:35px;}

.main_container{margin:15px;}
#main{}

#opentext{height:70px;margin-bottom:20px;}

/*----INDEX.HTML-----*/

/*----NEWS-----*/

#bandnew_contain{width:368px;float:left;margin-bottom:15px;float:left;}
#bandnew_title{height:20px;background:url(images/bandnews_header.png);}
#bandnew_asp{margin-top:5px;margin-left:4px;margin-right:4px;margin-bottom:20px;background-color:#eeeeee;}
#bandnewpic{width:102px;height:102px;float:left;margin-right:7px;margin-bottom:3px;border:1px;clear:left}
.clearfix:after {
	content:"."; 
	display:block; 
	height:0; 
	clear:both; 
	visibility:hidden;
}
.clearfix {
	display:inline-block;
}
/* mac hide \*/
	* html .clearfix {height: 1%;}
	 .clearfix {display: block;}
/* End hide */}
#bandnewdate{width:200px;}

#sitenew_contain{width:190px;float:right;margin-bottom:15px;display:inline;}
#sitenew_title{height:20px;background:url(images/sitenews_header.png);}
#sitenew_asp{margin-top:5px;margin-bottom:20px;}
#sitenewdate{width:150px;}

#albumselector_contain{width:190px;float:right;}
#albumselector_title{height:20px;background:url(images/albumselector_header.png);margin-bottom:8px;}
#albumselector_asp{margin-bottom:8px;float:left;margin-right:8px;}

#footer{background:url(images/footer.png);height:37px;clear:both;position:relative;}

#albumselector_album{margin-right:10px;margin-bottom:10px;float:left;}

Kind Regards

James

[redhillccwebmas]

I've tried wrapping both right-hand div elements in a class but this didn't help and has forced out the right-hand div, 'albumselector_contain'. So this has to mean that its a double margin error within IE? However this still doesn't go away with display:inline. Any ideas?

Kind Regards

James

[BonRouge]

I think first, you need to sort out your double-use of the same id (bandnewdate).
Then, remove this and you might be OK (maybe)...

#bandnewdate{width:200px;}