Hice una tablilla de afiliados que por algún motivo se descuadra

Vine a preguntar hace poco por otra cosa, y normalmente trato de no recurrir a la zona de ayuda tan seguido, pero necesito que alguien me explique qué es lo que le está pasando a mi tablilla

Hice una tablilla de afiliados que en mi foro se ve bien, pero al momento de pasarlo a otros foros e incluso a codepen, me comienza a fallar. Lo extraño es que parece no reconocerme las propiedades, como por ejemplo, el título donde tengo el nombre del foro. Revisé el código mil veces para ver que todo estuviese en su sitio, y ahí por ejemplo lo tengo puesto para que aparezca blanco, pero si lo pongo en otro foro como que se pierden las propiedades :c

En mi foro se ve todo en orden:

Spoiler:

Pero en cualquier otro lado se ve así:

Spoiler:

E incluso en Codepen se me descuadra hasta la parte de abajo:

Spoiler:

Según el código que tengo hecho, no debería verse de esa manera :c pero si modifico algo en codepen para que se vea más aceptable se descuadra en mi foro y tampoco tengo la garantía de que en los otros se vea bien. Además de que no logro hacer que me lea el color blanco del título :'c

Así tengo el código:

Código:

<style>.bloque {width: 113px; padding-top: 18px; padding-bottom: 18px; display: inline-block; margin: 1px; border: 1px solid #fff; display: inline-block; margin: 1px; font-family: Open Sans Condensed; font-size: 13px; color: #fff; text-align: center;}</style><style>.links {width: 233px; padding-top: 4px; padding-bottom: 4px; display: inline-block; margin: 1px; background-color: #121212; display: block; margin: 1px; font-family: Open Sans Condensed; font-size: 13px; color: #fff; text-align: center;}</style><link href='https://fonts.googleapis.com/css?family=Fjalla+One|Open+Sans+Condensed:300' rel='stylesheet' type='text/css'><div style="margin: auto; width: 500px; height: 620px; background-color: #ddd; padding: 15px;"><div style="margin: auto; width: 490px; height: 610px; background-color: #fff; padding: 4px;"><div style="margin: auto; width: 490px; height: 240px; background-image: url('https://i.imgur.com/pmlD37A.gif');"></div><div style="margin-auto: width: 490px; padding: 5px; background-color: #121212; font-family: 'Fjalla One'; font-size: 25px; color: #fofofo; text-align: center;">Boku no Hero ROL</div><table><tr><td><div style="font-family: 'Open Sans Condensed'; color: #000; font-size: 20px; text-align: center;">#Staff</div><div style="width: 236px; height: 120px; background-color: #ddd; overflow: auto; padding: 3px;"><div class="bloque"   style="background-image: url('https://i.imgur.com/SURyD7t.png')";>texto</div><div class="bloque"   style="background-image: url('https://i.imgur.com/SURyD7t.png')";>texto</div>
<div class="bloque"   style="background-image: url('https://i.imgur.com/SURyD7t.png')";>texto</div><div class="bloque"   style="background-image: url('https://i.imgur.com/SURyD7t.png')";>texto</div>
</div></td><td><div style="font-family: 'Open Sans Condensed'; color: #000; font-size: 20px; text-align: center;">#Menú</div><div style="width: 236px; height: 120px; background-color: #ddd; overflow: auto; padding: 3px;"><div class="links"><a href="LINK">Ir al foro</a></div><div class="links"><a href="LINK">Afiliados</a></div><div class="links"><a href="LINK">Confirmaciones</a></div><div class="links"><a href="LINK">Normas de afiliación</a></div></div></td></tr></table><div style="font-family: 'Open Sans Condensed'; color: #000; font-size: 20px; text-align: center; padding-bottom: 5px;">#Ambientación y botones</div><div style="margin: auto; width: 480px; height: 155px; background-color: #ddd; font-family: Calibri; font-size: 14px; color: #000; text-align: justify; padding: 4px; overflow: auto;">prueba de texto</div></div></div>

Hago UP y aprovecho para mencionar que hice una nueva versión, ahora trabajada directamente en codepen... Y mientras que en codepen se ve fantástico, en el foro se ve así:

Spoiler:

Ya no sé qué pasa, no tiene sentido que se vea bien en un determinado sitio y en otro no, o de lo contrario los coders no podrían ofrecer tablillas porque se deformarían en cada foro... No sé qué estoy haciendo mal

El código es este:

Código:

<style>.bloque {width: 103px; padding-top: 18px; padding-bottom: 18px; display: inline-block; margin: 1px; border: 1px solid #fff; display: inline-block; margin: 1px; font-family: 'Open Sans Condensed'; font-size: 13px; color: #fff; text-align: center;} .links {width: 213px; padding-top: 5px; padding-bottom: 5px; display: inline-block; margin: 1px; background-color: #121212; display: block; margin: 1px; font-family: Open Sans Condensed; font-size: 13px; color: #fff; text-align: center;}</style><link href='https://fonts.googleapis.com/css?family=Fjalla+One|Open+Sans+Condensed:300' rel='stylesheet' type='text/css'><div style="margin: auto; width: 450px; height: 650px; background-color: #f0f0f0; border: 15px solid #ddd; padding: 3px;"><div style="margin: auto; width: 450px; height: 240px; background-image: url('https://i.imgur.com/Qjbj2US.gif');"></div><div style="margin-auto: width: 490px; padding: 5px; background-color: #121212; font-family: 'Fjalla One'; font-size: 25px; color: #f0f0f0; text-align: center;">Boku no Hero ROL</div><table><tr><td><div style="font-family: 'Open Sans Condensed'; color: #000; font-size: 20px; text-align: center;">#Staff</div><div style="width: 215px; height: 118px; background-color: #ddd; overflow: auto; padding: 3px;"><div class="bloque"   style="background-image: url('https://i.imgur.com/SURyD7t.png')";>texto</div><div class="bloque"   style="background-image: url('https://i.imgur.com/SURyD7t.png')";>texto</div>
<div class="bloque"   style="background-image: url('https://i.imgur.com/SURyD7t.png')";>texto</div><div class="bloque"   style="background-image: url('https://i.imgur.com/SURyD7t.png')";>texto</div>
</div></td><td><div style="font-family: 'Open Sans Condensed'; color: #000; font-size: 20px; text-align: center;">#Menú</div><div style="width: 215px; height: 118px; background-color: #ddd; overflow: auto; padding: 3px;"><div class="links"><a href="LINK" style="color: #fff; text-decoration: none;">Ir al foro</a></div><div class="links"><a href="LINK" style="color: #fff; text-decoration: none;">Afiliados</a></div><div class="links"><a href="LINK" style="color: #fff; text-decoration: none;">Confirmaciones</a></div><div class="links"><a href="LINK" style="color: #fff; text-decoration: none;">Normas de afiliación</a></div></div></td></tr></table><div style="font-family: 'Open Sans Condensed'; color: #000; font-size: 20px; text-align: center; padding-bottom: 5px;">#Ambientación y botones</div><div style="margin: auto; width: 440px; height: 167px; background-color: #ddd; font-family: Calibri; font-size: 14px; color: #000; text-align: justify; padding: 4px; overflow: auto;">prueba de texto</div></div>

Hola Shiki! Perdona por la demora en responder, recien he regresado al país y apenas estoy poniendome al día con el foro. Y bueno, a primera vista puedo decir que cualquier codigo que hagas en Codepen o JSFiddle siempre va a generar algun error al pasarlo a foroactivo ya que la plataforma lee de forma literal cuando hay saltos de linea o espacios en nuestros códigos, por lo que es muy importante revisar que no haya estos espacios. Te dejo este mini tutorial de como subir códigos en foroactivo, espero que te sirva!

Hola, Roshio. Justamente me guié con ese tutorial para crear las etiquetas de style y demás, pero en este caso no es por los saltos de línea :c estuve cuidando mucho de no poner saltos de línea en el código para que todo funcione como tiene que funcionar, y aún así se me descuadra en otros lados.

No entiendo que sale mal, yo lo veo bien?

Bueno, no soy de meterme en dudas porque usualmente yo también soy de dudar mucho, pero siempre se puede intentar ayudar.

Probé el último código que pasaste en un foro de pruebas que tengo y no veo descuadre alguno.

Spoiler:

¿Qué es lo que dices se te descuadra? Específicamente. Podría intentar darte una mano a partir de allí, sin embargo, como consejo y aunque no se si influya en algo directamente, siempre que hago códigos que necesiten un css, la baliza que utilizo no es

Código:

<style></style>

si no:

Código:

<style type="text/css"></style>

Gracias a ambos por acudir al rescate toda ayuda y consejo es más que bienvenido. Lo que me pasaba con esta tablilla es que ese espacio en blanco entre la última caja y el borde de la tablilla no se me iba con nada, porque si tocaba los pixeles de la altura se me descuadraba. Pero al final la solución que le encontré fue quitar el height y que la tablilla se acomodase sola.

Lo segundo que me pasaba (y tal vez todavía me ocurra en algún lado) es que para los cuadros que contienen al staff y los links como que se me desacomodan, entonces el contenido interior crece y me hace cualquier desastre en la tablilla. Por el momento lo solucioné quitando el overflow. No sé si sea la solución definitiva, pero lo he provado en otros 6 foros y por ahora no se me ha vuelto a descuadrar.

Les agradezco mucho por los comentarios, en verdad espero ya no tener más problemas con esta tablilla si el experimento este sale bien y los foros donde la ponga la visualizan sin errores, me animaré a aportar tablillas aquí también

Si es lo que noté, que habias puesto un overflow: auto en los divs de los links por ejemplo pero me alegra que pudieras solucionarlo