Banner problem in IE

Cheers guys,

I really hope you can help me!

In joomla I used the template "jamba" to design this webshop:
9702218f19.JPG
I'm quite happy with the result!

but in internet explorer my banner looks kinda odd:
97026eea87(ie).jpg

My banner is in png format which is transparrent.. maybe thats the reason? (I have IE 7 though)

Or maybe its just a "ordering" problem? My logo needs to be on top..(like in Firefox) which doesn't seem to be the case in IE.. the question however is how to achieve that in IE..

I would be very grateful if you had a solution to my problem.

here is my 2 CSS files:

ie.css

#main-wrapper {
	position: relative;
	top: -5px;
}
#navmenu li a {
	line-height: 22px;
	padding: 4px 10px 4px 0px;
	display: inline;
}
.main-both	{
	width: 545px;
}
.main-left-only	{
	width: 750px;
}
.main-right-only	{
	width: 740px;
}

Code (markup):

style1.css

body {
	background: #F5F3D6 url(../images/style1/pagetop_bg.png) repeat-x 0px 152px;
	margin: 0;
	padding: 0;
	font-size: 12px;
	color: #8F8824;
	line-height: 129%;
}

/* @group Typography */

/* Link Colors */

a {
	color: #557F01;
	text-decoration: underline;
}

a:hover {
	color: #F5F3D6;
	text-decoration: underline;
}

li {
	background: url(../images/style1/bullet.gif) no-repeat 0 5px;
}

/* $headerstyle(graphic) */

#header_graphic a img {
	padding-top: 15px; /* Header Text distance from top */

}

/* Total header height */

#header-wrap,#header_text,#header_graphic {
	height: 110px;
}

/* Header background color/image */

#header-wrap {
	background: #DCD574 url(../images/style1/header_bg.png) repeat-x;
}

/* $headerstyle(text) */

#header_text h1, #header_text h1 a {
	color: #fff; /* Header Text Color */
	padding-top:15px ; /* Header Text distance from top */
	font: bold 40px/50px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; /* Header Text Typograhy */
	letter-spacing: -1px;
}
#header_text h2 {
	color: #d4e3b9; /* Slogan Text Color */
	font: italic bold 18px/18px Geneva, Verdana, sans-serif;/* Slogan Text Typograhy */
}

/* Heading Styles */

h1 {
	color: #DDD673;
}

h2 {
	color: #690;
}

h3 {
	color: #727272;
}

h4 {
	color: #727272;
}

blockquote {
	border: 1px solid #F5F3D6;
	background-color: #e4edd5;
}

.footer {
	color: #6f6f6f;
}

/* @end */

/* @group Newsflash Module */

#headermod {
	height: 98px; /* Module Height */
	width: 500px; /* Module Width */
	top:10px; /* Distance from top */
	color: #dbded3; /* Text Color */
}
#headermod .contentheading,#headermod a.contentpagetitle,#headermod a {
	color: #f9f9f2;/* Heading/Link Color */
}

#headermod td.contentheading,#headermod .moduletable h3 {
	border-bottom: 1px solid #43643d;/* Content/Module Heading Border */
}

/* @end */

/* @group Joomla! Styles */

/* Category Tables */
td.sectiontableheader {
color: #fff;
background-color: #557f01;
font: 14px/20px Arial, Helvetica, Geneva, sans-serif;
}
table tr.sectiontableentry1 td,
table td.sectiontableentry1 {
background: #fff;
padding: 4px;
border-bottom: 1px solid #f0f0f0;
line-height: 155%;
}
table tr.sectiontableentry2 td,
table td.sectiontableentry2 {
background: #fff;
padding: 4px;
border-bottom: 1px solid #f0f0f0;
line-height: 155%;
}
/* Polls */
table.pollstableborder td.sectiontableentry1 {
color: #3d2518;
background: #f8f8f8;
padding: 2px;
border-bottom: 1px solid #fff;
}
table.pollstableborder td.sectiontableentry2 {
color: #3d2518;
background: #f2f2f2;
padding: 2px;
border-bottom: 1px solid #fff;
}
table.pollstableborder td.sectiontableheader {
padding: 8px;
color: #fff;
border: none;
}
table.pollstableborder tr.sectiontableentry1 td {
border: none;
}
table.pollstableborder tr.sectiontableentry2 td {
border: none;
}
/* Article Overflow */

