Проблема с высотой CSS и DIV

Question

Я создаю макет веб-страницы, который включает в себя DIV шириной 5px, который я использую в качестве разделителя, если я определю свой стиль таким образом

div#main_spc {
    display: block; 
    width: 5px; 
    background: url(../Images/contsep.gif) repeat-y top center; 
    float: left;
    position: relative;
}

и поставить высоту в линию

<div id="main_spc" style="height: 356px;"></div>

все работает как надо, но когда я изменяю свой код для применения высоты из-за пределов CSS-файла

div.main_spc{
    display: block; 
    width: 5px; 
    background: url(../Images/contsep.gif) repeat-y top center; 
    float: left;
    position: relative;
}

div.main_spc.abc{
    height: 356px;
}

и измените код XHTML следующим образом

<div class="main_spc abc"></div>

Извините за TYPO, конечно, это всегда был КЛАСС, а не СТИЛЬ, я спешно писал этот вопрос, и я пропустил это. Если бы это было так, то у firebug возникла бы проблема указать CSS-определение на первое место!

DIV невидим, по крайней мере, я помещаю некоторое содержимое внутрь, тогда DIV имеет высоту текста.

Я пытался осмотреть этот элемент из firebug, и, хотя с исходным кодом все в порядке, firefox (и, возможно, другие браузеры) игнорируют HEIGHT и firebug отображает этот элемент CSS как

div.main_spc.abc {
}

Интересно, как изменить мой CSS, чтобы высоту не исключать из определения стиля?

Answer 1

Используйте атрибут class

Заменить

<div style="main_spc abc"></div>

с

<div class="main_spc abc"></div>

Вы определили два класса main_spc и abc, и вы включили класс, используя атрибут 'class', а не style. Стиль используется для встроенного стиля, как

style='height: 356px;'

Редактировать

Это не тот случай, когда firebug испускал атрибут высоты. Если вы осмотрите секцию стиля с правой стороны, то увидите классы, связанные с элементом, и там вы увидите атрибут высоты в классе 'abc'.

Если вы установите свойство переполнения скрытым, содержимое не будет переполнено. В вашем случае я думаю, что вы пытаетесь достичь проставки с высотой 356px и шириной 5px. Тогда дайте

 

внутри div и посмотрите результат.

Изменен ваш код для пробела

div.main_spc
{
                display: block; 
                width: 5px; 
                background: url(../Images/contsep.gif) repeat-y top center; 
                float: left;
                position: relative;
}

.abc
{
         height: 356px;
}

<div class="main_spc abc">&nbsp;</div>

Answer 2

Вы делаете abc дочерним элементом main_spc, а не родным братом. Так что твой CSS

div.main_spc{
        display: block; 
        width: 5px; 
        background: url(../Images/contsep.gif) repeat-y top center; 
        float: left;
        position: relative;
}

div.main_spc.abc{
        height: 356px;
}

на самом деле ищет xhtml как

<div class="main_spc"><div class="abc"></div></div>

Изменить CSS на

div.main_spc{
        display: block; 
        width: 5px; 
        background: url(../Images/contsep.gif) repeat-y top center; 
        float: left;
        position: relative;
}

div.abc{
        height: 356px;
}

, а затем

<div class="main_spc abc"></div>

будет работать.

Answer 3

вы, кажется, переключились на селектор идентификатора (#) и селектор класса (.), И в этом случае вам нужно изменить либо определение CSS, либо

<div class="main_spc"></div>