Necesito orientación en código css, ¡estoy ofuscado!

[Larenz]

Hola a ti que lees mi post! Pues ahorita necesito que sí eres superdotado en conocimientos en css me eches una mano, la necesito.

Bueno tengo un problema y llevo más de una hora queriendo solucionarlo. Estoy creando una plantilla (o mejor dicho una web en Joomla) y tengo dos menús, uno que es el principal (mainmenu) y el otro un secundario (topmenu). En esta imagen está cómo es que lo quiero:



Pero a a la hora de verlo en el IE7 el menú secundario desaparece y se va hacia abajo a como aparece en esta imagen:



¿Cómo debo trabajar los códigos css para que me quede igual que en FireFox? Estos son los códigos con lo que estoy trabajando:

CSS

Código:

/* **************************************** */
/* HEADER */
/* **************************************** */

#cabecera { 
    height: 104px; 
	width: 100%;
	background: #FFF /*#27343C*/;
	/*position: relative;*/
	margin: 0 auto 0 auto;
}
    #cabecera .mainhead { 
	    height: 104px; 
		width: 900px;
		margin: 0 auto; 
		text-align: left;
    }
	#cabecera .mainhead .logotipo { 
	    float: left;
	}
	
#topmenu-wrapp {
	background: url(../images/menu_top_left.jpg) no-repeat left bottom;
	float: right;
	height: 30px;
}

#topmenu { 
    background: url(../images/menu_top_right.jpg) no-repeat right bottom;
	margin: 0 0 0 8px;
	float: right;
	height: 30px;
}

#topmenu ul {
    margin: 0;
	padding: 0 10px 0 10px;
	line-height: normal;
	background: none !important;
	list-style-type: none;
	background: none;
}
	
#topmenu li {
    display: inline;
	margin: 0;
	padding: 0;
	background: url(../images/vline-white.gif) no-repeat center left;
	font-size: 11px;
	color: #FFF;
}
	
#topmenu li a {
    display: inline;
	line-height: normal;
	padding: 0 10px;
	font-size: 11px;
	color: #FFF;
}
		
/* modulos del topmenu */

#topmenu div.left {
    float: left;
	padding: 0;
	margin: 0;
}
#topmenu div.right {
    margin: 0 0 0 0;
	float: left;
	padding: 0 10px 0 0;
	clear: right;
}

.search {
	float: left;
	margin: 0px 0 0 0;
	border: none;
}
input#mod_search_searchword {
	background: url('../images/input_login_search.png') no-repeat 0 0;
	margin-top: 8px;
	border: none;
	padding-left: 5px !important;
	padding-right: 15px;
}

	
/* aqui edito el ancho y alto del logo */

a#logo {
	background: transparent url('../images/logo.png') no-repeat 0 0;
	width: 332px;
	height: 104px;
	display: block;
	overflow: hidden;
	float: left;
}
/*final*/

Y este es el que va en el archivo index.php

Código PHP:

 <div id="cabecera">
  
  <div class="mainhead">
    <div class="logotipo"><a href="./" title="Logo | Dise&ntilde;o de Sitios Webs | Dominio Gratis | Hospedaje Web" class="logo"><img src="<?php echo $template_baseurl.'/images/logo.gif'?>" border="0" width="332" height="104" alt="Logo | Dise&ntilde;o de Sitios Webs | Dominio Gratis | Hospedaje Web" title="Logo | Dise&ntilde;o de Sitios Webs | Dominio Gratis | Hospedaje Web" /></a></div>
    
    <?php if ($this->countModules('user1 or user2') ) : ?>
    <div id="topmenu-wrapp">
      <div id="topmenu" class="clearfix">
      <?php if($this->countModules('user1')) : ?>
          <div class="left">
            <jdoc:include type="modules" name="user1" />
          </div>
      <?php endif; ?>
      
      <?php if($this->countModules('user2')) : ?>
          <div class="right">
            <jdoc:include type="modules" name="user2" />
          </div>
      <?php endif; ?>
      </div>
    </div>
    <?php endif; ?>
  </div>
</div>  

Espero que me entiendan lo que quiero lograr, la verdad que hasta me detuve un poco para luego enfriar la cabeza y continuar pero no he logrado hacer lo que quiero. No sé que estoy haciendo mal y espero sus respuestas.... gracias!