Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / display & margin/padding / 13 сообщений из 13, страница 1 из 1
26.03.2009, 23:04
    #35895163
gugu09
gugu09
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
display & margin/padding
Дано: Внутри ячейки таблицы 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
| Ответить | Цитировать | Написать  
27.03.2009, 08:27
    #35895451
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
display & margin/padding
gugu09Как бороться? :(
Начни с написания тестового примера и выкладывай его тут...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
27.03.2009, 13:59
    #35896497
gugu09
gugu09
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
display & margin/padding
ну если это поможет, то вот (нужны еще маленький рисунок 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
| Ответить | Цитировать | Написать  
31.03.2009, 13:27
    #35903034
gugu09
gugu09
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
display & margin/padding
Никто не может мне помочь?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
31.03.2009, 14:20
    #35903267
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
display & margin/padding
Так чего тебе нужно-то?
Есть ячейка, в ней текст + картинка + текст... Картинка потом меняется - ячейка увеличивается. Уменьшается - все возвращается на исходную...

Так?
----------
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
    #35903295
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
display & margin/padding
Такое

Код: 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, 19:36
    #35904294
gugu09
gugu09
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
display & margin/padding
krvsaТак чего тебе нужно-то?Нужно, чтобы работало во всех браузерах. Вышеприведенный пример не работает (криво работает) в FF3 и IE8, но нормально в IE6. Значит и в опере мой вышеприведенный код без твоих изменений тоже не работает. Я чумею :'( . Это садизм какой-то :((

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

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

к "капризам" IE6 теперь добавились "капризы" IE8, а идентифицировать IE8 от его предшественников средствами js пока не представляется возможным.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
01.04.2009, 08:29
    #35904804
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
display & margin/padding
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, 15:39
    #35906068
gugu09
gugu09
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
display & margin/padding
не пойдет, потому что:
1. картинка может быть гигантских размеров
2. приведенный мною стиль для класса m (включая height) можно менять только после загрузки страницы, т.е. средствами js
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
01.04.2009, 16:00
    #35906153
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
display & margin/padding
gugu091. картинка может быть гигантских размеров

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

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

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

krvsaЧто мешает поменять не в "m", а в "h"? Но решать конечно тебе...Нельзя распихать свойства display и height в разные элементы. Приведенный мною пример упрощен.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / display & margin/padding / 13 сообщений из 13, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 368ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1454996]:
 0ms
get settings:
 7ms
get forum list:
 12ms
check forum access:
 2ms
check topic access:
 2ms
track hit:
 73ms
get topic data:
 6ms
get forum data:
 2ms
get page messages:
 25ms
get tp. blocked users:
 1ms
others: 238ms
total:  368ms
x
x
Закрыть


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