css firefox

kuru · #1 (**permalink**) 19/03/2007, 06:52

Hola tengo un problema urgente!

En la aplicacion que estoy haciendo me aparecen un menu izquierdo con varias opciones, y en la derecha el contenido, pues bien, mi problema esta que cuando el contendio es muy largo el menu izquierdo no se alarga a la proporcion del contenido con lo cual, da un aspecto horroroso.He mirado en el foro y hay muchas soluciones pero no consigo dar con la correcta... Me gustaria que alguien me pudiera echar una mano, es bastante urgente....

Lo curioso es que en IE funciona y en firefox da este error. Os paso el codigo, aver si alguien puede dar con la respuesta.
GRacias de antemano.

body {
text-align: center;
/* margin: 0 auto; */
/*height: 100%;*/
margin: 0; padding: 0;
font-family: arial;
font-size: 11px;
}

html {
background: url("../media/images/cnbilbao/fondos/fondo.gif");
background-repeat: repeat;
height: 100%;
}

#custom_cnbilbao {
width: 880px;
margin: 0 auto;
text-align: left;
background: url("../media/images/cnbilbao/fondos/fondo_tile.gif") repeat-y;
/* background-color: rgb(248, 240, 216); /* white; */
/*min-height: 100%;*/
/*height: 100%;*/
text-align: left;
}

#options {
float: left;
height:auto !important;
min-height:100%;
/*height:100%;*/
/*height:auto;*/
/*width: 218px;
height: 605px;*/
background-color: rgb(248, 240, 216);
}

#options p { margin: 0 0 0 0; }

#options ul {
width: 218px;
height:auto;
margin-top: 0px !important;
padding-left: 0px;
margin-left: 0px;
}

#options ul li {
list-style: none;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 1px;
display: block;
height:auto !important;
/*min-height: 31px;*/
/*height:31px;*/
}

#options ul li a {
display: block;
/*min-height: 21px;*/
height:21px;
width: 100%;
background: rgb(137, 122, 103) url("../media/images/cnbilbao/menu/bullet.gif") no-repeat 4px 4px;
padding-top: 9px;
padding-bottom: 5px;
}

#options ul li a {
padding-left: 25px;
width: 193px;
height:auto !important;
font-family: "Arial";
/* _font-family: "DINEngschrift"; */
font-size: 14px;
text-transform: uppercase;
color: rgb(248, 240, 216);
vertical-align: text-top;
text-decoration: none;
}

#options ul li a:hover {
background-color: rgb(87, 73, 60);
}

#options ul li.option_selected a, #options ul li.option_selected a:hover {
background-color: rgb(200, 96, 24);
font-weight: bold;
height:auto !important;
font-size: 12px;
}

.options_title {
font-weight: normal;
text-transform: uppercase;
color : white;
background-color: rgb(87, 73, 60);
text-align: left;
height: auto !important;
font-family: "Arial Bold";
/* _font-family: "DINEngschrift"; */
font-size: 15px;
padding-left: 20px;
padding-top: 4px;
padding-bottom: 4px;
border-bottom: rgb(248, 240, 216) 1px solid;
}

.options_footer {
background-color: rgb(248, 240, 216);
height:auto !important;
min-height: auto;
/*height:auto;*/
/*height: 75px;*/
width: 218px;
background-image: url("../media/images/cnbilbao/fondos/log_bilbao.gif") ;
background-repeat: no-repeat;
}

.options_head {
background-image: url("../media/images/cnbilbao/fondos/cuadro.jpg") ;
background-repeat: no-repeat;
height: 270px;
width: 218px;
}
#content_layout {
margin: 0 !important;
padding: 0px;
background-color: #fff;
width: 662px;
height:auto !important;
/*height: 624px;*/
float: right;
display: inline;
text-align: center;
}

#content_layout #head {
padding-top: 5px;
height: 63px;
min-height: 63px;
/*margin: 0 auto; */
background: url("../media/images/cnbilbao/fondos/head_admin.gif") repeat-x;

}

#content_layout #head p {
text-align: right;
padding-top: 20px;
padding-right: 23px;
}

#head p a{
text-decoration: none;
padding-left: 20px;
}

#head p a img{
text-decoration: none;
}

#content_layout #content {
margin-left : 40px;
margin-right: 25px;
min-height: 463px;
height: auto !important;
height: 461px;
text-align: left;
}

#content h2 {
padding-top : 20px;
margin-left: 0px;
margin-top: 0px;
}

#content h2 span{
margin-left: 0px;
text-transform: uppercase;
font-family: "DIN-Regular";
font-size: 20px;
color: rgb(200, 96, 24);
}

