ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / display & margin/padding
13 сообщений из 13, страница 1 из 1
display & margin/padding
    #35895163
gugu09
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
gugu09
Гость
Дано: Внутри ячейки таблицы DIV-элемент, внутри которого динамически (т.е. уже после загрузки страницы) загружается немалых размеров картинка (меняется src у img)
Нужны отступы, т.е. рабочие margin/padding, и работающий во всех браузерах код.
Начальные css-значения элемента DIV - overflow: visible

Что имеем:

1. при display: inline во всех браузерах загрузка картинки нормально растягивает ячейку вниз, но не работают ни margin, ни padding
2. при display: block в IE нормально сдвигает вниз, в FF3 размер ячейки не меняется, а накладывается на содержимое ниже
3. при display: inline-table в FF3 нормально, в IE размер ячейки не меняется, а содержимое вне DIV-а просто не видно

Как бороться? :(
...
Рейтинг: 0 / 0
26.03.2009, 23:04
| Ответить | Цитировать | Написать  
display & margin/padding
    #35895451
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
gugu09Как бороться? :(
Начни с написания тестового примера и выкладывай его тут...
...
Рейтинг: 0 / 0
27.03.2009, 08:27
| Ответить | Цитировать | Написать  
display & margin/padding
    #35896497
gugu09
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
gugu09
Гость
ну если это поможет, то вот (нужны еще маленький рисунок aa.bmp и большой alert.png)

Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="ru-ru" xml:lang="ru-ru">
<head>
<title>Display & margin/padding - Test example</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-language" content="ru-ru" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="resource-type" content="document" />
<meta name="distribution" content="global" />
<meta name="copyright" content="" />
<meta name="keywords" content="" />
</head>

<style>
.m { display: block; padding: 0px 20px; overflow: visible; height: 90px; }
</style>

<script type="text/javascript">
function change(url) {
  document.getElementById('f').src = url;
}
</script>

<body>

<table border>
<tr><td>aa aa aa aa aa</td></tr>
<tr><td onmouseover="change('alert.png')" onmouseout="change('aa.bmp')">
  <div id="k" class="m">bb bb bb bb bb <br /><img id="f" src="aa.bmp" alt="ee" />bb bb bb bb<br />bb bbbb <br />bb bb</div>
</td></tr>
<tr><td>cc cc cc cc cc cc</td></tr>
<tr><td>dd dd dd dd dd</td></tr>
</table>

</body>
</html>

фишка в том, что, если display: block, FF3 при установленном height: 90px перестает менять размер элемента. Как бы его сбросить с помощью javascript?

PS Приложить архивом не смог :( . Видимо, как всегда, нехватает прав.
...
Рейтинг: 0 / 0
27.03.2009, 13:59
| Ответить | Цитировать | Написать  
display & margin/padding
    #35903034
gugu09
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
gugu09
Гость
Никто не может мне помочь?
...
Рейтинг: 0 / 0
31.03.2009, 13:27
| Ответить | Цитировать | Написать  
display & margin/padding
    #35903267
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Так чего тебе нужно-то?
Есть ячейка, в ней текст + картинка + текст... Картинка потом меняется - ячейка увеличивается. Уменьшается - все возвращается на исходную...

Так?
----------
Cache for Windows (x86-32) 2007.1.3 (Build 607) Wed Oct 17 2007 02:12:09 EDT
...
Рейтинг: 0 / 0
31.03.2009, 14:20
| Ответить | Цитировать | Написать  
display & margin/padding
    #35903295
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Такое

Код: plaintext
1.
2.
3.
4.
5.
.m {
	display: block; 
	padding: 0px 20px; 
	min-height: 200px; 
	overflow: visible;
}

Работает одинаково в Опере и ФФ... Но ИЕ клал на

Код: plaintext
min-height: 200px;
----------
Cache for Windows (x86-32) 2007.1.3 (Build 607) Wed Oct 17 2007 02:12:09 EDT
...
Рейтинг: 0 / 0
31.03.2009, 14:26
| Ответить | Цитировать | Написать  
display & margin/padding
    #35904294
gugu09
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
gugu09
Гость
krvsaТак чего тебе нужно-то?Нужно, чтобы работало во всех браузерах. Вышеприведенный пример не работает (криво работает) в FF3 и IE8, но нормально в IE6. Значит и в опере мой вышеприведенный код без твоих изменений тоже не работает. Я чумею :'( . Это садизм какой-то :((

krvsaРаботает одинаково в Опере и ФФ... Но ИЕ клал наподдержка IE больше важна исключительно из-за популярности.

Раз невозможно создать универсальный код, подскажите кто-нибудь как в IE8 заставить работать.
...
Рейтинг: 0 / 0
31.03.2009, 19:36
| Ответить | Цитировать | Написать  
display & margin/padding
    #35904374
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
gugu09как в IE8 заставить работать.
У меня такого еще нет...
...
Рейтинг: 0 / 0
31.03.2009, 20:50
| Ответить | Цитировать | Написать  
display & margin/padding
    #35904426
gugu09
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
gugu09
Гость
если есть желание - ссылка на релиз IE8 для скачивания доступна на сайте микрософт
чую, все-таки придется написать "работает только в FF3 и ниип@#$т" :(

к "капризам" IE6 теперь добавились "капризы" IE8, а идентифицировать IE8 от его предшественников средствами js пока не представляется возможным.
...
Рейтинг: 0 / 0
31.03.2009, 21:28
| Ответить | Цитировать | Написать  
display & margin/padding
    #35904804
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
gugu09чую, все-таки придется написать "работает только в ...

Ну может и не все так плохо... Вот например идейка

 
<- Код тут
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
...
<style>
.h {
	float: left;
	width:  0 ;
	height: 200px; 
}
.m {
	float: left;
	display: block; 
	padding: 0px 20px; 
	overflow: visible;
}
</style>
...
<table border>
<tr>
	<td>aa aa aa aa aa</td>
</tr>
<tr>
	<td onmouseover="change('1.jpg')" onmouseout="change('2.jpg')">
		<div class="h"></div>
		<div id="k" class="m">
			bb bb bb bb bb 
			<br />
			<img id="f" src="2.jpg" alt="ee" />
			bb bb bb bb
			<br />bb bbbb 
			<br />bb bb
		</div>
	</td>
</tr>
<tr>
	<td>cc cc cc cc cc cc</td>
</tr>
<tr>
	<td>dd dd dd dd dd</td>
</tr>
</table>
...
...
Рейтинг: 0 / 0
01.04.2009, 08:29
| Ответить | Цитировать | Написать  
display & margin/padding
    #35906068
gugu09
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
gugu09
Гость
не пойдет, потому что:
1. картинка может быть гигантских размеров
2. приведенный мною стиль для класса m (включая height) можно менять только после загрузки страницы, т.е. средствами js
...
Рейтинг: 0 / 0
01.04.2009, 15:39
| Ответить | Цитировать | Написать  
display & margin/padding
    #35906153
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
gugu091. картинка может быть гигантских размеров

Так вроде и с большими все работает...

gugu092. приведенный мною стиль для класса m (включая height) можно менять только после загрузки страницы, т.е. средствами js

Что мешает поменять не в "m", а в "h"? Но решать конечно тебе...
...
Рейтинг: 0 / 0
01.04.2009, 16:00
| Ответить | Цитировать | Написать  
display & margin/padding
    #35906720
gugu09
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
gugu09
Гость
krvsaТак вроде и с большими все работает...Картинка размером 200 пикселей в высоту выйдет за пределы, т.к. она в div'е с классом m (display: block).

krvsaЧто мешает поменять не в "m", а в "h"? Но решать конечно тебе...Нельзя распихать свойства display и height в разные элементы. Приведенный мною пример упрощен.
...
Рейтинг: 0 / 0
01.04.2009, 19:27
| Ответить | Цитировать | Написать  
13 сообщений из 13, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / display & margin/padding
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=35896497&tid=1454996]:
 0ms
get settings:
 6ms
get forum list:
 12ms
check forum access:
 2ms
check topic access:
 2ms
track hit:
 147ms
get topic data:
 8ms
get forum data:
 2ms
get page messages:
 37ms
get tp. blocked users:
 1ms
others: 207ms
total:  424ms
созд. / загр.: 424ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]