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!

[hendrix]

cuando me pasa eso yo desactivo modulos y voy probando la pagina para ver el que me ocaciona problemas. por lo general se me escapa el ancho de algun modulo y provoca que se bajen otros modulos o contenidos. o tambien prueba haciendo menos ancho el logo.

a#logo {

width: 332px;



quizas sea eso no se

saludos

[AlvaroG]

No sé si estoy mirando mal o qué, pero no me doy cuenta de qué clases y propiedades estás usando para posicionar ese menú.
De todas formas, siempre vale recordar que usando comentarios condicionales podés incluir CSS que únicamente IE interpreta.


Saludos

[Aresillo]

no logro saber porque es... pero estaría bien que nos pusieras una url y así nos es más fácil trabajarlo...

Aresillo!!
PD: Sino, ponlo en el foro de CSS...

[Larenz]

Voy a postear en Foro de CSS o algún moderador que mueva este post hacia allá... seguro allí me responden más rápido... GRACIAS!!!!

[Aresillo]

yo estoy allí metido... y por eso te lo digo... a ver si lo ve metacortex y te lo mueve... si la tienes colgada ponnos la url que de seguro es más fácil trastear...

Aresillo!!

[Aresillo]

Se me ocurre que no lo flotes y lo pongas a continuación del flujo pero con margin...

Aresillo!!

[Larenz]

No la tengo colgada. Puedes pensar que sí porque le censuré el logo y la url pero es porque trabajo en localhost y en la url de localhost me aparece el nombre del sitio e igual en el logo y por el momento no quiero publicar el nombre (ideología mía). Pero en fin no la tengo colgada, sino con gusto te paso la URL para que me ayudéis rápido....

[Larenz]

Bueno... lo que voy a hacer es subir un demo a la web para que puedan ver mejor el código...

[Larenz]

Mientras tanto voy a probar a como me dices, hacerlo con margin y no flotarlo... (o sea solo flotar los de adentro), pero el #topmenu-wrapp no lo voy a flotar a ver qué pasa...

[AlvaroG]

Moviendo a CSS :)

[Aresillo]

Gracias Alvin..

Aresillo!!