8 replies to this topic

[OleKh]

1. Установил меню закладками в карточке товара. Сделал закладку характеристики и туда вставил Спецификации. Настроил Спецификации, в html карточке товара вставил table в левую колонку {$spec.NAME}:в правую {$spec.VALUE}. Отображается нормально. Всё работает. Однако когда ставлю border="1" , таблице присваиваю стиль border-collapse: collapse; - линии получаются вертикальные жирные, а горизонтальные нет.
2. В IE линии вообще не отображаются + непонятный отступ слева (где-то на 20 px, в CSS ничего подобного нет). В Chrome линии есть + непонятный отступ слева (где-то на 20 px в CSS ничего подобного нет ).


1. Подскажите пожалуйста как сделать чтобы линии в таблице были не жирные, а такие как горизонтальная?
2. Откуда берется отступ и как его убрать и сделать линии в IE?

 2012-02-01_084154.png (23,04К)
Количество загрузок:: 37

 2012-02-01_084357.png (26,58К)
Количество загрузок:: 36

[support]

Так это ж всё через css задаётся.
Прочитайте в гугле например про css border

Там можно и толщину и тень и всё прочее задавать.

[OleKh]

Понятно. Уже сделал. А отступ слева откуда взялся?

[support]

Не знаю, смотреть в css нааверное надо.
А может просто таблица по умолчанию так строится, отступ же должен быть, иначе некрасиво будет вплотную в границам.

[OleKh]

Отступ должен быть для <p>, но мне не такой большой. Если отступ отображается в одних версиях и не отображается в других, значит лучше вообще убрать тег с отступом и сделать отступ в стилях. После того как убираю <p> из кода html ничего не меняется. Менял заголовки с h1 до h6, тоже самое. Даже не знаю какой стиль в карточке товара может задавать отступы для всех таблиц. Ищу дальше. Может кто-то сталкивался и знает где поправить

1. Отступ в таблице в Crome, IE

 2012-02-01_084154.png (23,04К)
Количество загрузок:: 37


2. Отступ в таблице в Opera, Firefox

 2012-02-01_084357.png (26,58К)
Количество загрузок:: 36

Отключил стили в этом div, тоже самое. Корректно отображает только в Opera 11.61 и IE 7. Выкладываю html. Предполагаю, что в php стоит тег перед {$spec.NAME}: и {$spec.VALUE}, который делает отступ, но где искать не знаю.

<div class="tabbertab">
<h3>{#text_specifications#}</h3>
<p> {if $specifications}
<!-- Specifications -->
{foreach name=outer item=spec_group from=$specifications_data}</br>
<!--<strong>{$spec_group.GROUP_NAME}:</strong>-->
{foreach key=key_data item=spec from=$spec_group.DATA}<table id="table1" class="{cycle values="itemOdd,itemEven"}" align="center" width="90%" cellspacing="0" cellpadding="0"><tr><td class="specleft" width="60%">{$spec.NAME}:</td><td class="specright" width="40%">{$spec.VALUE}</td></tr></table>
{/foreach}
{/foreach}
<!-- /Specifications -->
{/if}</p></br>
</div>

.tabberlive .tabbertabhide {
display:none;
}
.tabber {
}
.tabberlive {
margin-top:1em;
}
ul.tabbernav
{
margin:0;
padding: 3px 0;
border-bottom: 1px solid #778;
font: bold 12px Verdana, sans-serif;
}
ul.tabbernav li
{
list-style: none;
margin: 0;
display: inline;
}
ul.tabbernav li a
{
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: #DDE;
text-decoration: none;
}
ul.tabbernav li a:link { color: #006699; }
ul.tabbernav li a:visited { color: #667; }
ul.tabbernav li a:hover
{
color: #000;
background: #AAE;
border-color: #227;
}
ul.tabbernav li.tabberactive a
{
background-color: #fff;
border-bottom: 1px solid #fff;
}
ul.tabbernav li.tabberactive a:hover
{
color: #000;
background: white;
border-bottom: 1px solid white;
}
.tabberlive .tabbertab {
padding:5px;
border:1px solid #aaa;
border-top:0;
}
.tabberlive .tabbertab h2 {
display:none;
}
.tabberlive .tabbertab h3 {
display:none;
}
.tabberlive#tab2 .tabbertab {
height:0px;
overflow:auto;
}
#table1 {border-collapse: collapse; border-top: 1px solid #333333;}
.specleft {border-right: 1px solid #333333; padding:0; margin:0;}
.specright{padding:0; margin:0;}
 

[support]

Ну наверное нельзя убрать отступ, раз в css и html ничего нет.

[OleKh]

Убрал в хтмл с карточки всё кроме табера. Работает нормально. Значит наследуется стиль.

[OleKh]

Методом исключения классов нашел класс который делает отступ. В class pagecontent указан text-indent: 20px. Добавил стиль таберу text-indent: 0px. - проблема решена. Пардон за беспокойство, думал в пхп дело было, оказывается всё проще.

[support]

Спасибо, что поделились решением.