Foros del Web » Creando para Internet » CSS »

Problema al alinear div al centro, en IE7

Estas en el tema de Problema al alinear div al centro, en IE7 en el foro de CSS en Foros del Web. Muy buenas, que tal :) ? Bueno hice un diseño y lo pasé a Joomla, pero como siempre, todo iba bien hasta que apareció el ...
  #1 (permalink)  
Antiguo 11/05/2010, 03:22
Avatar de Jask  
Fecha de Ingreso: abril-2006
Ubicación: Madrid
Mensajes: 768
Antigüedad: 11 años, 8 meses
Puntos: 15
De acuerdo Problema al alinear div al centro, en IE7

Muy buenas, que tal :) ?

Bueno hice un diseño y lo pasé a Joomla, pero como siempre, todo iba bien hasta que apareció el maldito IE. Bueno estoy probando cosas en IE8 y le doy a vista de compatibilidad para ver como me quedaría, y me deforma casi toda la web, y no tengo manera de centrar el div :S ! A ver si alguien me puede ayudar porque llevo todo un día y no hay manera y pff.. es un caos ya..

Os dejo la web:

http://pruebas.areainnova.es/felipev/

Y aquí el código CSS:

Código CSS:
Ver original
  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4.     border: 0;
  5. }
  6.  
  7. body, html{
  8.     background-image: url(../images/bg.jpg);
  9.     font-family: Verdana, Geneva, sans-serif;
  10.     font-size: 14px;
  11.     width:981px;
  12.     margin:0 auto;
  13.     /* Hack para IE * */
  14.     *margin:0 auto 0 auto;
  15.     *text-align:left;
  16.     height:100%;
  17. }
  18.  
  19. .sombra_superior{
  20.     display:block;
  21.     height:23px;
  22.     width:980px;
  23.     background-image:url(../images/f5_sombra_superior.jpg);
  24. }
  25.  
  26. .borde_izda{
  27.     height:227px;
  28.     width:56px;
  29.     float:left;
  30.     background-image:url(../images/f5_borde_izda.jpg);
  31.     display:block;
  32. }
  33.  
  34. .contenido{
  35.     width:878px;
  36.     float:left;
  37.     display:block;
  38. }
  39.  
  40. .borde_dcha{
  41.     height:227px;
  42.     width:46px;
  43.     float:left;
  44.     background-image:url(../images/f5_borde_dcha.jpg);
  45.     display:block;
  46.     position:relative;
  47.     right:4px;
  48. }
  49.  
  50. .logo{
  51.     width:100%;
  52.     float:left;
  53. }
  54.  
  55. .only_float{
  56.     float:left;
  57. }
  58.  
  59. .menu_up{
  60.     background-image:url(../images/f5_06.jpg);
  61.     width:611px;
  62.     height:62px;
  63. }
  64.  
  65. .menu_down{
  66.     background-image:url(../images/f5_09_2.jpg);
  67.     width:611px;
  68.     height:55px;
  69.     text-align:center;
  70.     color:#FFF;
  71. }
  72.  
  73. .mainlevel{
  74.     color:#FFF;
  75.     font-size:12px;
  76.     font-family:Verdana, Geneva, sans-serif;
  77.     text-decoration:none;
  78.     margin-left:17px;
  79.     position:relative;
  80.     top:19px;
  81. }
  82.  
  83. /*.mainlevel a:link, .mainlevel a:visited{
  84.     text-decoration:none;
  85. }*/
  86.  
  87. a:link .mainlevel{
  88.     background-color:red;
  89. }
  90.  
  91. .contenido_izda{
  92.     width:266px;
  93.     float:left;
  94.     height:100%;
  95. }
  96.  
  97. .links{
  98.     background-image:url(../images/f5_bg_bloqueizda.jpg);
  99.     width:266px;
  100.     height:287px;
  101.     font-weight:bold;
  102.     font-size:12px;
  103. }
  104.  
  105. .menu_principal{
  106.     float:left;
  107.     width:266px;
  108. }
  109.  
  110. .menu_titulo{
  111.     color: #003b9d;
  112.     padding-top: 20px;
  113.     padding-left: 45px;
  114. }
  115.  
  116. .menu_linea{
  117.     background-image:url(../images/f5_linea_menu.jpg);
  118.     height:2px;
  119.     width:216px;
  120.     position:relative;
  121.     left:25px;
  122.     top: 10px;
  123. }
  124.  
  125. .menu_contenido{
  126.     position: relative;
  127.     bottom: -20px;
  128.     list-style: none;
  129.     padding-left:45px;
  130.     *padding-left:5px;
  131. }
  132.  
  133. .menu_contenido li{
  134.     background-image:url(../images/f5_boton_li.jpg);
  135.     background-repeat:no-repeat;
  136.     padding-left: 30px;
  137.     margin-bottom:5px;
  138.     height:17px;
  139.     *height:18px;
  140.     padding-top: 1px;
  141.     list-style: none;
  142. }
  143.  
  144. li a:link, li a:visited{
  145.     text-decoration:none;
  146.     color: #002461;
  147. }
  148.  
  149. li a:hover {
  150.     color: #004fd5;
  151. }
  152.  
  153.  
  154. .hijo{
  155.     float:left;
  156.     min-height:100%;
  157.     height:100%;
  158.     width:100%;
  159. }
  160.  
  161. .imagenes{
  162.     float:left;
  163.     width:265px;
  164.     background-color:#a8c1e3;
  165.     min-height:100%;
  166.     height:100%;
  167. }
  168.  
  169. .img_espaciada{
  170.     padding-top: 10px; 
  171.     background-color:#a8c1e3;
  172.     height:100%;
  173. }
  174.  
  175. .buscador{
  176.     text-align:right;
  177.     background-color: #335089;
  178.     height: 44px;
  179.     float:left;
  180.     width:612px;
  181. }
  182.  
  183. .buscador_pos{
  184.     position: relative;
  185.     top: 12px;
  186.     left: 160px;
  187.     width:400px;
  188. }
  189.  
  190. .ir{
  191.     font-weight:bold;
  192.     width:45px;
  193.     height:20px;
  194.     border:1px solid black;
  195. }
  196.  
  197.  
  198. .noticias{
  199.     background-image:url(../images/f5_bg_noti.jpg);
  200. }
  201.  
  202.  
  203.  
  204. /*.contentpaneopen .contentheading{
  205.     margin-bottom:30px;
  206. }*/
  207.  
  208. .contentheading{
  209.     background-image:url(../images/f5_borde_noticia.jpg);
  210.     background-position:bottom;
  211.     background-repeat:repeat-x;
  212.     *width:505px;
  213. }
  214.  
  215. /*.contentpaneopen td{
  216.     background-image:url(../images/f5_borde_noticia.jpg);
  217.     background-position:top;
  218.     background-repeat:repeat-x;
  219. }
  220.  
  221. .buttonheading, .contentheading, .contentpaneopen tr{
  222.     background:none !important;
  223. }*/
  224.  
  225. .contentpaneopen .contentheading{
  226.     margin-bottom:10px;
  227.     display:block;
  228.     width:505px;
  229. }
  230.  
  231. .contenido_noticia{
  232.     color:#013068;
  233.     font-family:Verdana, Geneva, sans-serif;
  234.     font-size:13px;
  235.     width:100%;
  236.     padding:38px 10px 10px 32px;
  237.     width:90%;
  238. }
  239.  
  240. .contenido_noticia a:link, .contenido_noticia a:visited{
  241.     text-decoration:none;
  242.     font-weight:bold;
  243.     color:#00204E;
  244. }
  245.  
  246. .contenido_noticia a:hover{
  247.     color:#013068;
  248.     text-decoration:overline;
  249. }
  250.  
  251. .contentheading, .readon{
  252.     color: #00204e;
  253.     font-size:15px;
  254.     font-weight:bold;
  255.     padding-bottom:10px;
  256. }
  257.  
  258. .ajksjkdfjaskf{
  259.     margin:
  260.  
  261. .readon{
  262.     font-size:13px !important;
  263.     text-decoration:none;
  264.     margin-bottom:40px;
  265. }
  266.  
  267. .article_separator{
  268.     display:block;
  269.     background-color:#a0c1dc;
  270.     width:100%;
  271.     height:1px;
  272.     margin:36px 0 45px 0;
  273. }
  274.  
  275. .pie_noticia{
  276.     width:100%;
  277.     height:17px;
  278.     text-align:right;
  279.     position:relative;
  280.     left:45px;
  281. }
  282.  
  283. .pie_noticia_redonda{
  284.     float:right;
  285.     width:21px;
  286.     height:17px;
  287.     background-image:url(../images/f5_borde_noti.jpg);
  288. }
  289.  
  290. /*********************************
  291.     Formulario de Contacto
  292. *********************************/
  293.  
  294. .contacto_ck input{
  295.     border:1px solid black;
  296.     background-color:#fff;
  297.     width:170px;
  298. }
  299.  
  300. .ck_formulario_left{
  301.     float:left;
  302. }
  303.  
  304. .ck_formulario{
  305.     width:150px !important;
  306. }
  307.  
  308. .ckCSSclear{
  309.     width:500px;
  310.    
  311. }
  312.  
  313. .ckCSSlabel{
  314.     text-align:right;
  315.     padding-right:6px;
  316. }
  317.  
  318. .ckCSSclear select{
  319.     width:175px;
  320.     border:1px solid black;
  321.     background-color:#fff;
  322. }
  323.  
  324. .ckBtnCon input{
  325.     font-weight:bold;
  326.     background-color:#f5f5f5;
  327.     border:1px solid #cecece;
  328.     position:relative;
  329.     bottom:270px;
  330.     right:48px;
  331.     width:60px !important;
  332. }

Saludos y gracias :)
__________________
Os iusti meditabitur sapientiam
Si te he ayudado, por qué no un poquito de Karma :) ?
  #2 (permalink)  
