Неправильное отображение блоков

@lomvasil · Регистрация: 14.12.2010

Author24 — интернет-сервис помощи студентам

добрый день!

в браузерах хром, мазилла, сафари и даже IE, эти два блока выглядят вот так:

а опера отказывается отображать, как задумано и показывает следующее:

оба филдсета заключены в дивы, имеют следующие аттрибуты:

HTML5

1
2

<fieldset style="display: inline; margin: 0px; margin-top: 30px; padding: 0px; width: 460px; height: 260px; float: left; top: 0px; left: 0px;">
<fieldset style="display: inline; margin: 0px; margin-top: 30px; padding: 0px; width: 460px; height: 260px; float: right; top: 0px; right: 0px;">

внутри все элементы в спанах с применением стиля:

CSS

1	position: absolute; top:...; left:...;

сориентируйте, плз, в чем может быть беда и куда копать?

@del_EX · 17.06.2011, 13:22

а если убрать?
display: inline;

@lomvasil · 17.06.2011, 15:31 **[ТС]**

убрал - выстроились как нужно, спасибо.

можете на пальцах объяснить, почему так было?
сама причина, почему опера не понимает чего-то, что понимают другие браузеры ясна - другой разработчик.
а конкретней сказать можете, что в опере не так?

@xand · 17.06.2011, 15:59

Не хотел создаать дополнительную тему, вопрос близок. Есть вертикальное многоуровневое меню, во всех браузерах нормально, кроме IE6, IE7. В данных браузерах смещаются блоки вправо (задан внутренний отступ padding-left)? хотя должно смещаться только содержимое.

HTML5

<ul class="menu">
 <li id="item-101">
  <a href="/" >Главная</a>
 </li>
 <li id="item-102">
  <a href="/index.php/kontakty" >Контакты</a>
 </li>
 <li id="item-106" class="active deeper parent">
  <a href="/index.php/istoriya" >История</a>
  <ul>
   <li id="item-112" class="active deeper parent">
    <a href="/index.php/istoriya/britaniya" >Британия</a>
    <ul>
     <li id="item-107" class="current active">
      <a href="/index.php/istoriya/britaniya/keltskaya-britaniya" >Кельтская Британия</a>
     </li>
     <li id="item-108">
      <a href="/index.php/istoriya/britaniya/rimskaya-britaniya" >Римская Британия</a>
     </li>
    </ul>
   </li>
  </ul>
 </li>
 <li id="item-109" class="deeper parent">
  <a href="/index.php/arkhiv" >Архив журнала</a>
  <ul>
   <li id="item-111">
    <a href="/index.php/arkhiv/vypusk-6" >Выпуск 6</a>
   </li>
   <li id="item-110">
    <a href="/index.php/arkhiv/vypusk-5" >Выпуск 5</a>
   </li>
  </ul>
 </li>
</ul>

CSS

/* ++++++++++++++  1 уровень  ++++++++++++++ */
.left_side ul.menu li, .right_side ul.menu li{
width:100%;
background:url(../images/nav_bg.png) repeat-x;
color:#fff;
}
.left_side ul.menu li a, .right_side ul.menu li a{
display:block;
}
.left_side ul.menu li a, .right_side ul.menu li a{
text-decoration:none;
background:url(../images/nav_bg.png) repeat-x;
padding-left:5px;
margin-bottom:1px;
font-weight:700;
height:35px;
line-height:35px;
}
 
.left_side ul.menu li a:link, .left_side ul.menu li a:visited, 
.right_side ul.menu li a:link, .right_side ul.menu li a:visited {
color:#fff;
}
 
.left_side ul.menu li a:hover, .right_side ul.menu li a:hover{
background: #314860;
}
 
/* ++++++++++++++  2 уровень  ++++++++++++++ */
.left_side ul.menu li.deeper ul li a:link, .left_side ul.menu li.deeper ul li a:visited ,
.right_side ul.menu li.deeper ul li a:link, .right_side ul.menu li.deeper ul li a:visited {
clear:both;
background:url(../images/marker.png) no-repeat 2px center;
padding-left:10px;
}
 
.left_side ul.menu li.deeper ul li a:hover, .right_side ul.menu li.deeper ul li a:hover{
background: #314860 url(../images/marker.png) no-repeat 2px center;
}
 
/* ++++++++++++++  3 уровень  ++++++++++++++ */
.left_side ul.menu li ul li ul , .right_side ul.menu li ul li ul {
 border: 0 !important;
 background: #f5f5f5 !important;
}
 
