Консультации Портала - Консультация #178480

Задать вопрос Консультации Пользователи Форум

Задать вопрос экспертам

Консультация № 178480

19.05.2010, 03:11

0.00 руб.

0 5 0

Компьютеры Программирование

в IE, Mozila - все нормалльно, а в Опере правый блок накладывается на левый.
Как это побороть?

вот код блока:

Код:

<div id="tabbed" class="widget">
		<ul class="tabnav">
			<li><a class="left" href="#votebl"><span>Голосование</span></a></li>
			<li><a class="right" href="#calendarbl"><span>Календарь</span></a></li>
		</ul>
			<div id="votebl" class="tabdiv">1 закладка</div>
			<div id="calendarbl" class="tabdiv">2 закладка</div>
</div>

Вот css:

Код:

.widget {width: 255px;margin: 25px 0 20px;padding-bottom:16px;background:url('../images/tabbottom.png') bottom center no-repeat;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;line-height: 1.6em;font-size:75%;}
.widget a:link, .widget a:active, .widget a:visited {color: #222;text-decoration: none;}
.widget a:hover {color: #009;text-decoration: underline;}
.tabnav ul {width:100%;}
.tabnav li {display: inline-block;list-style: none;}
.tabnav li a:link, .tabnav li a:active, .tabnav li a:visited {text-transform: uppercase;text-decoration: none;color: #0089d9;font-weight: bold;outline: none;display:inline-block;height:37px;text-align:center;}
.tabnav li a.left {background:url('../images/tabhead.png') bottom left no-repeat;width:127px;}
.tabnav li a.right {background:url('../images/tabhead.png') bottom right no-repeat;width:128px;margin-left:-3px;}
.tabnav li a.left:active, .tabnav li.ui-tabs-selected a.left {background: url('../images/tabhead.png') top left no-repeat;color: #0089d9;text-decoration: none;width:127px;}
.tabnav li a.right:active, .tabnav li.ui-tabs-selected a.right {background: url('../images/tabhead.png') top right no-repeat;color: #0089d9;text-decoration: none;width:128px;}
.tabnav li a:hover {color: #0089d9;text-decoration:  none;}
.tabdiv {width:255px;background:#fff url('../images/tabcenter.png') top center repeat-y;padding-top:5px;}
.tabdiv  ul {list-style:none;}	
.tabdiv li {margin-left: 20px;}
.tabnav li a span {margin-top:12px;display:block;}
.ui-tabs-hide {display: none;}

также используется jquery

Обсуждение

Неизвестный

19.05.2010, 10:33

общий

Половину css-кода нужно вычистить. Или написать самому.
Для начала я не понимаю, зачем там "display: inline-block".
Картинок не видел, поэтому не знаю, как выглядеть должно и как выглядит неправильно.
Заметил только, что "right" в Опере пытается встать на одну строчку с "left". Это?
jquery - круто, но неясно, зачем добавлена эта строка. Никакой информации она не несёт.

Неизвестный

21.05.2010, 00:39

общий

Прим Палвер:
Заметил только, что "right" в Опере пытается встать на одну строчку с "left". Это?

Да именно это, нужно чтобы right - был справа, а left - слева...

Неизвестный

21.05.2010, 00:50

общий

Прим Палвер:
Вот ссылка - чтобы можно было посмотреть - http://gron.com.ua/test/01.htm

откройте в Опере и IE - сразу станет все ясно ...

Неизвестный

21.05.2010, 01:36

общий

Попробуйте классы .right и .left применить не к ссылкам (a), а к пунктам списка (li). Всё равно при активности ссылок вы присваиваете им тот же фон - непонятно, зачем это прописывать вообще.

т.е.
не
<li><a class="left" href="#votebl"><span>Голосование</span></a></li>
а
<li class="left"><a href="#votebl"><span>Голосование</span></a></li>

ну и css подправить соответственно.

Ещё что я заметил при просмотре без картинок: в Опере при наведении начинает показываться другой цвет и размер текста. Причину феномена не нашёл.

Можно ещё повыбрасывать все display и подумать о каждом, нужен ли он здесь и какой именно.

Неизвестный

11.06.2010, 13:52

общий

Прим Палвер:
Спасибо, все получилось

Форма ответа

Отправка постов/ответов доступна только зарегистрированным и подтвержденным пользователям.

Если Вы уже зарегистрированы на Портале - войдите в систему, если Вы еще не регистрировались - пройдите простую процедуру регистрации.