Opera y float

[jesusjj]

Buenos días:

Estoy haciendo un carrusel con jQuery y lo tengo todo más o menos ajustado, salvo un fallo en Opera.

El tema es que el carrusel muestra las imágenes dentro de unos divs con la siguiente clase:

Clase para el panel

Código:

#carousel .ca_panel {
	width: 170px;
	float: left;
	overflow: hidden;
	margin: 15px;
	padding: 7px;
	border: 1px solid #5b5b5b;
	background: #383838 url('../../img/carousel-panel-bg.png') bottom left repeat-x;  
}

El problema que me ocurre, es que en Opera se me superponen los paneles, eso sí, respetando el margin, cada uno de los que se solapan, muestran 15px de 'margin' a su izquierda.

Por lo que he estado mirando, aunque no me he aclarado mucho, es que se debe a un bug del navegador. Por otra parte, he leído, que para evitarlo, debería tener un width, que lo tiene, e, incluso, un div 'extra', después de las imágenes, que tenga un 'clear: both;' o 'clear: right;', pero ninguna de estas 'soluciones' me ha funcionado.

La versión que tengo de Opera es bastante recientita, puesto que hasta hace un mes aprox. no me lo había instalado nunca.

Espero que puedan ayudarme, porque es una pena, que por intentar cuadrarlo para todos los navegadores, al final tenga que desistir del carrusel, muy chulo por cierto, y buscar otras opciones.

Una opción que me han comentado, es utilizar 'paneles', que me han dicho que permiten mucha más flexibilidad que los divs. Creo que son elementos que se crean con JavaScript y, bueno, los tomaré en consideración, porque nunca está de más conocer opciones a posibles problemas.

Muchas gracias de antemano

[kseso?]

El problema que me ocurre, es que en Opera se me superponen los paneles, eso sí, respetando el margin, cada uno de los que se solapan, muestran 15px de 'margin' a su izquierda.

!!!
Imposible. Si dejan un margen de 15 píxeles no puedes tener 2 .ca_panel solapados.
Otra cosa es que otro elemento distinto anule ese margen por sus propiedades.

[jesusjj]

OK, tan rotundo no lo voy a rebatir, pero dejo el enlace para que le echen un vistazo

http://www.jbriceno.es

dentro del botón de anunciantes está el carrusel.

Ahora mismo no se ve el botón anunciantes, al menos en algunas versiones de IE, porque me queda un valor por configurar del carrusel, pero, hasta anoche, en Opera sí se veía.

Si necesitan algo más del código, lo copio encantado.

Muchas gracias

[kseso?]

Disculpa Jesús, no quise sonar tan categórico.

Lo que veo con FF es que el script te genera un código para posicionar las imágenes

style="float: none; position: absolute; left: 0px;"

que anula el flotado por css y la posición.
Sin embargo, en el código fuente generado en ópera esto no aparece.

Si en el css aumentas el margen derecho de #carousel .ca_panel a 185px verás que en Op se separan las imágenes con un pequeño espacio entre ellas. En FF la separación lógiacamente ha aumentado y sólo se ven 2 pic simultáneamente.

Creo que es el js lo que causa ese funcionamiento distinto. Pero en este tema ya me declaro ignorante total.

Un saludo.

[jesusjj]

OK, muchas gracias, cuando llegue a casa seguiré investigando y terminaré de ajustar el carrusel, a ver si tocando parte de la configuración, primero, consigo que desaparezca el error de los 'defaultButtons' y encuentro algo que afecte a esto.

Con lo que sea, lo pongo, por si le sirve a alguien.

Saludos

[jesusjj]

Buenas tardes/noches:

Sigo comentando cosillas, que creo que vienen todo de lo mismo. Pongo el carrusel que he utilizado por si sirve de algo: http://www.dynamicdrive.com/dynamici...epcarousel.htm

En Opera sigue viéndose mal, a pesar de modificar en el 'js' lo del 'float', pero ahora tengo un problema mucho más divertido. En IE a veces muestra la parte superior de la web y otras no. Adjunto captura de las 3 versiones que muestra:



Como puede verse, son tres errores:
1- sin panel ni postit
2- sólo postit
3- todo OK (más o menos)