.left_side ul.menu li.deeper ul li.deeper ul li a:link,.left_side ul.menu li.deeper ul li.deeper ul li a:visited,
.right_side ul.menu li.deeper ul li.deeper ul li a:link,.right_side ul.menu li.deeper ul li.deeper ul li a:visited{
clear:both;
background-position:10px center; 
padding-left:18px;
}
/* ++++++++++++++  4 уровень  ++++++++++++++ */
.left_side ul.menu li.deeper  ul li.deeper  ul li.deeper  ul li  a:link, .left_side ul.menu li.deeper  ul li.deeper  ul li.deeper  ul li a:visited,
.right_side ul.menu li.deeper  ul li.deeper  ul li.deeper  ul li  a:link, .right_side ul.menu li.deeper  ul li.deeper  ul li.deeper  ul li a:visited{
clear:both;
padding-left:26px;
}
/* ++++++++++++++  5 уровень  ++++++++++++++ */
.left_side ul.menu li.deeper  ul li.deeper  ul li.deeper  ul li.deeper ul li  a:link, .left_side ul.menu li.deeper  ul li.deeper  ul li.deeper  ul li.deeper ul li a:visited,
.right_side ul.menu li.deeper  ul li.deeper  ul li.deeper  ul li.deeper ul li  a:link, .right_side ul.menu li.deeper  ul li.deeper  ul li.deeper  ul li.deeper ul li a:visited{
clear:both;
padding-left:34px;
}

Буду рад если поможете в данном вопросе...

Новые блоги и статьи
Как в цикле for перебрать все элементы в словаре в Python bytestream 24.01.2025 Словари в Python представляют собой мощные структуры данных, которые позволяют хранить информацию в формате ключ-значение. Эта особенность делает их незаменимыми при работе с данными, где требуется. . .	Как отменить rebase в Git hw_wired 24.01.2025 Git rebase представляет собой мощный инструмент для управления историей коммитов в системе контроля версий Git. Этот механизм позволяет разработчикам изменять последовательность, комбинировать или. . .	Как поменять цвет input placeholder с помощью CSS bytestream 24.01.2025 В веб-разработке оформление элементов пользовательского интерфейса играет ключевую роль в создании привлекательного и интуитивно понятного дизайна. Особое внимание уделяется формам ввода данных, где. . .	Как перебрать все значения в перечислении (enum) в C# bytestream 24.01.2025 Перечисление (enum) в языке программирования C# представляет собой специальный тип данных, который позволяет определить набор именованных констант. Этот мощный инструмент особенно полезен, когда. . .	Как обойтись без проверки на null, чтобы избежать NullPointerException в Java bytestream 24.01.2025 NullPointerException (NPE) является одним из самых распространенных исключений в Java, создающих серьезные проблемы при разработке программного обеспечения. Данное исключение возникает при попытке. . .	Что лучше использовать в href ссылок в JavaScript: "#" или "javascript:void(0)" bytestream 24.01.2025 При разработке веб-приложений важную роль играет правильное использование HTML-ссылок в сочетании с JavaScript. Одним из ключевых аспектов является выбор корректного значения атрибута href для. . .
Как узнать индекс элемента списка по его значению в Python hw_wired 24.01.2025 При работе с коллекциями данных в Python часто возникает необходимость не только манипулировать элементами списка, но и определять их точное местоположение. Индекс элемента представляет собой. . .	Как удалить коммит из ветки (branch) в Git hw_wired 24.01.2025 Система контроля версий Git является мощным инструментом для отслеживания изменений в коде и совместной работы над проектами. Она предоставляет разработчикам гибкость и возможность экспериментировать. . .	Чем Docker отличается от виртульной машины hw_wired 24.01.2025 В мире информационных технологий виртуализация стала неотъемлемой частью разработки и развертывания программного обеспечения. Этот подход позволяет создавать изолированные среды для запуска. . .	Как перейти с jQuery на Angular/AngularJS bytestream 24.01.2025 jQuery долгое время занимала позицию незаменимого инструмента, существенно упрощающего работу с DOM-элементами и асинхронными запросами. Эта библиотека произвела настоящую революцию в том, как. . .	Зачем добавляется while (1); в JSON. Безопасность JSON и его уязвимости bytestream 24.01.2025 JavaScript Object Notation (JSON) стал стандартом де-факто для обмена данными между клиентом и сервером. Этот легковесный формат данных обеспечивает удобное представление структурированной информации. . .	Как отметить чекбокс (установить checked) с помощью jQuery bytestream 24.01.2025 jQuery представляет собой мощную JavaScript-библиотеку, которая значительно упрощает манипуляции с элементами веб-страницы, включая работу с формами и их компонентами. Особое место в веб-разработке. . .

@del_EX 67 / 26 / 6 Регистрация: 15.06.2010 Сообщений: 75
	17.06.2011, 13:22	2
	а если убрать? display: inline; 1

@lomvasil 3 / 3 / 0 Регистрация: 14.12.2010 Сообщений: 25
	17.06.2011, 15:31 [ТС]	3
	убрал - выстроились как нужно, спасибо. можете на пальцах объяснить, почему так было? сама причина, почему опера не понимает чего-то, что понимают другие браузеры ясна - другой разработчик. а конкретней сказать можете, что в опере не так? 0

	17.06.2011, 15:59