Tuve el mismo problema con uno de mis sitios. encontré esta respuesta aquí :

"Con un doctype HTML5, las imágenes reciben lo que parece ser el atributo line-height que normalmente recibe el texto, y por lo tanto se obtiene un "margen" debajo de ellas. Puede configurarlos para mostrar: block o line-height: 0, aunque no he probado este último lo suficiente como para estar seguro de que es una buena solución."

Apliqué el line-height:0 al <div> que contenía las imágenes de navegación. Hizo el truco para me.

Es porque el DOCTYPE cambia el modo de renderizado al Modo de Cumplimiento de Estándares. Específicamente, esto significa que está utilizando el modelo de caja W3C ahora que calcula el ancho / alto para los elementos de bloque de manera diferente que el modo quirks.

Leer más aquí, aquí, y aquí.

Prueba este:

Css:

html * { margin:0; padding:0; }

Tuve el mismo problema al actualizar un sitio web XHTML4 a HTML5. Tenía muchos de estos:

<a><img></a>

Que terminó con el relleno extra mágico alrededor de las imágenes. Para mí la solución era simple add añadir este css:

img { vertical-align: top; }

Mate tienes 2 etiquetas callejeras </div> en esa página. En las líneas 32 y 34. Borrar y volver a intentar. A ver si eso lo arregla.

Nunca he usado display: inline-block debido a los problemas de IE7, así que no estoy familiarizado con sus peculiaridades. Parece que no es necesario aplicarlo a ul#pagetab en su situación, ya que no está rodeado de elementos en línea. Simplemente lo convertiría en un elemento de bloque normal. Además, dado que contiene elementos flotantes que no necesitan flotar junto a algunos elementos en línea, simplemente daría ul#pagetab una altura real a través de display: block; overflow: hidden;.

Esto parece resolver todos sus problemas (que no puedo explicar en detalle) y proporciona estilos estilísticamente más apropiados.

Wow. @ matt tiene razón (no en este caso) y eso es conocimiento general, pero todos están equivocados.

Amigo mira @ tu css, tienes

Pagetab {background-color: #ff2d00; padding: 0px 4px; margin: 0; display: inline-block;}

Pagetab ul {list-style: none; margin: 0px; padding: 0px 4px; display: block;}

Para .....

De modo que la segunda declaración está en ul anidada que se producen en #pagetab. no tienes nada de eso.

Tomé la ul de la declaración para que estén en el elemento correcto. ahora su css tiene 2 estilos que coinciden con ambos (y también se llaman en su selector universal (fyi, que va por encima de su declaración body {})) por lo que son 3 estilos....overkill dude. además, los que no coinciden, lo configura para mostrar: inline-block y luego lo restablece a block...estoy perdido en esta lógica.

SO toma tu ejemplo. cambiar dos estilos de pagetab a esto

Pagetab {

background-color: #ff2d00;
padding: 0px 4px;
margin: 0;

}

Pagetab {

list-style: none;
margin: 0px;
padding: 0px 4px;
display: block;

}

Guárdalo. ahora quítatelo, guárdalo como #2. en FF3. 6 sobre 7 son los mismos.

Si utilizara los validadores que se proporcionan específicamente para resolver/prevenir problemas como este, así como las herramientas de control de calidad (específicamente aquí estoy hablando de los selectores dust-me bookmarklet) resolvería esto en poco tiempo.

De vuelta a los estándares web, gen ed css: * {} es universal, por lo que mientras otra declaración no anule la especificidad de*, lo hará siempre funciona. en inglés, si declara * {margin:0; padding:0; border:none} en la parte superior de su página, no tiene que poner margin:0; padding: 0; en cada elemento. ya lo has hecho.

Los estándares web, te salvarán la vida.