La verdad es que esto es la que más desorientado me tiene y, evidentemente, lo que más me preocupa, ya que la web, según motivo aleatorio, muestre algo o no, me parece raro.

He validado el CSS y me da algunos errores, pero relacionados principalmente con hacks para el IE, así que no tengo nada claro por dónde puede estar. El estar asociado al 'js' del carrusel, en principio lo he descartado, ya que comentando la llamada al script, sigue actuando igual, con lo que me quedo con el error más posible, alguna incoherencia CSS.

A ver si a alguien se le ocurre algo, o le ha pasado algo parecido, que de manera aleatoria, recargando la página (F5), muestre una cosa u otra.

Muchas gracias y, dentro de lo malo, el IE8, no da estos errores.

Saludos

[jesusjj]

Una cosa más, eliminando el panel, hace lo mismo, de forma totalmente aleatoria muestra el postit, con lo que en principio lo achaco definitivamente a algo del CSS:

Código:

html {
	margin: 0px;
	padding: 0px;
}

body {
	background: #ccc url('../../img/back.jpg') repeat-x;
	text-align: center;
	margin: 0px;
	padding: 0px;
	font-family: helvetica,verdana, arial;
	font-size: 10pt;
	font-weight: 100;
	color: #333;
}

p {
	margin-top: 20px;
}

dl {
	font-size: 11pt;
	font-weight: bold;
	border: 1px solid #555;
	padding: 5px;
}

dt {
	font-size: 10pt;
	font-style: normal;
	font-weight: bold;
	padding: .3em;
	padding-left: 15px;
	margin-bottom: 2px;
	background: #ccc;
}

dd {
	font-size: 10pt;
	font-style: italic;
	font-weight: normal;
	padding-bottom: .2em;
}

a {
	text-decoration: none;
	font-weight: bold;
	color: #0000FF;
}

a:hover {
	color: #ff6633;
}

label {
	display: block;
  	margin: .5em 0 0 0;
}

legend {
	font-family: "Courier New";
	font-size: .8em;
	font-weight: bold;
	padding-left: 5px;
	padding-right: 5px;
	border: 1px #555 solid;
	background: #ccc;
	color: #555;
}

fieldset {
	border: 1px solid #555;
	margin: auto;
	margin-bottom: 10px;
	padding: 10px;
	width: 450px;
	clear: both;
}


/* div's */

#contenedor {
	margin: 0px auto 0px auto;
	width: 900px;
	text-align: left;
}

#cabecera {
	height: 180px;
	top: 0;
}

#cuerpo {
	width: 900px;
	min-height: 600px;
	background: #eeeeee;
}

#pie {
	clear: both;
	text-align: center;
	font-size: 0.8em;
	margin-top: 1em;
	width: 100%;
	border-top: 1px #333 solid;
	padding-bottom: 2em;
	line-height: .5em;
}

#relleno {
	clear: both;
	width: 100%;
}

#frase {
	width: 500px;
	margin: auto;
	border: 1px solid #ccc;
	background: #ddd;
	color: #555;
	font-style: oblique;
	font-family: "Times New Roman", serif;
	font-size: 12pt;
	padding: 10px;
}

div form legend {
	font-size: 1.2em;
	color: #333;
	*margin-bottom: .5em;
}


/* Menu y menu pie*/

#menu{
	margin: 0;
	padding-bottom: 1em;
	*padding-bottom: 0em;
	clear: both;
	width: 100%;
	height: 50px;
	background: #444444;
	color: #eee;
}

#menu ul {
	padding-top: 1em;
	margin-bottom: 1.5em;
	text-align: center;
	margin-left: 0;
}

#menu ul li {
	display: inline;
	list-style: none;
	padding-right: 1em;
	font-weight: bold;
	font-size: 1.6em;
	color: #fff;
	vertical-align: middle;
}

#menu ul li a {
	text-decoration: none;
	color: #fff;
}

#menu ul li a:hover {
	color: #ddd;
	border-bottom: 4px #ff6633 solid;
	border-top: 4px #ff6633 solid;
	padding-top: 2px;
}