Antiguo 11/05/2010, 09:08
Avatar de juanito1712  
Fecha de Ingreso: mayo-2010
Ubicación: Valencia
Mensajes: 1.108
Antigüedad: 7 años, 7 meses
Puntos: 66
Respuesta: Problema al alinear div al centro, en IE7

Tal vez mi respuesta no te sirva de much ayuda pero aveces es mas facil rehacer la web preocupandonos desde un principio que no se destroce, que una vez terminada ver que se destroza y tratar de arreglarlo, al final terminaras con "grapas" por todos los lados para que case y cuando vaya en uno no ira en otro y así hasta el infinito y ademas el dia de mañana cuando quieras modificar cualquier cosita te enfrentaras al mismo problema.

Planteate cuantas horas llevas arregalndo la web y el caos en el que te ves inmerso ahora mismo y cuantas horas te costaria volverlo a hacer, las segundas veces se hacen mucho mas rapido, te lo puedo asegurar.

Y es muy triste pero... cuando estamos manos a la obra, por mucho que nos guste el fierfox o el chrome, toca utiliza el explorer 6 desde el principio para no llevarnos sustos de ultima hora.
  #3 (permalink)  
Antiguo 11/05/2010, 09:36
Avatar de Jask  
Fecha de Ingreso: abril-2006
Ubicación: Madrid
Mensajes: 768
Antigüedad: 11 años, 8 meses
Puntos: 15
Respuesta: Problema al alinear div al centro, en IE7

