Tema: mi diseño se rompe en los diferentes navegadores excepto en Google Chrome
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 15/11/2013, 12:18
edibmx
 
Fecha de Ingreso: octubre-2013
Ubicación: COLOMBIA
Mensajes: 28
Antigüedad: 11 años, 1 mes
Puntos: 0
mi diseño se rompe en los diferentes navegadores excepto en Google Chrome
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 original
  1. body {
  2.     background:url(img_index_la_que_estaba.jpg) center center;
  3.     background-attachment:fixed;
  4.     background-repeat: no-repeat;
  5.     background-size: 99%;
  6.     font-family:"helvetica", arial;
  7.     -webkit-background-size: cover;
  8.     -moz-background-size: cover;
  9.     -o-background-size: cover;
  10.     background-size: cover;
  11. }
  12. #contenido_100 {
  13.     margin: 0 auto;
  14.     width:99%;
  15.     height:99%;
  16.     background-size: 99%;
  17.     position: relative;
  18.     height: 0;
  19. }
  20. /*background-size: cover;*/
  21.  #logo_amauta_ppal {
  22.     margin-top: 60px;
  23.     margin-left: 20px;
  24.     width: 180px;
  25.     height:220px;
  26.     padding: 10px;
  27.     background-color:#7AC6E4;
  28.     border-radius: 5px;
  29.     box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
  30.     position:fixed;
  31. }
  32. #logo_amauta_inside {
  33.     margin:0 auto;
  34.     width: 160px;
  35.     height:200px;
  36.     padding: 10px;
  37.     background-color:#ffffff;
  38.     border-radius: 5px;
  39. }
  40. #section_3
  41. /*es solo la capa de color AZUL del centro*/
  42.  {
  43.     margin:0 auto;
  44.     width:470px;
  45.     height: 900px;
  46.     background-color:#7AC6E4;
  47.     /*#8fd700; el verde vacano que estaba antes */
  48.     border-radius: 20px;
  49.     box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
  50.     margin-top: 60px;
  51.     margin-left:280px;
  52.     padding-top:1px;
  53.     position:fixed;
  54. }
  55. #box_10
  56. /*la que contiene los scripts_con_fotos*/
  57.  {
  58.     padding-top:15px;
  59.     padding-left: 15px;
  60.     padding-right: 23px;
  61.     padding-bottom: 20px;
  62.     width:392px;
  63.     height: 225px;
  64.     background-color:#ffffff;
  65.     color:#000002;
  66.     margin:0 auto;
  67.     text-align: center;
  68.     border-top-left-radius:20px;
  69.     border-top-right-radius: 20px;
  70.     margin-top: 20px;
  71. }
  72. #footer_inside_fotos {
  73.     padding-top: 10px;
  74.     padding-bottom: 2px;
  75.     padding-right: 20px;
  76.     margin-top: 150px;
  77.     width:380px;
  78.     height: 50px;
  79.     text-align: right;
  80.     position: relative;
  81.     text-decoration:none;
  82.     background-color:rgba(0, 0, 0, 0.3);
  83.     text-decoration: underline;
  84.     position: absolute;
  85. }
  86. #section_2
  87. /*la capa mas interna del centro  b */
  88.  {
  89.     padding-left: 20px;
  90.     padding-right: 20px;
  91.     padding-bottom: 10px;
  92.     width:392px;
  93.     height: 400px;
  94.     background-color:#ffffff;
  95.     color:#000002;
  96.     text-align: left;
  97.     margin: 0 auto;
  98.     margin-top:20px;
  99. }
  100. footer {
  101.     margin-top: 20px;
  102.     background-color: #ffffff;
  103. }
  104. #footer_general {
  105.     width: 430px;
  106.     height: 140px;
  107.     border-bottom-left-radius:20px;
  108.     border-bottom-right-radius: 20px;
  109.     margin-top: 20px;
  110.     margin-left: 20px;
  111.     font-family:"helvetica", arial;
  112.     font-size: 8px;
  113.     text-align:center;
  114. }
  115. footer ul li {
  116.     display: inline-block;
  117.     padding-left:1px;
  118.     padding-right:1px;
  119. }
  120. #ul_sitios_recomendados {
  121.     list-style:none;
  122.     text-decoration: none;
  123. }
  124. #ul_footer_2 {
  125.     list-style:none;
  126. }
  127. #box_footer_60 {
  128.     background-color:#BDE0EE;
  129.     width:71px;
  130.     height:66px;
  131.     border-radius: 4px;
  132.     padding: 4px;
  133.     margin-top:10px;
  134. }
  135. #box_footer_62 {
  136.     background-color:#ffffff;
  137.     width:65px;
  138.     height:60px;
  139.     border-radius: 4px;
  140.     margin-top:3px;
  141.     margin-left:3px;
  142.     background-image:-moz-linear-gradient(0% 22px 20deg, #ffffff, #999);
  143.     background-image:-webkit-gradient(linear, 0% 0%, 0% 50%, from(#999), to(#ffffff));
  144. }
  145. #box_footer_70 {
  146.     background-color:#BDE0EE;
  147.     width:71px;
  148.     height:66px;
  149.     border-radius: 4px;
  150.     padding: 4px;
  151.     margin-left:50px;
  152.     margin-right:50px;
  153.     margin-top:10px;
  154. }
  155. #box_footer_72 {
  156.     background-color:#ffffff;
  157.     width:65px;
  158.     height:60px;
  159.     border-radius: 4px;
  160.     margin-top:3px;
  161.     margin-left:3px;
  162.     background-image:-moz-linear-gradient(0% 22px 20deg, #ffffff, #999);
  163.     background-image:-webkit-gradient(linear, 0% 0%, 0% 50%, from(#999), to(#ffffff));
  164. }
  165. #box_footer_80 {
  166.     background-color:#BDE0EE;
  167.     width:71px;
  168.     height:66px;
  169.     border-radius: 4px;
  170.     padding: 4px;
  171.     margin-right:40px;
  172.     margin-top:10px;
  173. }
  174. #box_footer_82 {
  175.     background-color:#ffffff;
  176.     width:65px;
  177.     height:60px;
  178.     border-radius: 4px;
  179.     margin-top:3px;
  180.     margin-left:3px;
  181.     background-image:-moz-linear-gradient(0% 22px 20deg, #ffffff, #999);
  182.     background-image:-webkit-gradient(linear, 0% 0%, 0% 50%, from(#999), to(#ffffff));
  183. }
  184. #box_footer_90 {
  185.     background-color:#BDE0EE;
  186.     width:375px;
  187.     height:40px;
  188.     border-radius: 4px;
  189.     margin-left:25px;
  190.     padding-top:1px;
  191. }
  192. /* 
  193.   padding_bottom:5px;
  194.   padding-left:8px;*/
  195.  #box_footer_92 {
  196.     background-color:#ffffff;
  197.     width:360px;
  198.     height:24px;
  199.     border-radius: 4px;
  200.     background-image:-moz-linear-gradient(0% 22px 20deg, #ffffff, #999);
  201.     background-image:-webkit-gradient(linear, 0% 0%, 0% 50%, from(#999), to(#ffffff));
  202.     margin-left:7px;
  203. }
  204. #redes_contenedor {
  205.     margin:0 auto;
  206.     width: 210px;
  207.     height: 400px;
  208.     margin-top:60px;
  209.     margin-left: 780px;
  210.     position:fixed;
  211. }
  212. #twitter_feed {
  213.     width: 190px;
  214.     height: 210px;
  215.     background-color:#7AC6E4;
  216.     box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
  217.     border-radius: 5px;
  218.     margin-top: 1px;
  219.     padding-left:10px;
  220.     padding-top:10px;
  221. }
  222. #footer_social
  223. /*la capa de azul del fondo de los botones de redes sociales*/
  224.  {
  225.     width:190px;
  226.     height:50px;
  227.     background-color:#7AC6E4;
  228.     box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
  229.     margin-top:10px;
  230.     border-top-right-radius: 8px;
  231.     border-bottom-left-radius: 8px;
  232.     border-top-left-radius: 8px;
  233.     border-bottom-right-radius: 8px;
  234.     padding-left:8px;
  235.     padding-top:8px;
  236. }
  237. #social_3
  238. /*la capa blanca mas interna sobre la que estan los botones de las redes sociales*/
  239.  {
  240.     width:184px;
  241.     height:42px;
  242.     background-image:-moz-linear-gradient(0% 22px 20deg, #ffffff, #999);
  243.     background-image:-webkit-gradient(linear, 0% 0%, 0% 50%, from(#999), to(#ffffff));
  244.     border-radius: 8px;
  245. }
  246. .botones_float {
  247.     dispay:inline-block;
  248.     float:left;
  249.     clear:none;
  250. }
  251. #social_6 {
  252.     width:34px;
  253.     height:34px;
  254.     float:left;
  255.     clear:none;
  256.     margin-right:10px;
  257.     margin-left:20px;
  258.     margin-top:5px;
  259. }
  260. #social_8 {
  261.     width:34px;
  262.     height:34px;
  263.     float:left;
  264.     clear:none;
  265.     margin-right:10px;
  266.     margin-left:10px;
  267.     margin-top:5px;
  268. }
  269. #social_10 {
  270.     width:34px;
  271.     height:34px;
  272.     float:left;
  273.     clear:none;
  274.     margin-right:10px;
  275.     margin-left:10px;
  276.     margin-top:5px;
  277. }
  278. nav {
  279.     position: fixed;
  280.     display: block;
  281.     margin: 0 auto;
  282.     margin-top: 5px;
  283.     margin-left:1px;
  284.     margin-right:1px;
  285.     border: 1px solid #222;
  286.     background-color: #7AC6E4;
  287.     font: 15px Tahoma, sans-serif;
  288.     font-weight: bold;
  289.     z-index:2;
  290. }
  291. nav ul {
  292.     padding: 1px;
  293.     margin: 1px;
  294. }
  295. nav ul:after {
  296.     content:".";
  297.     display: block;
  298.     height: 0;
  299.     clear: both;
  300.     visibility: hidden;
  301. }
  302. nav li {
  303.     position: relative;
  304.     float: left;
  305.     list-style-type: none;
  306. }
  307. nav li a {
  308.     display: block;
  309.     padding: 10px 6.3px;
  310.     border-left: 1px solid #999;
  311.     border-right: 1px solid #222;
  312.     color: #000;
  313.     text-decoration:none;
  314. }
  315. nav li a:focus {
  316.     outline: none;
  317.     text-decoration: underline;
  318. }
  319. nav li:first-child a {
  320.     border-left: none;
  321. }
  322. nav li.ultimo a {
  323.     border-right: none;
  324. }
  325. nav li:hover ul {
  326.     display:block;
  327. }
  328. nav a span {
  329.     display: block;
  330.     float: right;
  331.     margin-left: 1px;
  332. }
  333. nav ul ul {
  334.     display: none;
  335.     width: 100%;
  336.     position: absolute;
  337.     left: 0;
  338.     background: #7AC6E4;
  339. }
  340. nav ul ul li {
  341.     float: none;
  342. }
  343. nav ul ul a {
  344.     padding: 5px 10px;
  345.     border-left: none;
  346.     border-right: none;
  347. }
  348. nav ul ul a:hover {
  349.     background-color: #6BE2FF;
  350. }
  351. nav {
  352.     border-radius:4px;
  353.     box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
  354.     background-image:-moz-linear-gradient(0% 22px 90deg, #7AC6E4, #999);
  355.     background-image:-webkit-gradient(linear, 0% 0%, 0% 20%, from(#999), to(#7AC6E4));
  356. }
  357. nav li:hover {
  358.     background-image:-moz-linear-gradient(0% 100px 90deg, #999, #7AC6E4);
  359.     background-image:-webkit-gradient(linear, 0% 0%, 0% 70%, from(#7AC6E4), to(#999));
  360. }
  361. nav ul ul {
  362.     border-bottom-left-radius:4px;
  363.     border-bottom-right-radius:4px;
  364.     box-shadow:2px 2px 2px rgba(0, 0, 0, .8);
  365.     background-color:rgba(0, 214, 255, 0.3);
  366. }
  367. nav ul ul li {
  368.     border-left:1px solid rgba(0, 0, 0, 0.1);
  369.     border-right:1px solid rgba(0, 0, 0, 0.1);
  370. }
  371. nav ul ul li.ultimo {
  372.     border-left:1px solid rgba(0, 0, 0, 0.1);
  373.     border-bottom:1px solid rgba(0, 0, 0, 0.1);
  374.     border-bottom-left-radius:4px;
  375.     border-bottom-right-radius:4px;
  376. }
  377. nav ul ul a:hover {
  378.     background-color:rgba(84, 231, 62, 0.8);
  379. }

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!!
Última edición por pzin; 15/11/2013 a las 12:22 Razón: formato código