[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Проблема с Mozilla и абсолютным позиционированием
gguest
Здравствуйте.

Создаю блок span, у него создаю закругленные углы с помощью изображений.
Все неплохо работает, но проблема с тем, что в Mozilla 4 углы правой стороны блока вылазят за сам блок. Во всех браузерах все нормально как и должно быть, нигде ничего не вылазит, даже в IE.

Вот изображение: http://savepic.ru/2548098.png
Вот код:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style
type="text/css">
html {
background-color: green;
}
.menu {
position: relative;
color: #353535;
background-color: white;
padding: 0.25em 0.5em;
margin: 0 0 0 10px;
}
.cm-sd {
background: url("/img/sidebars/cm_sprite.png") no-repeat scroll 0 0;
position: absolute;
}
.cm-sd-tl {
background-position: 0 0;
height: 6px;
width: 5px;
top: 0px;
left: 0px;
}
.cm-sd-tr {
background-position: -5px 0;
height: 6px;
width: 5px;
top: 0px;
right: 0px;
}
.cm-sd-bl {
background-position: -10px 0;
height: 6px;
width: 5px;
bottom: 0px;
left: 0px;
}
.cm-sd-br {
background-position: -15px 0;
height: 6px;
width: 5px;
bottom: 0px;
right: 0px;
}
</style>
</head>
<body>
<span
class="menu">
Some text
<ins class="cm-sd cm-sd-tl"></ins>
<ins
class="cm-sd cm-sd-tr"></ins>
<ins
class="cm-sd cm-sd-bl"></ins>
<ins
class="cm-sd cm-sd-br"></ins>
</span>
</body>
</html>




Как это исправить?



Спустя 43 минуты, 58 секунд (13.04.2011 - 23:29) inpost написал(а):
gguest
span - не блок, в твоём случае используй либо блок <div>, либо делай из спана блок: display:block

Спустя 12 часов, 8 минут, 41 секунда (14.04.2011 - 11:38) gguest написал(а):
Сделаю из спана блок, он будет растягиваться на всю строку, а нужно, чтобы только строку (слово) захватывало.

И все таки почему правые уголки в span вылазят за границу. А в div - нет.?

Спустя 2 минуты, 56 секунд (14.04.2011 - 11:41) gguest написал(а):
Вот здесь ничего не вылазит и тоже span: http://www.navitel.su/support/instructions/ (меню слева). А у меня ничего не получается.

Спустя 5 часов, 19 минут, 44 секунды (14.04.2011 - 17:00) inpost написал(а):
gguest
float:left добавь, и ширину.

Спустя 2 часа, 26 минут, 12 секунд (14.04.2011 - 19:27) gguest написал(а):
Спасибо!
Float помог.
Только бы еще понять почему... ))

Спустя 16 минут, 35 секунд (14.04.2011 - 19:43) inpost написал(а):
Потому что не тянет на всю ширину, а крепит к краю.

Спустя 10 минут, 13 секунд (14.04.2011 - 19:53) Snus написал(а):
gguest
В твоем случае лучше использовать конструкцию

ul, li {
margin: 0;
padding: 0;
}

ul {
list-style: none;
}

li {
float: left;
margin-left: 5px;
}


<ul>
<li>
1</li>
<li>
2</li>
<li>
3</li>
</ul>

Спустя 12 дней, 1 час, 29 минут, 47 секунд (26.04.2011 - 21:23) XCross написал(а):
Можно я подключусь? Тема немного схожая.

Интересует вопрос такого плана: как опрделить будет ли "разъезжаться" вся верстка на широкоформатных мониторах? Пишите в личку так как в эту тему не заглядываю....

Спустя 22 дня, 4 часа, 27 минут, 43 секунды (19.05.2011 - 01:51) Dmitriy29 написал(а):
Цитата (kmaks @ 26.04.2011 - 18:23)
Можно я подключусь? Тема немного схожая.

Интересует вопрос такого плана: как опрделить будет ли "разъезжаться" вся верстка на широкоформатных мониторах? Пишите в личку так как в эту тему не заглядываю....

если сделаешь гибкий дизайн то да, если в пикселях задашь то нет
Быстрый ответ:

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.