Javascript-форум - position:absolute и Хром

Javascript-форум (https://javascript.ru/forum/)

- (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)

- - position:absolute и Хром (https://javascript.ru/forum/xhtml-html-css/13812-position-absolute-i-khrom.html)

position:absolute и Хром

Не корректно отображается такое позиционирование в гугл Хром. в чем может быть проблема...? в ие, опере все окей. спс.

Cozmi, тестовый пример где?

<telepath-mode>не заданы: размеры блока и расстояние от верхнего края родительского элемента</telepath-mode>

2monolithed, всё вроде задано
сабж

<html>
<head>
<style type="text/css">
img.imagecache-product_list { padding:15px;}
span.catalog-grid-image a {position:relative;}
span.ramka {z-index:2; position: absolute; top:0px; left:0px; width:169px; height:119px; background: url('../images/sram.png') no-repeat red;}
span.catalog-grid-title  {display:block; width: 100%; text-align:center; position:relative; top:-5px;}
div.category-grid-products table td {position:relative;}
span.catalog-grid-sell-price {z-index:3; display:block; position:absolute; top:5px; right:2px; padding: 2px 7px; background:red; }
</style>
</head>

<body>
<div class="category-grid-products">
<table>
<tr>
<td>
<span class="catalog-grid-image">
<a href="/catalog/knigi/randy-m">
<img src="zz.jpg" alt="Randy M" title="Randy M"  class="imagecache imagecache-product_list" width="139" height="89" />
<span class="ramka">
</span>
</a>
</span>
<span class="catalog-grid-title">
<a href="/catalog/knigi/randy-m">
Randy M</a>
</span>
<span class="catalog-grid-sell-price">
<span class="uc-price">
245 р</span>
</span>
</td>
</tr>
</table>
</div>
</body>

</html>

красные области вызывают боль
посмотреть можно на http://www.w3schools.com/css/tryit.a...ition_absolute или ещё гденить
грусть.

podarok.fuckthis.ru? Звучит стремно:)

Цитата:

Сообщение от Cozmi

всё вроде задано

Если я правильно понял, у тебя все позиционирование идёт в ячейке таблицы... Но не стоит так расчитывать на её лояльное поведение к тебе в этом вопросе. :D Добавь ДИВ внутрь ячейки и будет тебе счастие.

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type='text/css'>
img.imagecache-product_list { 
	padding:15px;
}
span.catalog-grid-image a {
	position:relative;
}
span.ramka {
	z-index:2; 
	position: absolute; 
	top:0px; 
	left:0px; 
	width:169px; 
	height:119px; 
	background: url('../images/sram.png') no-repeat;
}
span.catalog-grid-title  {
	display:block; 
	width: 100%; 
	text-align:center; 
	position:relative; 
	top:-5px;
}
div.category-grid-products table td div {
	position:relative;
}
span.catalog-grid-sell-price {
	z-index:3; 
	display:block; 
	position:absolute; 
	top:5px; 
	right:2px; 
	padding: 2px 7px; 
	background: #eee; 
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class="category-grid-products">
	<table>
	<tr>
		<td>
		<div>
			<span class="catalog-grid-image">
				<a href="/catalog/knigi/randy-m">
					<img src="zz.jpg" alt="Randy M" title="Randy M"  class="imagecache imagecache-product_list" width="139" height="89" />
					<span class="ramka"></span>
				</a>
			</span>
			<span class="catalog-grid-title">
				<a href="/catalog/knigi/randy-m">Randy M</a>
			</span>
			<span class="catalog-grid-sell-price">
				<span class="uc-price">245 р</span>
			</span>
		</div>
		</td>
	</tr>
	</table>
</div>
</body>
</html>

Хотя сама твоя разметка строчными элементами уже какая-то ерунда... :-E

спс,
разметка не совсем моя, она почти вся уберкартовская... возможно её и следовало бы довести до ума... но зачем?_)

span.ramka это не выличило, да и не должно было...
если тока и его дивом обернуть... вроде <a><div>.*</div></a> -- но это вроде не валидно..

хаха прописываем родителям, от которых позиционируемся, display:block;
ТЕМА ЗАКРЫТА