La altura div no cambia en IE8

Tengo el siguiente código:

<div id="conteudo">
    <img id="logo" height="137" width="327" />
    <div id="data_hora">
    </div>
    <div id="nome_patio">
        <div id="cor_patio"></div> #NOME_PATIO#
    </div>
</div>

CSS:

    body
{
    background-color: #000000;
    margin: 0;
    padding: 0;
    font-family:Arial;
}

#conteudo
{
    height: 100%;
    width: 100%;
}

#data_hora
{
    float: right;
    font-size: 50px;
    color: #E0E428;
    margin-top: -90px;
    margin-right: 40px;
}

#nome_patio
{
    text-align: center;
    font-size: 80px;
    color: #E0E428;
    width: 100%;
    font-weight: bold;
}

#cor_patio
{
    border: solid 1px #FFFFFF;
    height: 10px !important;
    width: 80px;
    background-color: #E0E428;
    margin-right: 20px;
}

So, i'm trying to change the div cor_patio height, but nothing happens... why?

OBS: when i remove font-size desde nome_patio, funciona bien.

preguntado el 09 de marzo de 12 a las 14:03

tratan zoom:1 on that div, i can't tell if its being properly hasLayouted or not. -

Works fine for me in IE8. Does this fiddle work for you? jsfiddle.net/8Rpcd/1 -

Works for me in IE8 and IE7, however IE7 will center the div cor_patio and IE8 will not -

I found the problem... when i remove the font-size of nome_patio.. it works fine. Oo Why? -

4 Respuestas

try to set position:absolute; to home_patio, if it doesn't work, also set to cor_patio.

respondido 09 mar '12, 14:03

I found the problem... when i remove the font-size of nome_patio.. it works fine. Oo Why? - Vinicius Ottoni

Set position:relative; to #nome_patio and position:absolute; to #cor_patio;

Espero que te ayude.

respondido 09 mar '12, 14:03

I found the problem... when i remove the font-size of nome_patio.. it works fine. Oo Why? - Vinicius Ottoni

You need to set your height on #nome_patio a 100%.

Ejemplo de trabajo: http://jsfiddle.net/aYnyk/

respondido 09 mar '12, 14:03

I found the problem... when i remove the font-size of nome_patio.. it works fine. Oo Why? - Vinicius Ottoni

I solve the solution with this:

<div id="patio">
    <span id="cor_patio"></span><span id="nome_patio">#NOME_PATIO#</span>
</div>

CSS:

#patio
{
    text-align: center;
    width: 100%;
}

#cor_patio
{
    height: 63px;
    width: 63px;
    background-color: #E0E428;
    margin-right: 30px;
}

#nome_patio
{
    font-size: 80px;
    color: #E0E428;
    font-weight: bold;
}

respondido 09 mar '12, 17:03

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.