div.blog_more {
	border-top: 1px solid #e6e6d4;
}
div.blog_more ul li a {
	border-bottom: 1px solid #dadacc;
}
div.blog_more ul li a:hover {
	border-bottom: 1px solid #dadacc;
	background-color: #fefdf2;
}
/* Mosimages */
div.mosimage {
	border: 1px solid #ccc;
	background: #f7f7f7;
}
div.mosimage_caption {
	color: #666;
	background: #fff;
	border-top: 1px solid #ccc;
}
/* Content Headings */
a.contentpagetitle {
	color: #470705;
}
a.contentpagetitle:hover {
	color: #000;	
}
td.contentheading {
	border-bottom: 1px solid #efefdd;
	color: #466A02;
}
.contentheading {
	color: #466A02;
}
.componentheading {
	color: #2f462b;
}
a.readon {
	background: url(../images/style1/readon.png) no-repeat left center;
}
span.small,.createdate,.modifydate {
	font: 10px/10px Tahoma, Lucida, Verdana, sans-serif;
	color: #F5F3D6;
}
.pagenav_next a,.pagenav_prev a {
	background: #e4edd5;
	border: 1px solid #F5F3D6;
	color: #8fa26f;
}
div.back_button a {
	background: #e4edd5;
	border: 1px solid #F5F3D6;
	color: #8fa26f;
}
.pagenav_next a:hover,.pagenav_prev a:hover,div.back_button a:hover {
	background-color: #fff;
	color: #8fa26f;
}
table.contenttoc {
	background-color: #f5f2e1;
	border: 1px solid #e8e6d8;
}
table.contenttoc th {
	background-color: #557f01;
	color: #fffef1;
}











/* @end */

/* Conditional Styles - Advanced Edits Only Below This Line */

/* @group Style 1 Modules */

div.module h3,div.moduletable h3 {
	border-bottom: 1px solid #EFEFDD;
	color: #466A02;
	background: url(../images/style1/mod_heading.png) no-repeat left center;
}


