Tabber и Спецификации

[OleKh 4]

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

2. В IE линии вообще не отображаются + непонятный отступ слева (где-то на 20 px, в CSS ничего подобного нет). В Chrome линии есть + непонятный отступ слева (где-то на 20 px в CSS ничего подобного нет ).

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

2. Откуда берется отступ и как его убрать и сделать линии в IE?

[support 447]

Так это ж всё через css задаётся.

Прочитайте в гугле например про css border

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

[OleKh 4]

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

[support 447]

Не знаю, смотреть в css нааверное надо.

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

[OleKh 4]

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

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

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

Отключил стили в этом 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>

[/CODE]


 

 

[CODE]

.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 447]

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

[OleKh 4]

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

[OleKh 4]

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

[support 447]

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