Высота Div не меняется в IE8

Question

У меня есть следующий код:

<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;
}

Итак, я пытаюсь изменить высоту div cor_patio, но ничего не происходит ...почему?

OBS: когда я удаляю font-size из nome_patio, он отлично работает.

Answer 1

Я решаю решение следующим образом:

<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;
}

Answer 2

Установить положение: относительное;в #nome_patio и положение: абсолютное;to #cor_patio;

Надеюсь, это поможет.

Answer 3

Вам нужно установить свой рост на #nome_patio до 100%.

Рабочий пример: http://jsfiddle.net/aYnyk/

Answer 4

попытаться установить положение: абсолютное;в home_patio, если он не работает, также установите в cor_patio.