#pie ul {
	padding-left: 0;
	*padding-top: 1em;
	margin-bottom: 1.5em;
	text-align: center;
	margin-left: 0;
}

#pie ul li {
	display: inline;
	list-style: none;
	padding-left: .5em;
	padding-right: .5em;
	vertical-align: middle;
	border-left: 1px #333 solid;
	text-align: center;
}

#pie ul li a {
	text-decoration: none;
	color: #333;
}

#pie ul li a:hover {
	color: #3366ff;
}

/* Contenido y modulos */

#contenido {
	margin: 2em;
	float: left;
	width: 600px;
	*width: 550px;
}

#modules {
	float: right;
	border-left: 1px #aaa solid;
	width: 200px;
	margin: 2em;
	font-size: 0.8em;
	text-align: center;
}


/* Clases */

.ultimo {
	border-right: 1px #333 solid;
}

.modulo {
	background: #ddd;
	width: 180px;
	margin-left: 1.5em;
	margin-bottom: 1em;
	border: 1px #ccc solid;
	line-height: 1.1em;
	text-align: left;
	padding-left: .2em;
	*padding: .4em;
	color: #555;
}

.modulo fieldset {
	width: 150px;
	*width: 140px;
	margin-top: 10px;
}

.modulo legend {
	border: 1px solid #555;
	padding: 3px;
	font-family: helvetica,verdana, arial;
	font-size: 1em;
}

.modulo form input {
	margin-top: 2px;
	font-size: .9em;
}

.mfecha {
	background: #ff6633;
	color: #fff;
	width: 180px;
	*width: 170px;
	margin-left: 1.5em;
	*margin-left: 1.3em;
	margin-bottom: 1em;
	border: 1px #ccc solid;
	*padding: .7em;
	line-height: .8em;
	font-size: 1.2em;
}

.fecha {
	font-size: 2em;
	font-family: impact, arial black;
}

.reloj {
	font-size: .8em;
	font-weight: bold;
	color: #555;
	background: #ddd;
	margin: auto;
	margin-top: 10px;
	padding: 2px;
	border-left: 1px solid #555;
	border-top: 1px solid #555;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	width: 100px;
}

.intenso {
	font-size: 1.2em;
	font-weight: bold;
}

.banner img {
	border: 0; 
	margin: 3px auto 3px auto; 
	padding: 0;
}

.banner a:hover {
	border-bottom: 2px solid red;
}

.f_left {
	float: left;
	margin-right: 20px;
}

.f_left0 {
	float: left;
}


.f_right {
	float: right;
	margin-left: 20px;
}

.f_right0 {
	float: right;
}

.c_both {
	clear: both;
	margin: auto;
	border: 0;
}

.nombre {
	font-size: 12pt;
	font-weight: bold;
	color: #ff6600;
}

.autor {
	clear: both;
	text-align: right;
	padding-right: 50px;
	font-weight: bold;
}

.nota {
	font-size: 10pt;
	font-weight: normal;
	padding: 0;
	margin: 5px auto 5px auto;
}


/* Panel Anunciantes */

#panel {
	display: none;
	z-index: 110;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 190px;
	background: url('../../img/panel_bg.png') repeat-x;
}

.anunc_btn {
	z-index: 110;
	position: absolute;
	top: 0;
	left: 45%;
	margin: 0;
	padding: 0;
	text-align: center;
}

.btn_slide {
	text-decoration: none;
	text-align: center;
	margin: 0 auto;
	display: block;
	border: 0;
}


#anunc_tbl {
	width: 680px;
	height: 150px;
	margin: auto;
	margin-top: 10px;
}

#anunc_tbl td {
	/*
	filter: alpha(opcaity=125);
	-moz-opacity: 1.250;
	opacity: 1.250;
	*/
	width: 175px;
	height: 150px;
}

#anunc_tbl td img, #anunc_tbl td a {
	border: 0;
	text-decoration: none;
	width: 165px;
	height: 60px;
}

#anunc_tbl .t_ajuste {
	background: none;
	height: auto;
	width: auto;
	border: 0;
	text-align: right;
}

.t_close a {
	padding: 3px;
	background: #000;
	color: #eee;
	font-weight: bold;
	text-decoration: none;
}