#content h3 {
font-weight: bold;
font-size: 100%;
text-align: center;
color: rgb(87, 73, 60);
}

Shade · #2 (**permalink**) 19/03/2007, 07:22

Si pusieras el html tambien... estariamos muy agradecidos.

Mikmoro · #3 (**permalink**) 19/03/2007, 08:17

Hola, Shade. No he mirado bien el código, pero por la pregunta, diría que aquí sí va a ser exactamente donde podrá venir de miedo la solución que planteabas el otro día.

Ya me dirás y es el caso.

Mikel.

kuru · #4 (**permalink**) 19/03/2007, 08:40

Quiza mi pregutna sea poco clara....a mi me interesa saber como hago para que cuando el cotenido de la pagina sea mayor o menor, el menu de la izquierda sea exactamente = de largo que el contenido, que sean clavados. Este codigo funciona en IE(pq se lo come todo....) pero ff n traga

he leido x aqui en los foros, que quiza utilizando el "clear:both" pero no se como usarlo, en que parte de codigo tiene que ir...ni si hay q modificar mas codigo...

Gracias otra vez

No es html, es xml. Os lo ajdunto x si os sirve. Gracias.

body {
text-align: center;
/* margin: 0 auto; */
height: 100%;
margin: 0; padding: 0;
font-family: arial;
font-size: 11px;
}

html {
background: url("../media/images/cnbilbao/fondos/fondo.gif");
background-repeat: repeat;
height: 100%;
}

#custom_cnbilbao {
width: 880px;
margin: 0 auto;
text-align: left;
background: url("../media/images/cnbilbao/fondos/fondo_tile.gif") repeat-y;
/* background-color: rgb(248, 240, 216); /* white; */
/*min-height: 100%;*/
height: 100%;
text-align: left;
}

#options {
float: left;
height:100%;
/*overflow:auto;*/
/*height:100%;*/
/*height:auto;*/
/*width: 218px;
height: 605px;*/
background-color: rgb(248, 240, 216);
}

#options p { margin: 0 0 0 0; }

#options ul {
width: 218px;
height:auto;
margin-top: 0px !important;
padding-left: 0px;
margin-left: 0px;
}

#options ul li {
list-style: none;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 1px;
display: block;
height:auto !important;
/*min-height: 31px;*/
/*height:31px;*/
}

#options ul li a {
display: block;
/*min-height: 21px;*/
height:21px;
width: 100%;
background: rgb(137, 122, 103) url("../media/images/cnbilbao/menu/bullet.gif") no-repeat 4px 4px;
padding-top: 9px;
padding-bottom: 5px;
}

#options ul li a {
padding-left: 25px;
width: 193px;
height:auto !important;
font-family: "Arial";
/* _font-family: "DINEngschrift"; */
font-size: 14px;
text-transform: uppercase;
color: rgb(248, 240, 216);
vertical-align: text-top;
text-decoration: none;
}

#options ul li a:hover {
background-color: rgb(87, 73, 60);
}

#options ul li.option_selected a, #options ul li.option_selected a:hover {
background-color: rgb(200, 96, 24);
font-weight: bold;
height:auto !important;
font-size: 12px;
}

.options_title {
font-weight: normal;
text-transform: uppercase;
color : white;
background-color: rgb(87, 73, 60);
text-align: left;
height: auto !important;
font-family: "Arial Bold";
/* _font-family: "DINEngschrift"; */
font-size: 15px;
padding-left: 20px;
padding-top: 4px;
padding-bottom: 4px;
border-bottom: rgb(248, 240, 216) 1px solid;
}

.options_footer {
background-color: rgb(248, 240, 216);
height: 75px;
width: 218px;
background-image: url("../media/images/cnbilbao/fondos/log_bilbao.gif") ;
background-repeat: no-repeat;
}

.options_head {
background-image: url("../media/images/cnbilbao/fondos/cuadro.jpg") ;
background-repeat: no-repeat;
height: 270px;
width: 218px;
}

Mikmoro · #5 (**permalink**) 19/03/2007, 09:59

¿Dónde está el xml?
La css ya la habías puesto antes, pero no dónde o con qué funciona.
Leer esto así sin más casi sería como saber leer a "Matrix".

Mikel.

kuru · #6 (**permalink**) 20/03/2007, 02:53