/* Module "S1" Text Style */
.moduleS1 {position:relative;margin:0 0 1em;padding:0;background: #2f462b url(../images/style1/topright_S1.png) top right no-repeat;color: #FFFFFF;}
div.moduleS1 div {background: url(../images/style1/topleft_S1.png) top left no-repeat;}
div.moduleS1 div div {background: url(../images/style1/botleft_S1.png) bottom left no-repeat; height:1%;}
div.moduleS1 div div div {background: url(../images/style1/botright_S1.png) bottom right no-repeat;padding:10px;}
div.moduleS1 div div div div {background:none;}
/* Module Heading "S1" Style */
div.moduleS1 h3 {padding: 0;line-height: 100%;height: auto;margin: 0 0 5px 0;font-weight: normal;text-indent: 0px;font-size: 16px;letter-spacing: normal;border-bottom: 1px solid #40603a;color: #fff;}
/* Module "S1" Link Color */
div.moduleS1 a {color: #FFFFFF;text-decoration:underline;}
div.moduleS1 a:hover {color: #FFFFFF;text-decoration:none;}
/* Module "S1" List Styles */
div.moduleS1 ul,div.moduleS1 ul.latestnewsS1,div.moduleS1 ul.mostreadS1 {list-style: none;margin: 0px;padding:0px;}div.moduleS1 ul li,div.moduleS1 ul.latestnewsS1 li,div.moduleS1 ul.mostreadS1 li {padding: 0px 0px 0px 10px;margin: 0px;background: url(../images/style1/bullet_S1.gif) no-repeat 0px 5px;white-space: normal;}
/* Module "S2" Text Style */
.moduleS2 {position:relative;margin:0 0 1em;padding:0;background: #669900 url(../images/style1/topright_S2.png) top right no-repeat;color: #FFFFFF;}
div.moduleS2 div {background: url(../images/style1/topleft_S2.png) top left no-repeat;}
div.moduleS2 div div {background: url(../images/style1/botleft_S2.png) bottom left no-repeat; height:1%;}
div.moduleS2 div div div {background: url(../images/style1/botright_S2.png) bottom right no-repeat;padding:10px;}
div.moduleS2 div div div div {background:none;}
/* Module Heading "S2" Style */
div.moduleS2 h3 {padding: 0;line-height: 100%;height: auto;margin: 0 0 5px 0;font-weight: normal;text-indent: 0px;font-size: 16px;letter-spacing: normal;border-bottom: 1px solid #78b31c;color: #FFF;}
/* Module "S2" Link Color */
div.moduleS2 a {color: #FFFFFF;text-decoration:underline;}
div.moduleS2 a:hover {color: #FFFFFF;text-decoration:none;}
/* Module "S2" List Styles */
div.moduleS2 ul,div.moduleS2 ul.latestnewsS2,div.moduleS2 ul.mostreadS2 {list-style: none;margin: 0px;padding:0px;}div.moduleS2 ul li,div.moduleS2 ul.latestnewsS2 li,div.moduleS2 ul.mostreadS2 li {padding: 0px 0px 0px 10px;margin: 0px;background: url(../images/style1/bullet_S2.gif) no-repeat 0px 5px;white-space: normal;}
/* Module "S3" Text Style */
.moduleS3 {position:relative;margin:0 0 1em;padding:0;background: #ebebeb url(../images/style1/topright_S3.png) top right no-repeat;color: #333333;}
div.moduleS3 div {background: url(../images/style1/topleft_S3.png) top left no-repeat;}
div.moduleS3 div div {background: url(../images/style1/botleft_S3.png) bottom left no-repeat; height:1%;}
div.moduleS3 div div div {background: url(../images/style1/botright_S3.png) bottom right no-repeat;padding:10px;}
div.moduleS3 div div div div {background:none;}
/* Module Heading "S3" Style */
div.moduleS3 h3 {padding: 0;line-height: 100%;height: auto;margin: 0 0 5px 0;font-weight: normal;text-indent: 0px;font-size: 16px;letter-spacing: normal;border-bottom: 1px solid #d3d3d3;color: #466a02;}
/* Module "S3" Link Color */
div.moduleS3 a {color: #66852D;text-decoration:underline;}
div.moduleS3 a:hover {color: #66852D;text-decoration:none;}
/* Module "S3" List Styles */
div.moduleS3 ul,div.moduleS3 ul.latestnewsS3,div.moduleS3 ul.mostreadS3 {list-style: none;margin: 0px;padding:0px;}div.moduleS3 ul li,div.moduleS3 ul.latestnewsS3 li,div.moduleS3 ul.mostreadS3 li {padding: 0px 0px 0px 10px;margin: 0px;background: url(../images/style1/bullet_S3.gif) no-repeat 0px 5px;white-space: normal;}
/* @end */


/* @group Structural */

.main-top-both,.main-top-left-only {background: url(../images/style1/top_has_left.png) no-repeat center bottom;}
.main-top-wide,.main-top-right-only {background: url(../images/style1/top_wide.png) no-repeat center bottom;}
#mainbody-both	{background: url(../images/style1/mid_left_right.png) repeat-y center top;}
#mainbody-left-only	{background: url(../images/style1/mid_leftonly.png) repeat-y center top;}
#mainbody-wide,.mainbody-wide,#mainbody-right-only	{background: url(../images/style1/mid_wide.png) repeat-y center top;}

.bottom-both,.bottom-left-only	{background: url(../images/style1/bot_has_left.png) no-repeat center top;}
.bottom-wide,.bottom-right-only	{background: url(../images/style1/bot_wide.png) no-repeat center top;}
.tplcright a {color: #fff;display: block;margin: 4px 0px 2px 5px;text-align: center;background: url(../images/style1/arrowl.png) no-repeat left center;text-indent: -5000em;width: 75px;height: 12px;line-height: 12px;padding: 0px;}
ul.checklist li {background: url(../images/style1/checklist.png) no-repeat left center;}

/* @end */

/* @group Top Menu */

.menubar {
	background: url(../images/style1/navcontainer.png) repeat-x center top;
}
#navmenu {
	background: url(../images/style1/navcontainer.png) no-repeat left top;
}
#navmenu li {
	background: url(../images/style1/nav_norm_l.png) no-repeat bottom left;
}
#navmenu li a {
	background: url(../images/style1/nav_norm_r.png) no-repeat bottom right;
	color: #fff;
}
div#navmenu li:hover, div#navmenu li.iehover {
	background: url(../images/style1/nav_hover_l.png) no-repeat bottom left;
}
div#navmenu li:hover a, div#navmenu li.iehover a {
	background: url(../images/style1/nav_hover_r.png) no-repeat bottom right;
	color: #557f01;
}
div#navmenu li.active {
	background: url(../images/style1/nav_active_l.png) no-repeat bottom left;
}
div#navmenu li.active a {
	background: url(../images/style1/nav_active_r.png) no-repeat bottom right;
	color: #FFF;
}

/* @end */


/* @group Left Nav */

#leftcol ul#mainlevel,#rightcol ul#mainlevel,
#leftcol ul#mainlevel-sidenav,#rightcol ul#mainlevel-sidenav {
	list-style: none;
}

#leftcol a.mainlevel,#rightcol a.mainlevel,
#leftcol a.mainlevel-sidenav,#rightcol a.mainlevel-sidenav {
	background: url(../images/style1/leftnav_norm.png) no-repeat left center;
	color: #2f462b;
}
#leftcol a.mainlevel:hover,#rightcol a.mainlevel:hover,
#leftcol a.mainlevel-sidenav:hover,#rightcol a.mainlevel-sidenav:hover {
	background: url(../images/style1/leftnav_over.png) no-repeat left center;
	color: #fff;
}
#leftcol a#active_menu.mainlevel,#leftcol a#active_menu.mainlevel:hover,
#rightcol a#active_menu.mainlevel,#rightcol a#active_menu.mainlevel:hover,
#leftcol a#active_menu-sidenav.mainlevel-sidenav,#leftcol a#active_menu-sidenav.mainlevel-sidenav:hover,
#rightcol a#active_menu-sidenav.mainlevel-sidenav,#rightcol a#active_menu.mainlevel-sidenav:hover {
	background: url(../images/style1/leftnav_active.png) no-repeat left center;
	color: #fff;
}
a.sublevel,a.sublevel-sidenav {
	color: #000;
}
/* @end */

Code (markup):

and in case its needed, the HTML file:

<?php
// no direct access
defined( '_JEXEC' ) or die( 'Restricted index access' );
define( 'YOURBASEPATH', dirname(__FILE__) );
require(YOURBASEPATH .DS."/styleswitcher.php"); 
?>
<!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="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<!--[if lt IE 7.]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->

<?php
	$headerstyle      = $this->params->get("headerstyle", "graphic");
	$headline     	  = $this->params->get("headline", "Jamba");
	$slogan			  = $this->params->get("slogan", "A Free Template From Joomlashack");
	$themecolor		  = $this->params->get("themecolor", "style1");
	require( YOURBASEPATH.DS."/themesaver.php");
	
	function getColumns ($left, $right){
	if ($left && !$right) {$style = "-left-only";}
	if ($right && !$left) $style = "-right-only";
	if (!$left && !$right) $style = "-wide";
	if ($left && $right) $style = "-both";
	return $style;
	}
	$style = getColumns($this->countModules( 'left' ),$this->countModules( 'right' ));
	
	//count modules in vertical positions u45
	$user45count = $this->countModules('user4') + $this->countModules('user5');
	if ($user45count == "1") {$user45width = "100%";}
	elseif ($user45count == "2") {$user45width = "50%";}
	
	
	//count modules in vertical positions u67
	$user67count = $this->countModules('user6') + $this->countModules('user7');
	if ($user67count == "1") {$user67width = "100%";}
	elseif ($user67count == "2") {$user67width = "50%";}

?>
<link rel="shortcut icon" href="images/favicon.ico" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />

<link href="<?php echo $this->baseurl;?>/templates/<?php echo $this->template;?>/css/template_css.css" rel="stylesheet" type="text/css" media="screen" />
<link href="<?php echo $this->baseurl;?>/templates/<?php echo $this->template;?>/css/nav.css" rel="stylesheet" type="text/css" media="screen" />
<link href="<?php echo $this->baseurl;?>/templates/<?php echo $this->template;?>/css/<?php echo $scheme;?>.css" rel="stylesheet" type="text/css" media="screen" />
<link href="<?php echo $this->baseurl;?>/templates/<?php echo $this->template;?>/css/j15.css" rel="stylesheet" type="text/css" media="screen" />

<!--[if IE]>
<link href="<?php echo $this->baseurl;?>/templates/<?php echo $this->template;?>/css/ie.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->

</head>
<body>
<div id="header-wrap">
	<div id="header_<?php echo $headerstyle; ?>">
		<?php if ($this->countModules( 'newsflash' )) : ?>
			<div id="headermod"><jdoc:include type="modules" name="newsflash" style="xhtml" /></div>
		<?php endif; ?>
				<h1>
				<?php if ($headerstyle=='graphic') { ?>
				<a href="<?php echo JURI::base(); ?>" title="<?php echo $headline; ?>"><img src="<?php echo $this->baseurl;?>/templates/<?php echo $this->template;?>/images/<?php echo $scheme;?>/logo.png" title="<?php echo $headline; ?>" alt="<?php echo $slogan; ?>"/></a>

				<?php } ?>
				<?php if ($headerstyle=='text') { ?>
				<a href="<?php echo JURI::base(); ?>" title="<?php echo $headline; ?>"><?php echo $headline;?></a>
				<?php } ?>
				</h1>
				<h2><?php echo $slogan;?></h2>	
			</div>
		</div>
<div class="menubar">
	<div id="navmenu">
	<!--[if IE]>
		<script type="text/javascript" src="<?php echo $this->baseurl;?>/templates/<?php echo $this->template;?>/js/barmenu.js"></script>
	<![endif]-->
		<jdoc:include type="modules" name="top" style="none" />
	</div>
</div>
	<div id="main-wrapper">		
		<div class="main-top<?php echo $style; ?>"></div>
			<div id="mainbody<?php echo $style; ?>">
				<?php if ($this->countModules( 'left' )) : ?>
					<div id="leftcol">
						<div class="left-inside">
							<jdoc:include type="modules" name="left" style="rounded" />
						</div>
					</div>
				<?php endif; ?>
				<?php if ($this->countModules( 'right' )) : ?>
					<div id="rightcol">
						<div class="right-inside">
							<jdoc:include type="modules" name="right" style="rounded" />
						</div>
					</div>
				<?php endif; ?>
				<div class="main<?php echo $style; ?>">
						<table border="0" cellspacing="0" cellpadding="0" width="100%">
						  <tr>
						    <td valign="top" width="100%">
								<?php if($this->countModules('user4') or $this->countModules('user5')) : ?>
										<div id="showcase">
										<table border="0" cellpadding="0" cellspacing="0" align="center" width="100%">
										<tr>
										<?php if ($this->countModules( 'user4' )) : ?>
										<td style="width: <?php echo $user45width; ?>;padding:5px; vertical-align:top;">
										<jdoc:include type="modules" name="user4" style="rounded" />
										</td>
										<?php endif; ?>
										<?php if ($this->countModules( 'user5' )) : ?>
										<td style="width: <?php echo $user45width; ?>;padding:5px; vertical-align:top;">
										<jdoc:include type="modules" name="user5" style="rounded" />
										</td>
										<?php endif; ?>
										</tr>
										</table>
										</div>
									<?php endif; ?>
									
							<?php if ($this->countModules( 'banner' )) : ?>
								<div id="banner"><jdoc:include type="modules" name="banner" style="raw" /></div>
							<?php endif; ?>
							
							<?php if ($this->countModules( 'breadcrumbs' )) : ?>
							<div id="pathway"><jdoc:include type="modules" name="breadcrumbs" style="raw" /></div>
							<?php endif; ?>
							
						<jdoc:include type="message" />
						<jdoc:include type="component" />
						</td>
						  </tr>
						</table>
						
				<?php if($this->countModules('user6') or $this->countModules('user7')) : ?>
						<table border="0" cellpadding="0" cellspacing="0" align="center" width="100%">
						<tr>
						<?php if ($this->countModules( 'user6' )) : ?>
						<td style="width: <?php echo $user67width; ?>;padding:5px; vertical-align:top;">
						<jdoc:include type="modules" name="user6" style="rounded" />
						</td>
						<?php endif; ?>
						<?php if ($this->countModules( 'user7' )) : ?>
						<td style="width: <?php echo $user67width; ?>;padding:5px; vertical-align:top;">
						<jdoc:include type="modules" name="user7" style="rounded" />
						</td>
						<?php endif; ?>
						</tr>
						</table>
				<?php endif; ?>
				</div>
				<div class="clear"></div><!--Updated in v1.6.1-->
				</div>
		<div class="bottom<?php echo $style; ?>"></div>
		<?php if ($this->countModules( 'footer' )) : ?>
		<div class="main-top-wide"></div>
		<div class="mainbody-wide">
			<div class="footer">
				<jdoc:include type="modules" name="footer" style="raw" />
			</div>
			<div class="clear"></div>
			</div>
		<div class="bottom-wide">&nbsp;</div>
		<?php endif; ?>
		<?php echo $jstpl; ?>
	</div>
</body>
</html>

Code (markup):

Thank you very much!!

Best Regards,
Viktor