.t_close a:hover {
	color: #ff6633;
	background: #000;
}


/* Carrusel */
#carousel {
	position: relative;
	overflow: hidden;
	height: 120px;
	margin-left: 10px;
	margin-right: 10px;
	background: #5B5B5B url('../../img/carousel-bg.png') bottom left repeat-x; 
}

#carousel .belt {
	position: absolute;
	left: 0;
	top: -8px;
	margin: 0 5px 5px 0;
}

#carousel .ca_panel {
	width: 170px;
	float: left;
	overflow: hidden;
	margin: 15px;
	padding: 7px;
	border: 1px solid #5b5b5b;
	background: #383838 url('../../img/carousel-panel-bg.png') bottom left repeat-x;  
}

#carousel .ca_panel .ca_panel_text, #carousel .ca_panel .ca_panel_text a {
	color: #eee;
	font-size: .9em;
	text-align: center;
	text-decoration: none;
	padding-top: 15px;
}

#carousel .ca_panel .ca_panel_text a:hover {
	text-decoration: underline;
}

.ca_arrow {
	width: 5%;
}

/* Menu Tab */

#tabbed_box {
	margin: 0px auto 0px 0px;
	width: 400px;
}

/*
.tabbed_area {
	border: 1px solid #aaa;
	background: #ccc;
	padding: 8px;
}
*/

#tabs ul {
	margin: 0px;
	padding: 0px;
	margin-top: 5px;
	margin-bottom: 6px;
}

#tabs ul li {
	list-style: none;
	display: inline;
}

#tabs ul li a {
	background-color: #464c54;
	color: #ccc;
	padding: 8px 14px 8px 14px;
	text-decoration: none;
	font-size: 9px;
	font-family: Verdana, Geneva, sans-serif;
	font-weight: bold;
	text-transform: uppercase;
	border-left: 1px solid #aaa;
	border-top: 1px solid #aaa;
	border-right: 1px solid #aaa;
}

#tabs ul li a:hover {
	background-color: #2f343a;
	border-color: #aaa;;
	color: #eee;
}

#tabs li.ui-tabs-selected a, #tabs li.ui-tabs-selected a:hover {
	background-color: #ddd;
	color: #333;
	border-left: 1px solid #aaa;
	border-top: 1px solid #aaa;
	border-right: 1px solid #aaa;
}

.content {
	background-color: #ddd;
	padding: 10px;
	border: 1px solid #aaa;
}

.content ul li:last-child {
	border-bottom: none;
}

.ui-tabs-hide {
	display: none;
}


/* Capa Promocion */

#promo {
	position: absolute;
	z-index: 3;
	top: 5px;
	right: 200px;
}

#promo img, #promo a {
	text-decoration: none;
	border: 0;
}

#wboxes {
	display: none;
	position: absolute;
	z-index: 100;
	top: 0;
}

[jesusjj]

Buenas de nuevo, solucionado el tema de IE, al menos en IE8 modo compatibilidad.

El tema radicaba en dónde llamaba a los elementos y alguna rareza de estas del IE con los z-index.

Al final la solución ha sido poner cada cosa en su sitio, lógico, ¿no?

Para mostrar tanto el postit como el panel, llamaba a unas funciones php en las que tenía definidos los elementos. Éstos, confiando en el 'position: absolute;' los puse un poco donde lo consideraba más cómodo a la hora de seguir el código php y las llamadas a las diferentes funciones 'visuales'.

Tras pelearme con quitar llamadas a JS, reorganizar los CSS, dividirlos en un montón de archivos, uno casi por elemento 'extra', al final he decidido colocar la llamada a estas funciones en donde las hubiese puesto si hubiese picado todo el HTML de corrido, es decir, antes de la barra de menú e inmediatamente después de la etiqueta de apertura del 'body'. Con esto, he pulsado cienes de veces F5 y parece que así le mola, con lo que, por desgracia, tendré que volver a desconfiar del 'position: absolute;' o a intentar a utilizarlo lo más preciso posible, gracias a nuestro gran amigo IE.

Vuelvo a mi pelea con el Opera, asunto con el que iniciaba este hilo.

Saludos.