2011-07-06 22 views
5

Tengo un problema de IE8 bastante común en mi sitio. IE8 representa mi página de manera diferente que otros navegadores, lo cual es bastante molesto. ¡Me encantaría que alguien pudiera ayudar, por favor!Problema de representación de IE8 CSS (tabla)

He intentado darle a IE8 su propia hoja de estilos, pero parece que no funciona.

Aquí está la página con el tema:

http://www.routeqr.com/toimex/tuotteet

de desplazamiento hacia abajo a la sección de imagen y verá que la primera colum y la segunda columna tiene demasiado espacio entre ellos.

Las etiquetas TH también se muestran mal.

IE no representa los márgenes correctamente allí, simplemente verifique la misma página con Firefox o con otro navegador y verá la diferencia.

Agradecería muchísimo si alguien pudiera ayudarme, estoy tan perdido.

de código HTML

<table class="tuotekuvat"> 
<tbody> 
<tr> 
<th><a name="kannakkeet">&raquo; Kannakkeet</a></th> 
</tr> 

CSS

.custom .tuotekuvat th { 
float: left; 
margin-top: 15px; 
margin-bottom: 15px; 
padding: 10px; 
background-color: #333333; 
} 
+2

Obtendrá más ayuda si publica el código en lugar de una pregunta que simplemente apunta a su sitio web y nos pide que descubramos qué le pasa. Consulte esta pregunta, que se cerró: http://stackoverflow.com/questions/6596603/my-layout-is-not-working-properly – Slick23

+0

¿Puede publicar algún código para mostrar cómo está tratando de darle a IE su propia hoja de estilo? ? ¿A qué te refieres cuando dices que no está funcionando? La hoja de estilo no se está cargando, o los estilos no están haciendo lo que esperas? – Ben

+0

Intente abrir la página web en IE8 o IE9, y el problema queda claro. Las celdas de la tabla se están volviendo más grandes para la primera columna. –

Respuesta

2

La mesa no está codificado correctamente, usted tiene uno th (celular) sin colspans especificada, y en las table sí algunas filas tienen 6 celdas (columnas) y algunos tienen 5. cualquier navegador puede tener problemas por la noche que hasta;)

Luego está flotando la única th - IE 7 y por debajo no entienden flotador en un elemento de celda de la tabla/cabecera y se le obligando a la totalidad de la primera columna a ser tan amplio como el enlace de cabecera

Si puedo sugerir que se adhiera a uno u otro método, ya sea flotando un encabezado fuera de la mesa, o incluso poniéndolo en su propio <thead> elemento - y luego usando table-layout: fixed en toda la tabla para que las columnas forzadas sean del mismo ancho. eso debería ayudar a igualarlo ... pero principalmente si usted decide que la tabla debe tener seis columnas (si todas se usan o no) entonces por ejemplo, esa th solo debería ser <th colspan="6">

obtener la tabla HTML primero y el resto debería estar perfectamente bien en el navegador si quiere que parezca que hay espacios entre las filas de la tabla y los encabezados de las tablas. Puede rellenar el th ... pero realmente no veo la necesidad de que flote fuera de la estructura de la tabla

+0

Gracias clairesuzy, tuve la mesa muy en mal estado :) Por cierto, ¿es válida la codificación si hay celdas vacías en una tabla? –

+0

@Juuso - ¡sin preocupaciones! ¿Obtuviste el renderizado de forma similar en el navegador, reenvías el código (edita la pregunta para agregarlo) si todavía tienes problemas ahora? Sí, las celdas vacías son válidas :) – clairesuzy

+0

Solo ten en cuenta que la celda realmente vacía de la tabla a menudo ganó ' t renderizar correctamente en IE, especialmente si tiene estilo en la celda (a diferencia de la fila, por ejemplo). Trate de poner un espacio sin interrupciones ( ) en la celda para arreglar eso. –

0

Retire la izquierda y relleno derecho:
padding: 10px;
convierte
padding: 10px 0px 10px 0px;

Espero que esto ayude!

N.S.

+1

Hola Nathan, esa hubiera sido una solución también, gracias por la comprensión :) Cambié TH colspan = "6", que parece ser una buena manera de hacerlo. –

0

Con respecto a las celdas vacías <td>. Solía ​​ser que necesitabas al menos un &nbsp; para que se procesara correctamente en todos los navegadores. Creo que puede que ya no sea el caso con las versiones actuales.

Como comentario, recomendaría utilizar herramientas como firefox webdeveloper y firebug. Webdeveloper tiene una gran cantidad de características agradables junto con un enlace al w3c Validator que me ha ayudado a encontrar html malformado.