Компьютерный форум NoWa.cc - Не правильное отображение блоков li в IE6. В FF и Opera всё нормально.

Компьютерный форум NoWa.cc (https://nowa.cc/index.php)

- CSS (https://nowa.cc/forumdisplay.php?f=313)

- - Не правильное отображение блоков li в IE6. В FF и Opera всё нормально. (https://nowa.cc/showthread.php?t=312418)

Borod

07.12.2010 11:03

Не правильное отображение блоков li в IE6. В FF и Opera всё нормально.

Добрый день.
Опять столкнулся с проблемой кривого отображения в IE6! В FF и Opera всё нормально.
Чего уже не делал, не помогает!
------------------------------------------------------------------
Расположение блоков li в FF и Opera нормальное.
http://eo4321.kidlife.com.ua/0/ff.jpg

В IE6 сползает вниз блок <li id="your_account">.
http://eo4321.kidlife.com.ua/0/fe.jpg

КОД HTML -------------------------------------------------------------

Код HTML:

<div id="header_user">

    <p id="header_user_info">

Добро пожаловать,<a href="http://eo4321.kidlife.com.ua/my-account.php">Вход</a>

    </p>

    <ul id="header_nav">

                <li id="shopping_cart">

                       <a title="Ваша корзина" href="http://eo4321.kidlife.com.ua/order.php">Корзина:</a>

               <span class="ajax_cart_quantity hidden"></span> 

                       <span class="ajax_cart_product_txt hidden">товар</span>

                       <span class="ajax_cart_product_txt_s hidden">товара</span>

                       <span class="ajax_cart_product_txt_d hidden">товаров</span>

                <span class="ajax_cart_total hidden">0 грн.</span>

                <span class="ajax_cart_no_product">(пустая)</span>

        </li>

        <li id="your_account">

                <a title="Ваш аккаунт" href="http://eo4321.kidlife.com.ua/my-account.php">Ваш аккаунт</a></li>

    </ul>

</div>

КОД CSS -------------------------------------------------------------
<div id="header_user">

Цитата:

#header_right #header_user {
background-image: url("../img/logo_1.jpg");
background-repeat: no-repeat;
float: right;
font-weight: bold
height: 40px;
width: 980px;

Цитата:

#header_user p {
color: #595A5E;
padding-right: 3px;

Цитата:

#header_user ul {
padding-right: 3px;
padding-top: 0.3em;

Цитата:

#header_user li {
display: inline;
float: right;
line-height: 18px;
white-space: nowrap;

Подскажите, как исправить данный глюк в IE6 ?

Lacriss

07.12.2010 17:06

Re: Не правильное отображение блоков li в IE6. В FF и Opera всё нормально.

Borod, если использовать только ту информацию, которая предоставлена в вашем посте, то ссылка на аккаунт располагается там, где ей и положено быть. Перейдя на ваш сайт проблему пронаблюдал. Чтобы помочь надо будет детально изучить содержимое стилей. ошибка кроется где то в другом месте.

errante

07.12.2010 19:35

Re: Не правильное отображение блоков li в IE6. В FF и Opera всё нормально.

Чет у тебя все криво :( имеется ввиду CSS файл
Большое излишество id - в них просто теряешься, особенно там где можно было обойтись обычным классом или одним блоком с указанием различных значений для внутрених html тэгов.

Цитата:

#header_user ul {
padding-right: 3px;
padding-top: 0.3em;

Не красиво - определись или em или всеже px, хотя и не кретично, но лучше что нить одно для конкретного блока,
а еще лучше сделать павильно:
padding: top right bottom left; т.е. например padding: 3px 3px 0 0;
задавай отступы для всех сторон, помни что некоторые значения, например отступы, цвет ссылок и т.д. наследуются.

Кроме того шестой ишак не правильно считает (взаимодействует) с внешними и внутреними отступами для соседних блоков, а ты делашь все блоками параметр id.
Например если margin = 10px и padding = 10px то все браузеры кроме шестого ишака считают отступ равным 20px, ишак считает равным 10px.
+ система счисления у браузеров разная, разница при отсчете позиций как правило равна 1px

Borod

07.12.2010 19:54

Re: Не правильное отображение блоков li в IE6. В FF и Opera всё нормально.

Уважаемые спецы очень нужна ваша помощь!!!

Цитата:

Сообщение от Lacriss (Сообщение 3591301)

BorodЧтобы помочь надо будет детально изучить содержимое стилей.

Что-для этого нужно?

Добавлено через 5 минут

Цитата:

Сообщение от errante (Сообщение 3591566)

Чет у тебя все криво

Это не у меня, это у CMS Prestashop, переделываю тему под себя.
Остальное поправим. Но как определить из-за чего этот баг появляется?

errante

07.12.2010 19:56

Re: Не правильное отображение блоков li в IE6. В FF и Opera всё нормально.

Цитата:

Сообщение от Borod (Сообщение 3591583)

Что-для этого нужно?

Выложи CSS файл
а лучше перепиши все что касается выложенного тобой блока, должно получится что то типа этого

Код HTML:

CSS

#header_user {margin 0; padding: 0; и т.д. 

времено укажи параметр для определения границ блока

 сразу будет видно некоторые вещи border: 1px solid #ff0000;}

#header_user p {параметры}

#header_user a {параметры}

#header_user ul {параметры}

#header_user li {параметры}



твой код будет выглядеть легче и проще (как пример):



<div id="header_user">

    <p>Добро пожаловать,<a href="#">Вход</a></p>

    <ul>

          <li>

               <a href="#">Корзина:</a>

        </li>

        <li>

              <a href="#">Ваш аккаунт</a>

       </li>

    </ul>

</div>

Цитата:

Сообщение от Borod (Сообщение 3591583)

Но как определить из-за чего этот баг появляется?

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

Вот ошибки валидности:

Borod

07.12.2010 20:44

Re: Не правильное отображение блоков li в IE6. В FF и Opera всё нормально.

Цитата:

Сообщение от errante (Сообщение 3591599)

Вотошибки[/COLOR][/URL] валидности:

В основном как я понял там ошибки "Одинаковые цвета для текста и фона используются в следующих местах".

Добавлено через 31 минуту

Цитата:

Сообщение от errante (Сообщение 3591599)

Времено укажи границы соседних болоков,

Посмотрел по блокам, блок <li id="your_account"> выходит из блока <div id="header_user">, хотя места ему хватает, даже если увеличить высоту блока <div id="header_user">, всё равно блок <div id="header_user"> висит внизу за блоком <div id="header_user">!
Задал пааметры (высота и ширина) блоков #header_user #shopping_cart и #header_user #your_account, ничего не поменялось
Я в ступоре ..... Почему....?

errante

07.12.2010 20:55

Re: Не правильное отображение блоков li в IE6. В FF и Opera всё нормально.

У тебя, на вскидку, выходит 4-е блока
id="header_user" - 1-й блок
id="header_user_info" - 2-ой блок
id="header_nav" - 3-й блок
id="shopping_cart" - 4-й блок

без указания параметра float блоки по умолчанию позиционируются вертикально. При значении float: right; блоки позиционируются с правой стороны по длине, при привышении длины блоки переносятся по вертикали (это как бы на пальцах пояснение :) )
у всех блоков должно быть значение float: right; - попробуй поставить.

Borod

07.12.2010 23:39

Re: Не правильное отображение блоков li в IE6. В FF и Opera всё нормально.

Цитата:

Сообщение от errante (Сообщение 3591741)

У тебя, на вскидку, выходит 4-е блока
id="header_user" - 1-й блок
id="header_user_info" - 2-ой блок
id="header_nav" - 3-й блок
id="shopping_cart" - 4-й блок

И ещё блок:
id="your_account" - 5-й блок
id="your_account" и id="your_account" находяться внутри блока id="header_nav" .

Добавлено через 2 часа 25 минут

Цитата:

Сообщение от errante (Сообщение 3591741)

у всех блоков должно быть значение float: right; - попробуй поставить.

Ставил всем блокам float: right; задавал высоту и ширину блоков, чего только не делал, всё равно блок id="your_account" вылазит из блока id="header_nav"!

errante

08.12.2010 19:45

Re: Не правильное отображение блоков li в IE6. В FF и Opera всё нормально.

Цитата:

Сообщение от Borod (Сообщение 3591797)

вылазит из блока id="header_nav"

проверь отступы (margin и padding), отсутствующие принудительно установи в 0 и посмотри будут ли изменения.

Borod

08.12.2010 20:47

Re: Не правильное отображение блоков li в IE6. В FF и Opera всё нормально.

Цитата:

Сообщение от errante (Сообщение 3593450)

проверь отступы (margin и padding), отсутствующие принудительно установи в 0 и посмотри будут ли изменения.

Проставил margin: 0; padding: 0; ничего не поменялось!

Borod

09.12.2010 12:05

Re: Не правильное отображение блоков li в IE6. В FF и Opera всё нормально.

Поставил хак для IE 6
#header_user li#your_account { _position: absolute; _right: 168px; _top: 91px}
Всё заработало!

Текущее время: 13:03. Часовой пояс GMT +3.

Время генерации страницы 0.02784 секунды с 9 запросами