Уезжает блок при отстутствии бордюра

[py6epoug]

Доброго времени суток. Подскажите пожалуйста. В некоторых ситуациях при отсутствии бордюра съезжает блок в FireFox 3.5 и Opera 9.64, про другие версии не могу ничего сказать, в IE 7 все нормально отображается. В моем конкретном случае примерно на 10px вниз вместе с бэкграундом. Причем в другом месте в коде аналогичный блок нормально выводится. Соседние блоки конечно посмотрел, да и собственно какая разница, есть бордюр, нет бордюра, блок должен быть на месте. Прошу прощения, может проблема известная или тысячу раз описанный глюк, здесь мне найти ответ не удалось да и вообще нигде. Код если будет необходимо приложу. Спасибо.

 

[Hovard]

С кода и надо всегда начинать, а лучше ссылку даже.

 

[trueW3C]

width: 100%; c margin или padding стоит наверно....если нет по опробуй написать в css

width: auto;

 

[Hovard]

Я вот думаю, что haslayout включен. Во бщем, давайте свой код.

 

[py6epoug]

[codebox]
<!-- Левая колонка -->
<div id="left">
<div id="leftmenu">
<a class="a0" href="#">Каталог продукции</a>
<a class="a1" href="">Офисная мебель</a>
<a class="a2" href="">Кабинеты руководителя</a>
<a class="a2" href="">Мебель для персонала</a>
<a class="a1" target="" href="">Офисные перегородки</a>
<a class="a1" href="">Стационарные перегородки</a>
<a class="a1" href="">Офисные кресла</a>
<a class="a2" href="">Кресла руководителя</a>
<a class="a2" href="">Кресла серии "Серия1"</a>
<a class="a2" href="">Кресла из эко-кожи</a>
<a class="a2" href="">Кресла для персонала</a>
<a class="a2" href="">Кресла серии "Серия2"</a>
<a class="a2" href="">Кресла для посетителей</a>
<a class="a2" href="">Стулья офисные</a>
<a class="a1" href="">Мебель на заказ</a>
<a class="a0" href="">Примеры выполненных проектов</a>
<a class="a0" href="">Проектирование офиса</a>
<a class="a0" href="">Фотогалерея</a>
<a class="a0" href="">Прайс-лист в формате ZIP</a>
<a class="a1" href="">Офисная мебель</a>
<a class="a1" href="">Офисные кресла</a>
</div>

<!--------------------------->
<!-- Проблемный блок -->
<div class="lefttab">
<img src="/pic/dt.gif" alt="::" />
<a href="">Новости</a>
</div>
<!---------------------------->

<div class="newsitem"><p>[01.04.2007]</p>
Бла бла бла... <a href="">&gt;&gt;</a>
</div>
<div class="newsitem"><p>[17.03.2007]</p>
Бла бла бла... <a href="">&gt;&gt;</a>
</div>
<br />
<? // Счетчики ?>
<div id="cnts"></div>
</div>
<!-- -->
[/codebox]

CSS:
[codebox]
/*------------ меню ------------*/
#left {
width:259px;
float:left;
padding:2px 0px;
}
#leftmenu {
margin:0px;
}
#leftmenu a {
background-color:#eff0f4;
margin:1px 2px;
padding:1px 20px;
color:#00c;
text-transform:uppercase;
display:block;
background-repeat:no-repeat;
background-position:4px;
}
#leftmenu a:hover {
padding-left:22px;
background-color:#fff;
}
#leftmenu .a0 {
font-weight:bold;
border:1px solid silver;
padding-top:5px;
padding-bottom:5px;
background-image:url(pic/arr.gif);
}
#leftmenu .a1 {
color:#005d00;
background-image:url(pic/arrow2.gif);
}
#leftmenu .a2 {
color:#dc143c;
}
#cnts {
margin:10px auto;
width:184px;
}
/*--------- новости ------------*/
.lefttab {
height:37px;
border-top:1px solid white; /* вот он бордюр проклятый */
background:url(pic/hdrtab_bg.jpg) top repeat-x;
background-color:#dce1e9;
}
.lefttab img {
float:left;
margin-top:14px;
margin-left:10px;
}
.lefttab a {
display:block;
text-transform:uppercase;
font-weight:bold;
margin-top:10px;
margin-left:20px;
border:0px;
}
.newsitem {
background-image:url(pic/bg_gray0.jpg);
background-repeat:repeat-x;
border:1px solid silver;
padding:8px;
margin:5px;
font-size:12px;
}
.newsitem p {
margin-bottom:5px;
text-transform:uppercase;
font-weight:bold;
font-size:12px;
color:#00c;
}
[/codebox]

С бордюром:

Без бордюра:

Могу ссылку дать, но не сочли бы за рекламу, сайт коммерческий.

 

[py6epoug]

Вообщем проблема решилась удалением float у картинки и display:block у ссылки, съезжало как раз на ее margin:
[codebox]
.lefttab {
height:37px;
background:url(pic/hdrtab_bg.jpg);
background-color:#dce1e9;
}
.lefttab img {
margin-left:10px;
margin-top:14px;
}
.lefttab a {
text-transform:uppercase;
font-weight:bold;
margin-left:4px;
vertical-align:-1px;
border:0px;
}

[/codebox]
Но вопрос все равно остался, почему так получалось, ну я понимаю там по ширине бы не влезало, добавил бордюр - уехал блок куда-нибудь вниз, а тут что-то все равно не догоняю... Ну тоесть почему съезжает я понял, не понятно почему так влияет наличие/отсутствие бордюра...

 

[Hovard]

Почитайте про схлопывание маргинов.
vertical-align:-1px; =)
Вообще, почитайте про CSS повнимательней

 

[py6epoug]

Спасибо, поищу, почитаю. А чем Вам не понравился мой vertical-align Ну не центрируется по другому