Problem with modified Garland Theme CSS (Fine in FireFox problem in IE7)

Hello to all,

Just recently installed Drupal having taken the plunge to move away from just managing a static site and dispite a number of the common newbie problems following install from local test server to remote serever (host permissions etc.) all seems great except... I have run into the old problem of things don't always work as expeted.

The issue in question relates to a modification I have made to the standard Garland theme. Basically I have just tried to add a banner image to the top of the page and then display the theme un modified below it. The main aspiration was for the banner image to be wide enough that it would work for different screen resolutions but not dictate the width of the page e.g. display it in a container as a background image so it would effectievly auto crop depending on browser window size. To achieve this I modified a copy of style.css and page.tpl.php. In Firefox everything works great in IE7 things not so well at all.

The modifications to the files are below:

style.css (addition of #imagestrip)

#imagestrip {
	height:126px;
	width:100%;
	float:left;
	display:inline;
	background-repeat:repeat-x;
	}	

 #header-region {
  min-height: 1em;
  background: #d2e6f3 url(images/bg-navigation.png) repeat-x 50% 100%;
}

#header-region .block {
  display: block;
  margin: 0 1em;
}

#header-region .block-region {
  display: block;
  margin: 0 0.5em 1em;
  padding: 0.5em;
  position: relative;
  top: 0.5em;
}

#header-region * {
  display: inline;
  line-height: 1.5em;
  margin-top: 0;
  margin-bottom: 0;
}

/* Avoid displaying content of script tags */
#header-region script {
  display: none;
}

#header-region p, #header-region img {
  margin-top: 0.5em;
}

I have tried changing virtually everything in the #header-region sections to no availe.

page.tpl.php (additions between #imagestrip comment markers)

<!-- Layout -->

	<!-- image strip START -->
	<div id="imagestrip" style="background-image:url(/drupal/themes/holyredeemer/images/banner.jpg);"></div>
	<!-- image strip END -->
    
  <div id="header-region" class="clear-block"><?php print $header; ?></div>

    <div id="wrapper">
    <div id="container" class="clear-block">

      <div id="header">
        <div id="logo-floater">
        <?php
          // Prepare header

Link to how it should look (FireFox)
FireFox Version

Link to how it displays in IE7 (oh dear!)
IE7 Version

I accept that I have probably gone the wrong way about trying to get to where I want to be but ... and whilst I have tried searching for the answers (which the drupal site has so far provided me with many answers to the questions I have had) I have drawn empty on this occassion and I have got to the point were I can't see the wood for the trees anymore so if anybody can point me in the right direction I would be most grateful, many thanks in advance.