Зазоры между фоновыми рисунками в IE @ DeForum.ru
DeДверь  
Логин:  
Пароль:  
  Автологин  
   
Разместить рекламу
Письмо админу
Правила | FAQ | *Поиск | Наша команда | Регистрация | Вход
 
 
 Страница 1 из 1 [ Сообщений: 35 ] 
*   Список форумов / Начинка и техника / Программирование для WWW » ответить » создать топик « | »
Автор Сообщение
Е1ena Жен.
постоянный участник
116
Сообщения: 3664
Зарегистрирован: 12.03.05
Заголовок сообщения: Зазоры между фоновыми рисунками в IE
Сообщение Добавлено: 18 Май 2005, 10:11:12 
Имеются три блока, в каждом из которых находится фоновой рисунок. Причем, для крайних блоков фоновый рисунок полностью соответствует их размеру, а средний заполняется однопиксельной полоской. В нормальных браузерах все тип-топ, а IE разделяет блоки тонкими вертикальными полосами, фона начисто лишенными.

Стили:
Код:
.razdel-left
{
width: 200px;
float: left;
height: 90px;
background-image: url(venzleft.gif);
}
.razdel-right
{
width: 200px;
float: right;
height: 90px;
background-image: url(venzright.gif);
}
.razdel-center
{
margin-left: 200px;
margin-right: 200px;
height: 90px;
background-image: url(foot.gif);
background-repeat: repeat-x;
background-position: bottom;
}


И, собственно, код:
Код:

 <div class="razdel-left">&</div>
 <div class="razdel-right">&</div>
 <div class="razdel-center">текст</div>