Soy partidario de volver a hacer las cosas cuando algo sale mal pero esto tiene su trabajo y no puedo empezar de 0 ya que primero tendría que maquetarlo, luego tendría que implementarlo en el joomla, y así un largo etc y no es algo en lo que pueda perder más tiempo a si que a ver si alguien tiene idea de que puede estar pasando.

Un saludo y gracias :) !!
__________________
Os iusti meditabitur sapientiam
Si te he ayudado, por qué no un poquito de Karma :) ?
  #4 (permalink)  
Antiguo 11/05/2010, 14:28
Avatar de carscx  
Fecha de Ingreso: noviembre-2008
Mensajes: 227
Antigüedad: 9 años
Puntos: 10
Respuesta: Problema al alinear div al centro, en IE7

Puedes crear otro CSS sólo para IE7, la plantilla beez de Joomla, los tiene, y muchas otras. Por lo que he visto (en IE7) , la web se te mueve entera a la izquierda en lugar de estar centrada y el cuadro buscar se desplaza a la derecha. Es cuestión de margenes y rellenos.

Si tienes Firefox, instala la extension Firebug, te será de muchisima a la hora de maquetar con CSS. Puedes seleccionar el elemento que quieras y cambiarle el estilo online. Asi puedes comprobar como va quedando.

La herramienta de IE8 para debuguear CSS tambien te puede ayudar pero menos, no deja de ser un "Ver código fuente".

Un saludo,
__________________
Frontend Developer
JS+HTML5+CSS3
Backend Developer
PHP+MySQL

Etiquetas: alinear, centro
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 11:18.