<xsl:template name="custom_cnbilbao">
<div id="custom_cnbilbao" style="height:1024px">
<xsl:choose>
<xsl:when test="$currentsection = 'home' and $currentoption = 'index'">
<div id="head" style="height:inherit">
<h1><span class="nodisplay">Ilustre <xsl:value-of select="$applicationName" /></span></h1>
<p>
<xsl:choose>
<xsl:when test="$connected">
<a href='?do=identity.release'><img src="data/media/images/cnbilbao/fondos/areapersonal_on.gif" alt="desconectarse" title="desconectarse" /></a>
<a href='?do=contenidos'>
<img src="data/media/images/cnbilbao/fondos/contenidos_off.gif"/>
</a>
</xsl:when>
<xsl:otherwise>
<a href='?do=identity'><img src="data/media/images/cnbilbao/fondos/areapersonal_off.gif" alt="conectarse" title="conectarse"/></a>
</xsl:otherwise>
</xsl:choose>
<a href='?do=home&option=sitemap'>
<img src="data/media/images/cnbilbao/fondos/mapaweb_off.gif"/>
</a>
<a href='?do=home&option=contact'>
<img src="data/media/images/cnbilbao/fondos/contacto_off.gif"/>
</a>
<a href='?do=awe.locale&id=eu'>
<img src="data/media/images/cnbilbao/fondos/idioma_off.gif"/>
</a>
</p>
</div>
<div id="sections">
<xsl:call-template name="sections_cnbilbao" />
<div id="custom" style="height:inherit">
<xsl:call-template name="custom"/>
</div>
</div>
<div id="content_layout">
<div id="flash"></div>

</div>
<div id="inti">
<a href=""><img src="data/media/images/logos/ANCERT.tecnologia.png" alt="Tecnología Ancert" /></a>
</div>
</xsl:when>
<xsl:otherwise>
<div id="sections">
<xsl:call-template name="sections_cnbilbao" />
</div>
<div id="options" style="height:auto">

<div class="options_head" style="background-image:url(data/media/images/cnbilbao/fondos/{$currentsection}.jpg)"></div>
<xsl:apply-templates select="/awedata/sitemap/sections/section[@id=$currentsection]/options"/>
<div class="options_footer"></div>
</div>
<div id="content_layout">
<div id="head">
<p>
<a href='?do=home'>
<img src="data/media/images/cnbilbao/menu/inicio_off.gif"/>
</a>
<a href='?do=awe.locale&id=eu'>
<img src="data/media/images/cnbilbao/menu/euskera_off2.gif"/>
</a>
<a href='?do=home&option=contact'>
<img src="data/media/images/cnbilbao/menu/contacto_off2.gif"/>
</a>
<a href='?do=home&option=sitemap'>
<img src="data/media/images/cnbilbao/menu/mapa_web2.gif"/>
</a>
<xsl:choose>
<xsl:when test="$connected">
<a href='?do=contenidos'>
<img src="data/media/images/cnbilbao/menu/area_per.gif"/>
</a>
<a href='?do=identity.release'><img src="data/media/images/cnbilbao/menu/access.unlock.gif" alt="desconectarse" title="desconectarse" /></a>
</xsl:when>
<xsl:otherwise>
<a href='?do=identity'><img src="data/media/images/cnbilbao/menu/access.lock.gif" alt="conectarse" title="conectarse"/></a>
</xsl:otherwise>
</xsl:choose>
</p>
</div>
<div id="content" style="height:inherit">
<xsl:choose>
<xsl:when test="$currentsection='home' and $currentoption='index'">
<h2><span><xsl:value-of select="/awedata/sitemap/sections/section[@id='home']/label" /></span></h2>
</xsl:when>
<xsl:otherwise>
<h2><span><xsl:value-of select="$viewTitle" /></span></h2>
</xsl:otherwise>
</xsl:choose>
<xsl:call-template name="body" />
<xsl:call-template name="editOption" />
</div>
<div id="footer">
<div id="intifooter">
<a href=""><img src="data/media/images/logos/ANCERT.tecnologia.png" alt="Tecnología Ancert" /></a>
</div>
<p>
<a href="javascript:openWindow('?do=home&option=r ecomendar','Recomendar','scrollbars=0,width=670,he ight=450,top=100,left=100,directories=0,copyhistor y=0')">

Recomendar la página
</a>|
<a href="javascript:agregarAFavoritos('Colegio Notarial de Bilbao','')">
Agregar a favoritos
</a>|
<a href="javascript:openWindow('?do=home&option=a viso_legal','Aviso','scrollbars=1,width=480,height =700,top=100,left=100,directories=0,copyhistory=0' )">
Aviso legal
</a>
</p>
</div>
</div>
</xsl:otherwise>
</xsl:choose>
</div>
</xsl:template>

Aqui esta, no me dejaba adjuntarlo pq llevo poco en el foro y tenia enlaces en el codigo. EN negrita esta la parte que creo que falla. Graciaqs