Los flotadores se estropean en los navegadores Safari
Pregunta
Tengo un sitio que hice muy rápido y que utiliza elementos flotantes para mostrar diferentes secciones de contenido.El contenido flotante y el contenido que tiene un margen adicional aparecen bien en FF/IE, pero en Safari uno de los divs está completamente oculto.He intentado cambiar a padding
y position:relative
, pero nada me ha funcionado.Si saco el código para mostrarlo a la derecha, aparece nuevamente pero debajo del contenido flotante.
La sección principal de CSS que parece estar causando el problema es:
#settings{
float:left;
}
#right_content{
margin-top:20px;
margin-left:440px;
width:400px;
}
Esto me da el mismo resultado ya sea que especifique un tamaño para el div #settings o no.Cualquier idea sería apreciada.
El sitio está disponible en: http://frickinsweet.com/tools/Theme.mvc.aspx para ver el código fuente.
Solución
Creo que el error radica en el margen que genera el selector de color.Guardé la página y eliminé ese código para el selector de color y se muestra bien en IE/FF/SF.
Otros consejos
¿Has intentado hacer flotar el div #right_content hacia la derecha?
#right_content{
float: right;
margin-top: 20px;
width: 400px;
}
Lo siento, debería haber mencionado eso también.Intenté hacer flotar ese contenido hacia la derecha y, además, intenté hacerlo flotar hacia la izquierda y establecer la posición pensando que ambos divs comenzarían en la izquierda: 0, donde establecer el margen de la derecha lo movería.
Gracias
Algunas cosas que debes arreglar de antemano:
- Su
<style>
la etiqueta está en<body>
, cuando pertenece a<head>
Tienes un error tipográfico "real" en uno de tus estilos en línea:
<a href="http://feeds.feedburner.com/ryanlanciaux" style="position:realtive; top:-6px;">
Intenta que tu página validar;esto debería facilitar mucho la depuración de los problemas reales.