mi diseño se rompe en los diferentes navegadores excepto en Google Chrome

edibmx · #1 (**permalink**) 15/11/2013, 12:18

no se si les ha pasado pero hace poco empece a crear una web usando html y css ya la monte en el servidor y cuando entro a verla desde en google crome y ff se ve perfecto mi diseño pero cuando otras personas entran desde otros equipos en ff se descuadra y se muestra todo apilado hacia la izquierda exepto la botonera de navegacion

este es mi css

Código CSS:

Ver originalbody {
    background:url(img_index_la_que_estaba.jpg) center center;
    background-attachment:fixed;
    background-repeat: no-repeat;
    background-size: 99%;
    font-family:"helvetica", arial;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
#contenido_100 {
    margin: 0 auto;
    width:99%;
    height:99%;
    background-size: 99%;
    position: relative;
    height: 0;
}
/*background-size: cover;*/
 #logo_amauta_ppal {
    margin-top: 60px;
    margin-left: 20px;
    width: 180px;
    height:220px;
    padding: 10px;
    background-color:#7AC6E4;
    border-radius: 5px;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
    position:fixed;
}
#logo_amauta_inside {
    margin:0 auto;
    width: 160px;
    height:200px;
    padding: 10px;
    background-color:#ffffff;
    border-radius: 5px;
}
#section_3
/*es solo la capa de color AZUL del centro*/
 {
    margin:0 auto;
    width:470px;
    height: 900px;
    background-color:#7AC6E4;
    /*#8fd700; el verde vacano que estaba antes */
    border-radius: 20px;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
    margin-top: 60px;
    margin-left:280px;
    padding-top:1px;
    position:fixed;
}
#box_10
/*la que contiene los scripts_con_fotos*/
 {
    padding-top:15px;
    padding-left: 15px;
    padding-right: 23px;
    padding-bottom: 20px;
    width:392px;
    height: 225px;
    background-color:#ffffff;
    color:#000002;
    margin:0 auto;
    text-align: center;
    border-top-left-radius:20px;
    border-top-right-radius: 20px;
    margin-top: 20px;
}
#footer_inside_fotos {
    padding-top: 10px;
    padding-bottom: 2px;
    padding-right: 20px;
    margin-top: 150px;
    width:380px;
    height: 50px;
    text-align: right;
    position: relative;
    text-decoration:none;
    background-color:rgba(0, 0, 0, 0.3);
    text-decoration: underline;
    position: absolute;
}
#section_2
/*la capa mas interna del centro  b */
 {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 10px;
    width:392px;
    height: 400px;
    background-color:#ffffff;
    color:#000002;
    text-align: left;
    margin: 0 auto;
    margin-top:20px;
}
footer {
    margin-top: 20px;
    background-color: #ffffff;
}
#footer_general {
    width: 430px;
    height: 140px;
    border-bottom-left-radius:20px;
    border-bottom-right-radius: 20px;
    margin-top: 20px;
    margin-left: 20px;
    font-family:"helvetica", arial;
    font-size: 8px;
    text-align:center;
}
footer ul li {
    display: inline-block;
    padding-left:1px;
    padding-right:1px;
}
#ul_sitios_recomendados {
    list-style:none;
    text-decoration: none;
}
#ul_footer_2 {
    list-style:none;
}
#box_footer_60 {
    background-color:#BDE0EE;
    width:71px;
    height:66px;
    border-radius: 4px;
    padding: 4px;
    margin-top:10px;
}
#box_footer_62 {
    background-color:#ffffff;
    width:65px;
    height:60px;
    border-radius: 4px;
    margin-top:3px;
    margin-left:3px;
    background-image:-moz-linear-gradient(0% 22px 20deg, #ffffff, #999);
    background-image:-webkit-gradient(linear, 0% 0%, 0% 50%, from(#999), to(#ffffff));
}
#box_footer_70 {
    background-color:#BDE0EE;
    width:71px;
    height:66px;
    border-radius: 4px;
    padding: 4px;
    margin-left:50px;
    margin-right:50px;
    margin-top:10px;
}
#box_footer_72 {
    background-color:#ffffff;
    width:65px;
    height:60px;
    border-radius: 4px;
    margin-top:3px;
    margin-left:3px;
    background-image:-moz-linear-gradient(0% 22px 20deg, #ffffff, #999);
    background-image:-webkit-gradient(linear, 0% 0%, 0% 50%, from(#999), to(#ffffff));
}
#box_footer_80 {
    background-color:#BDE0EE;
    width:71px;
    height:66px;
    border-radius: 4px;
    padding: 4px;
    margin-right:40px;
    margin-top:10px;
}
#box_footer_82 {
    background-color:#ffffff;
    width:65px;
    height:60px;
    border-radius: 4px;
    margin-top:3px;
    margin-left:3px;
    background-image:-moz-linear-gradient(0% 22px 20deg, #ffffff, #999);
    background-image:-webkit-gradient(linear, 0% 0%, 0% 50%, from(#999), to(#ffffff));
}
#box_footer_90 {
    background-color:#BDE0EE;
    width:375px;
    height:40px;
    border-radius: 4px;
    margin-left:25px;
    padding-top:1px;
}
/* 
  padding_bottom:5px;
  padding-left:8px;*/
 #box_footer_92 {
    background-color:#ffffff;
    width:360px;
    height:24px;
    border-radius: 4px;
    background-image:-moz-linear-gradient(0% 22px 20deg, #ffffff, #999);
    background-image:-webkit-gradient(linear, 0% 0%, 0% 50%, from(#999), to(#ffffff));
    margin-left:7px;
}
#redes_contenedor {
    margin:0 auto;
    width: 210px;
    height: 400px;
    margin-top:60px;
    margin-left: 780px;
    position:fixed;
}
#twitter_feed {
    width: 190px;
    height: 210px;
    background-color:#7AC6E4;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
    border-radius: 5px;
    margin-top: 1px;
    padding-left:10px;
    padding-top:10px;
}
#footer_social
/*la capa de azul del fondo de los botones de redes sociales*/
 {
    width:190px;
    height:50px;
    background-color:#7AC6E4;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
    margin-top:10px;
    border-top-right-radius: 8px;
    border-bottom-left-radius: 8px;
    border-top-left-radius: 8px;
    border-bottom-right-radius: 8px;
    padding-left:8px;
    padding-top:8px;
}
#social_3
/*la capa blanca mas interna sobre la que estan los botones de las redes sociales*/
 {
    width:184px;
    height:42px;
    background-image:-moz-linear-gradient(0% 22px 20deg, #ffffff, #999);
    background-image:-webkit-gradient(linear, 0% 0%, 0% 50%, from(#999), to(#ffffff));
    border-radius: 8px;
}
.botones_float {
    dispay:inline-block;
    float:left;
    clear:none;
}
#social_6 {
    width:34px;
    height:34px;
    float:left;
    clear:none;
    margin-right:10px;
    margin-left:20px;
    margin-top:5px;
}
#social_8 {
    width:34px;
    height:34px;
    float:left;
    clear:none;
    margin-right:10px;
    margin-left:10px;
    margin-top:5px;
}
#social_10 {
    width:34px;
    height:34px;
    float:left;
    clear:none;
    margin-right:10px;
    margin-left:10px;
    margin-top:5px;
}
nav {
    position: fixed;
    display: block;
    margin: 0 auto;
    margin-top: 5px;
    margin-left:1px;
    margin-right:1px;
    border: 1px solid #222;
    background-color: #7AC6E4;
    font: 15px Tahoma, sans-serif;
    font-weight: bold;
    z-index:2;
}
nav ul {
    padding: 1px;
    margin: 1px;
}
nav ul:after {
    content:".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
nav li {
    position: relative;
    float: left;
    list-style-type: none;
}
nav li a {
    display: block;
    padding: 10px 6.3px;
    border-left: 1px solid #999;
    border-right: 1px solid #222;
    color: #000;
    text-decoration:none;
}
nav li a:focus {
    outline: none;
    text-decoration: underline;
}
nav li:first-child a {
    border-left: none;
}
nav li.ultimo a {
    border-right: none;
}
nav li:hover ul {
    display:block;
}
nav a span {
    display: block;
    float: right;
    margin-left: 1px;
}
nav ul ul {
    display: none;
    width: 100%;
    position: absolute;
    left: 0;
    background: #7AC6E4;
}
nav ul ul li {
    float: none;
}
nav ul ul a {
    padding: 5px 10px;
    border-left: none;
    border-right: none;
}
nav ul ul a:hover {
    background-color: #6BE2FF;
}
nav {
    border-radius:4px;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
    background-image:-moz-linear-gradient(0% 22px 90deg, #7AC6E4, #999);
    background-image:-webkit-gradient(linear, 0% 0%, 0% 20%, from(#999), to(#7AC6E4));
}
nav li:hover {
    background-image:-moz-linear-gradient(0% 100px 90deg, #999, #7AC6E4);
    background-image:-webkit-gradient(linear, 0% 0%, 0% 70%, from(#7AC6E4), to(#999));
}
nav ul ul {
    border-bottom-left-radius:4px;
    border-bottom-right-radius:4px;
    box-shadow:2px 2px 2px rgba(0, 0, 0, .8);
    background-color:rgba(0, 214, 255, 0.3);
}
nav ul ul li {
    border-left:1px solid rgba(0, 0, 0, 0.1);
    border-right:1px solid rgba(0, 0, 0, 0.1);
}
nav ul ul li.ultimo {
    border-left:1px solid rgba(0, 0, 0, 0.1);
    border-bottom:1px solid rgba(0, 0, 0, 0.1);
    border-bottom-left-radius:4px;
    border-bottom-right-radius:4px;
}
nav ul ul a:hover {
    background-color:rgba(84, 231, 62, 0.8);
}

bueno les comento ademas que es una web para una fundación sin animo de lucro que apoya a chicos con dificultades en las escuelas y quiero aportar mi granito de arena a la causa construyendoles una buena web

creen que sea necesario poner el html? cualquier observacion es bienvenida!!

C2am · #2 (**permalink**) 15/11/2013, 13:06

Pon la dirección para ver online el problema.
Y sí, siempre ten presente que debes mostrar el css y el html donde se aplica ese estilo.

edibmx · #3 (**permalink**) 15/11/2013, 15:10

<!doctype html>
<html lang="es">

<head>

<meta charset='utf-8'>
<link rel="stylesheet" href="stylesheetindex.css">
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js">
</script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.0.6-development-only.js"> </script>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://modernizr.com/downloads/modernizr-latest.js"></script>

<title>FUNDACIÓN AMAUTA Cosechando Vidas</title>

</head>

<body>
<div id="contenido_100">

<nav id="MenuNav">
<ul>

<li><a href="index.html" title="inicio">Inicio</a></li>

<li><a>Quienes somos</a>
<ul>
<li><a href="quienes_somos.html">quienes somos</a></li>
<li><a href="vision_y_mision.html">visión y misión</a></li>
<li><a href="objetivos.html">objetivos</a></li>
<li class="ultimo"><a href="donde_trabajamos.html">donde trabajamos</a></li>
</ul>
</li>

<li><a>Nuestros proyectos</a>
<ul>
<li><a href="tareas_dirigidas.html">tareas dirigidas</a></li>
<li><a href="biblioteca_amauta.html">biblioteca amauta</a></li>
<li><a href="refuerzo_academico.html">refuerzo academico</a></li>
<li><a href="actividades_de_formacion_educativa_y_cultura l.html">actividades de formacion educativa y cultural</a></li>
<li class="ultimo"><a href="amigos_de_la_lectura.html">amigos de la lectura</a></li>
</ul>
</li>

<li><a>Quieres apoyarnos</a>
<ul>
<li><a href="donacion_en_linea.html">donación en linea</a></li>
<li><a href="bonos.html">bonos</a></li>
<li><a href="voluntariado.html">voluntariado</a></li>
<li><a href="donaciones_en_especie.html">donaciones en especie</a></li>
<li class="ultimo"><a href="articulos_utiles.html">articulos utiles</a></li>
</ul>
</li>

<li><a>Desarrollo e impacto</a>
<ul>
<li><a href="desarrollo_de_cada_proyecto.html">desarrollo de cada proyecto</a></li>
<li class="ultimo"><a href="proyeccion.html">proyección</a></li>
</ul>
</li>

<li><a>Noticias</a>
<ul>
<li><a href="noticias.html">Noticias</a></li>
</ul>
</li>

<li><a>Para saber más</a>
<ul>
<li><a href="libros_y_articulos_recomendados.html">libros y articulos recomendados</a></li>
<li><a href="paginas_y_enlaces_educativos.html">páginas y enlaces educativos</a></li>
<li><a href="lecturas_y_materiales_amigos_de_la_lectura.h tml">lecturas y materiales amigos de la lectura</a></li>
<li class="ultimo"><a href="publicaciones_amauta_cosechando_vidas.html"> publicaciones amauta cosechando vidas</a></li>
</ul>
</li>

<li><a>Contáctenos</a>
<ul>
<li><a href="contactenos.html">Contáctenos</a></li>
</ul>
</li>
</ul>
</nav>

<article id="logo_amauta_ppal">
<article id="logo_amauta_inside">
<a href="index.html" title="Ir a la pagina de INICIO"><img src="logo_amauta.png" width=160 height=200></a>
</article>
</article>

<div id="section_3" class="cajas_float150"> 

<div id="box_10">
<footer id="footer_inside_fotos">
<a href="ubicacion_2.html" title="Ver nuestra ubicación exacta">Ver nuestra ubicación exacta</a>
</footer>
<article >

<img src="1.png" name="img" width=400 hight=200>
<script language="JavaScript" type="text/javascript">

var num_img=2;

function cambiar()
{

imagen=new Image
imagen.src=num_img + ".png"
document.images['img'].src=imagen.src //se le asigna el valor a la imagen 'IMG'

num_img=num_img+1;

if (num_img>4)
{
num_img=1
}
}

setInterval("cambiar()",2000);

var num_img=2;
</script>
</article>
</div>

<article id="section_2">
</article>

<footer id="footer_general">
<ul>
<li>
<article id="box_footer_60">
<article id="box_footer_62">
<a href="http://www.cccartagena.org.co/"><img src="c_c_c.png" width=65 height=60 title="Camara de comercio de Cartagena"></a>
</article>
</article>
</li>

<li>
<article id="box_footer_70">
<article id="box_footer_72">
<a href="http://www.cartagena.gov.co/"><img src="alcaldia.png" width=65 height=60 title="Alcaldia Mayor de Cartagena"></a>
</article>
</article>
</li>

<li>
<article id="box_footer_80">
<article id="box_footer_82">
<a href="http://www.bolivar.gov.co/"><img src="logo_gobernacion.png" width=65 height=60 title="Gobernación de Bolivar"></a>
</article>
</article>
</li>
</ul>
<article id="box_footer_90">
<a href="contactenos.html" title="Ir a la página de CONTACTO"><article id="box_footer_92">
<ul id="ul_footer_2"><li>Carrera 14 N° 52 - 40 - Barrio Torices, Teléfonos: +57-6566621 +57-300-6987383</li>
</ul>
</a>
</article>
</article>
</footer>

</div> 

<div id="redes_contenedor">

<article id="twitter_feed">
<a class="twitter-timeline" href="https://twitter.com/edibmx" data-widget-id="398588353014009856" width=160 height=190>Tweets por @edibmx</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementB yId(id)){js=d.createElement(s);js.id=id;js.src=p+" ://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}} (document,"script","twitter-wjs");</script>
</article>

<div id="footer_social"> 
<article id="social_3"> 

<article id="social_6">
<a class="botones_float" href="https://www.facebook.com/fundacionamauta.cosechandovidas" target="_blank"><img alt="siguenos en facebook" height="32" src="http://2.bp.blogspot.com/-q_Tm1PpPfHo/UiXnJo5l-VI/AAAAAAAABzU/MKdrVYZjF0c/s1600/face.png" title="siguenos en facebook" width="32" /></a>
</article>
<article id="social_8">
<a class="botones_float" href="URL-Google+" target="_blank"><img alt="siguenos en Google+" height="32" src="http://1.bp.blogspot.com/-1W0m8yLdJtU/UidI-7j2BnI/AAAAAAAAB-Y/2wH5M_ZpXO8/s1600/plusone.png" title="siguenos en Google+" width="32" /></a>
</article>

<article id="social_10">
<a class="botones_float" href="URL-Instagram" target="_blank"><img alt="sígueme en Instagram" height="32" src="http://2.bp.blogspot.com/-kQop92g4NsM/UidPJ06ER1I/AAAAAAAACAA/0mj0jK5hhXM/s1600/instagram2.png" title="sígueme en Instagram" width="32" /></a>
</article>
</article> 

</div> 

</article>
</div> 

</div>


</body>

<script type="text/javascript">
function onclick ()
</script>
</html>

edibmx · #4 (**permalink**) 15/11/2013, 15:12

ok gracias acabo de dejar el html

cualquier sugerencia es bienvenida

la dirección es fundación amauta . org

desde otros equipos se ve las tres cajas del div principal apiladas a la izquierda en la parte superior?

nota: tengo el servidor contratado con banahosting y uso el cpanel accelerated 2
aqui esta el html

C2am · #5 (**permalink**) 15/11/2013, 18:37

El enlace de edibmx: http://www.fundacionamauta.org/

Creo que tus problemas se deben al uso de position: fixed; o position: absolute; etc.
Deberías estudiar un poquito más el uso recomendado de cada "position".

En general lo que se deja fijo (position: fixed;) es el menú, para que no desaparezca con el scroll, pero lo usas en las secciones principales y no en el menú.

Revisa tu maquetación.
Revisa además que tienes algunos errores de tipeo: dispay en vez de display, y eso sin duda hace que algo se rompa.

edibmx · #6 (**permalink**) 28/12/2013, 13:54

gracias a todos

el problema se arreglo al restaurar Safari e ingresar nuevamente

ya esta todo biien.

gracias por la ayuda y las sugerencias!!