В моем конкретном случае проблема, правда, не смертельная, но довольно неприятная. Кто-нибудь знает выход из ситуации? (при условии сохранения имеющейся структуры)
bE(o0L Муж.
постоянный участник
23
Сообщения: 3311
Зарегистрирован: 22.07.03
Откуда: сзабугра
Сообщение Добавлено: 18 Май 2005, 11:06:17 
ИМХО, следует писать в одну строчку... (хотя не уверен)
либо таблицей.

_________________
можно на ТЫ.
bE(o0L Муж.
постоянный участник
23
Сообщения: 3311
Зарегистрирован: 22.07.03
Откуда: сзабугра
Сообщение Добавлено: 18 Май 2005, 11:06:59 
перенос строки в коде скорее всего воспринимается как пробел, вот и зазоры

_________________
можно на ТЫ.
Бaзиль Муж.
участник
49
Сообщения: 1288
Зарегистрирован: 13.02.05
Откуда: Околомосковье
Сообщение Добавлено: 18 Май 2005, 12:25:05 
да, это особенность ие.

_________________
Не кочегары мы, не плотники,
Но сожалений горьких нет -
Как нет?
А мы дизайнеры-художники,
И с высоты вам шлем привет -
Привет!
(sp)
соучастник
0
Сообщения: 559
Зарегистрирован: 22.01.05
Сообщение Добавлено: 18 Май 2005, 13:00:15 
Можно попробовать насильно добавить нулевые padding и margin.

_________________
baby`s got an atom bomb
arlekino Муж.
соучастник
5
Сообщения: 481
Зарегистрирован: 05.07.01
Откуда: Москва
Сообщение Добавлено: 18 Май 2005, 15:02:19 
Е1ena, попробуйте свойство display: inline-block.
Е1ena Жен.
постоянный участник
116
Сообщения: 3664
Зарегистрирован: 12.03.05
Сообщение Добавлено: 18 Май 2005, 16:07:02 

bE(o0L писал(а):
ИМХО, следует писать в одну строчку... (хотя не уверен)



bE(o0L, что вы имеете ввиду? Убрала подчистую весь контент, перенесла все три дива на одну строку - результат не изменился.

Все padding и margin (кроме центрального блока, где margin-left: 200px; margin-right: 200px; и так по нулям. А display: inline-block убил верстку еще и в Опере. Наверное, это не лечится - IE must die.

А вообще, что-то я все больше люблю FF - картинка там просто загляденье, элементы становятся туда, куда их ставишь - чудеса да и только...
bE(o0L Муж.
постоянный участник
23
Сообщения: 3311
Зарегистрирован: 22.07.03
Откуда: сзабугра
Сообщение Добавлено: 18 Май 2005, 16:17:29 
я имею ввиду что такое у меня работает:
Код:
<style type="text/css">
<!--
.d {background-color: #FF0000;float: left;height: 100px;width: 100px;}
-->
</style>
<div class='d'>a</div><div class='d'>b</div><div class='d'>c</div>

и IE нормально, без разделений парсит.

_________________
можно на ТЫ.
Акела Муж.
Констататор
17
Сообщения: 7419
Зарегистрирован: 15.11.04
Сообщение Добавлено: 18 Май 2005, 16:24:34 
Е1ena, Вы бы ссылку лучше дали, понятнее будет. А так как-то ломает возиться с кодом и неизвестными рисунками.
Е1ena Жен.
постоянный участник
116
Сообщения: 3664
Зарегистрирован: 12.03.05
Сообщение Добавлено: 18 Май 2005, 16:51:45 
bE(o0L, IE нормально, без разделений парсит, если стоят два подрят блока с float: left. А в моей ситуации это не срабатывает.

Акела, хорошо, выложу куда-нибудь. Просто, я еще домен не зарегистрировала, а нормальный хостинг будет у меня только на днях.
bE(o0L Муж.
постоянный участник
23
Сообщения: 3311
Зарегистрирован: 22.07.03
Откуда: сзабугра
Сообщение Добавлено: 18 Май 2005, 17:11:45 
а зачем float: right; если они подряд идут?

_________________
можно на ТЫ.
Акела Муж.
Констататор
17
Сообщения: 7419
Зарегистрирован: 15.11.04
Сообщение Добавлено: 18 Май 2005, 17:11:54 
Е1ena, ну хоть на халявном, только не на народе и nm плз!
Е1ena Жен.
постоянный участник
116
Сообщения: 3664
Зарегистрирован: 12.03.05
Сообщение Добавлено: 18 Май 2005, 17:51:56 

bE(o0L писал(а):
а зачем float: right; если они подряд идут?



Потому что между ними у меня стоит такой блок:
Код:
razdel-center
{
margin-left: 200px;
margin-right: 200px;
height: 90px;
background-image: url(foot.gif);
background-repeat: repeat-x;
background-position: bottom;
}


Ладно, выложу страничку, станет понятно :gent:
Акела Муж.
Констататор
17
Сообщения: 7419
Зарегистрирован: 15.11.04
Сообщение Добавлено: 18 Май 2005, 17:55:49 
Ой, чуется мне, что как обычно в такого рода проблемах вопрос был задан не о том... Ну глянем попозже.
bE(o0L Муж.
постоянный участник
23
Сообщения: 3311
Зарегистрирован: 22.07.03
Откуда: сзабугра
Сообщение Добавлено: 18 Май 2005, 18:00:09 
Е1ena,
И что?

_________________
можно на ТЫ.
Е1ena Жен.
постоянный участник
116
Сообщения: 3664
Зарегистрирован: 12.03.05
Сообщение Добавлено: 20 Май 2005, 12:09:21 
Я все же дождалась своего хостинга и теперь могу дать ссылочку:
http://arteelle.com/temp/zags/index.html

Все это только на начальном этапе работы, так что не обессудьте. Вышеназванный глюк наблюдается в верхней части подвала в виде небольших щелей. (Небольших - потому, что фоновый рисуно средней части именно такой высоты)

Теперь, надеюсь, мы поймем друг друга :)
Inviz Муж.
соучастник
0
Сообщения: 687
Зарегистрирован: 05.04.05
Сообщение Добавлено: 20 Май 2005, 12:38:21 
в опере при увеличении уменьшении окна, правая скреплялка колонки с центром уезжает на колонку.
uggallery
новый человек
0
Сообщения: 31
Зарегистрирован: 11.08.04
Откуда: СПб
Сообщение Добавлено: 20 Май 2005, 12:56:19 

Е1ena писал(а):
глюк наблюдается в верхней части подвала в виде небольших щелей



Это похоже на 3-pixel gap. По ссылке есть лекарство, но в вашем случае отлично подойдет перемещение фоновой картинки (стиля background) из класса .razdel-center в класс .razdel
Код:
.razdel
{
clear: both;
background-image: url(foot0000.gif);
background-repeat: repeat-x;
background-position: bottom;
}

Таким вот образом.
Е1ena Жен.
постоянный участник
116
Сообщения: 3664
Зарегистрирован: 12.03.05
Сообщение Добавлено: 20 Май 2005, 14:46:24 
uggallery, большое спасибо! И за ссылку на лекарство и за указание того очевидного выхода, который я сама не смогла разглядеть. Зато теперь все отображается как надо. По приведенной мною выше ссылке я, правда, пока не буду исправлять, чтоб было понятно, из-за чего весь сыр-бор.

Inviz, да, про этот баг я тоже в курсе. Поэтому и говорила, что все больше люблю FF - там, пока, ничего подобного не заметила. Не хочется, правда, из-за Оперы код менять - решение довольно лаконичное получилось, но, наверное, прийдется.
Е1ena Жен.
постоянный участник
116
Сообщения: 3664
Зарегистрирован: 12.03.05
Сообщение Добавлено: 20 Май 2005, 16:50:05 
Раз зашел об этом разговор, то может мне кто ответит и на такие вопросы:

- существует ли способ сделать так, чтоб у Оперы расстояние до элемента, обозначенного как {position: absolute; right: 185px;} отсчитывалось не от границы окна, а от границы документа, как в FF и IE? (от этого и появляется неприятность с перемычкой в моем примере)

- есть ли какой-нибудь хороший способ заменить для IE свойство min-width? К чему приводит его отсутствие там тоже очень хорошо видно, к сожалению :cry:
arlekino Муж.
соучастник
5
Сообщения: 481
Зарегистрирован: 05.07.01
Откуда: Москва
Сообщение Добавлено: 21 Май 2005, 12:00:23 
Насчет IE.
Код:
width:expression(document.body.clientWidth>700?"100%":"700px")
Акела Муж.
Констататор
17
Сообщения: 7419
Зарегистрирован: 15.11.04
Сообщение Добавлено: 21 Май 2005, 18:57:10 
Е1ena, какой именно Оперы? В восьмой что-то не заметил разницы с ФФ.
Е1ena Жен.
постоянный участник
116
Сообщения: 3664
Зарегистрирован: 12.03.05
Сообщение Добавлено: 21 Май 2005, 19:29:23 
Акела, Opera 8 Beta. Посвежее версия есть, но установить руки не доходят. Но если сли Вы говорите, что в свежей версии глюк отсутствует, то это просто чудесно. Тогда я и заморачиваться по этому поводу не буду :cool:

arlekino, спасибо. Вот только не хочется мне для этого скрипт использовать. Подумаю над этим.
Акела Муж.
Констататор
17
Сообщения: 7419
Зарегистрирован: 15.11.04
Сообщение Добавлено: 21 Май 2005, 19:34:09 
Е1ena, 8.01 глюков не вижу. А седьмую снёс давно.
Е1ena Жен.
постоянный участник
116
Сообщения: 3664
Зарегистрирован: 12.03.05
Сообщение Добавлено: 21 Май 2005, 19:41:27 

Акела писал(а):
Е1ena, 8.01 глюков не вижу.



Это не может не радовать :beer:
Inviz Муж.
соучастник
0
Сообщения: 687
Зарегистрирован: 05.04.05
Сообщение Добавлено: 22 Май 2005, 00:59:47 
Акела,
:fie:
начни уменьшать окно и наблюдай, как будет скреплялка наезжать.

Е1ena,
отбою отбой. как говорится, рабоатйте :-)
Акела Муж.
Констататор
17
Сообщения: 7419
Зарегистрирован: 15.11.04
Сообщение Добавлено: 22 Май 2005, 01:14:41 
Inviz, аааааааа! До такой степени не ужимал. Да, есть такое. Но это лечится. Нестрашно. Но тогда уж и с ФФ не легче - картинка остаётся как есть, но при таком же сжатии отсутствует горизонтальная прокрутка.
Е1ena Жен.
постоянный участник
116
Сообщения: 3664
Зарегистрирован: 12.03.05
Сообщение Добавлено: 22 Май 2005, 10:03:36 
Жаль конечно, но раз отбой, так отбой :gent: А как такое лечится, если не секрет?
Inviz Муж.
соучастник
0
Сообщения: 687
Зарегистрирован: 05.04.05
Сообщение Добавлено: 22 Май 2005, 11:28:41 
Е1ena,
пересмотром своего отношения к абсолютному позиционированию в резиновой верстке :gent:
Акела Муж.
Констататор
17
Сообщения: 7419
Зарегистрирован: 15.11.04
Сообщение Добавлено: 22 Май 2005, 11:37:30 
Е1ena, грамотным, а главное, вдумчивым и творческим применением CSS. А также google.
Е1ena Жен.
постоянный участник
116
Сообщения: 3664
Зарегистрирован: 12.03.05
Сообщение Добавлено: 22 Май 2005, 11:42:44 
Ok
Inviz Муж.
соучастник
0
Сообщения: 687
Зарегистрирован: 05.04.05
Сообщение Добавлено: 22 Май 2005, 11:50:40 
я бы на месте елены дивы со скреплялками просто флоатил, как колонки.
Е1ena Жен.
постоянный участник
116
Сообщения: 3664
Зарегистрирован: 12.03.05
Сообщение Добавлено: 22 Май 2005, 11:59:23 
Inviz, хорошая мысль, наверное, так и поступлю.

А вообще, спасибо всем за помощь. Просто это мой первый коммерческий (а в целом - второй) сайт. А когда опыта нет, решения часто далеки от оптимальных.
Акела Муж.
Констататор
17
Сообщения: 7419
Зарегистрирован: 15.11.04
Сообщение Добавлено: 22 Май 2005, 12:14:41 
Е1ena, ну зато достойные старания в визуале и, главное, в корне правильный подход к вёрстке. Собственно, там чудес-то нету. Реально можно выделить или один или два элемента, ширина которых останется фиксированной за счёт изменения остального поля. А уж в них, соответственно, можно пихать всё, что ни попадя. :)
Е1ena Жен.
постоянный участник
116
Сообщения: 3664
Зарегистрирован: 12.03.05
Сообщение Добавлено: 22 Май 2005, 12:30:38 
Акела, спасибо за "достойные старания в визуале". Действительно, хотелось, что б хотя бы самой было приятно на это смотреть :) А на счет верстки, так хочется сразу учиться делать по-человечески. Так что, пытаюсь...
*   Список форумов / Начинка и техника / Программирование для WWW « | » » ответить » создать топик
 Страница 1 из 1 [ Сообщений: 35 ] 
Показать сообщения за:   Поле сортировки  
Найти:
Перейти:  
Уровень доступа: Вы не можете начинать темы. Вы не можете отвечать на сообщения. Вы не можете редактировать свои сообщения. Вы не можете удалять свои сообщения. Вы не можете добавлять вложения.
cron


ООО ДеФорум
При использовании материалов сайта ссылка на DeForum.ru — обязательна.
Проект Павла Батурина ©2001-2077; // Powered by phpBB © 2013 phpBB Group
Rambler's Top100