Перейти к содержимому

Сервис обмена электронных валют


Пропадает часть слоя

#1 Гость_kostyanet_*

Гость_kostyanet_*
  • Гости
0

Отправлено 08 Январь 2009 - 11:38

Столкнулся с проблемой - в слое (div) имеется плавающая вставка с небольшим количеством текста. На всякий случай чтобы она не вылезала из родителя, его содержание поджато на соответствующее расстояние в процентах. В ИЕ7 и Опере все работает как задумано, а в ИЕ6 часть родителя под вставкой просто исчезает.

Проблема в том, что нельзя задавать ширину родителя в явной форме например 100% - тогда за счет полей, обводок и отступов общая ширина контейнера получается больше 100% и появляется горизонтальная полоса прокрутки. Подгонять под какие-то меньшие проценты - не индустриально. Если убрать свойство position:relative; то в ИЕ6 все получается нормально, но убирать - нельзя: в контейнере несколько элементов с абсолютным позиционированием.

В общем я всяко-разно стучал в бубен - каменный цветок не выходил, пришлось разбить один стиль prodpage на два и соответственно обернуть контейнер еще одним дивом с обводками, полями и отступами без relative, внутри которого гнездится контейнер содержания с relative.

Может быть есть простое решение?

Вот изолированный кусок кода:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>test</title>

<style type="text/css">

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
	margin: 0;
	padding: 0;
}

.prodpage {
	position: relative;
	margin: 7px;
	font-size: 0.812em;
	padding: 5px;
	border: 2px solid orange;
	background-color: yellow;
}

.insert {
	width: 28%;
	float: right;
	border: 1px gray dashed;
	background-color: #FFEBD7;
}

.insert p {
	font-size: 0.812em;
	margin: 7px;
	text-align: right;
}

.insertfix {
	width: 70%;
	border-right: 2px orange solid;
}
	
</style>

</head>

<body>

	<div class="prodpage">
		<div class="insert">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ullamcorper. </p>
		</div>
		<div class="insertfix">
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ullamcorper. 
			In ac erat. Donec vitae mauris vitae justo lobortis adipiscing. Duis velit. 
			Suspendisse potenti. Nam arcu pede, auctor ac, eleifend et, vehicula sit amet, elit. 
			Aenean nibh eros, porttitor scelerisque, vehicula eget, tincidunt quis, mi. Aliquam 
			sodales gravida arcu. 
		</div>
	</div>		

</body>

</html>

Иллюстрация - в аттаче.

Прикрепленные изображения

  • bug.jpg

 

 

  • 0

#2 ZiTosS

ZiTosS
  • Пользователь
  • 5 148 сообщений
  • Репутация: 8

Отправлено 08 Январь 2009 - 16:20

Есть простое решение, просто ваш DOCTYPE strict Идёт со стандартами, стоит воспользоваться Transnational, он более мягок.

Transnational в IE: Если содержимое превышает заданную величину, то блок изменяет свои размеры, подстраиваясь под содержимое. В противном случае ширина блока равна значению width.

Кстати ещё можете попробовать значение ширины width: auto;
устанавливает ширину исходя из типа и содержимого элемента

_http://htmlbook.ru/css/width.html
А вот если что почитать поточнее
  • 0

#3 Гость_kostyanet_*

Гость_kostyanet_*
    Topic Starter
  • Гости

Отправлено 09 Январь 2009 - 02:23

Блок и так изменяет свои размеры подстраиваясь под контент - просто часть его обрезается визуально - вместе с обводками и всем остальным. Как отрубается. В этом и вопрос.
  • 0

#4 ZiTosS

ZiTosS
  • Пользователь
  • 5 148 сообщений
  • Репутация: 8

Отправлено 09 Январь 2009 - 03:15

Мде.. Перепробовал все варианты, прочитал ещё раз ваш вопрос.
Я считаю что тут подойдёт именно обвёртка, другого выхода не вижу. Просто у вас 2 противоречия.
1) вам нужны отступы
2) но этот элемент является relative

Если вы ему будете оставлять ширину по умолчанию и при этом ещё делать у внутреннего элемента обтекание, ваш блок всегда не будет на 100% растянут.

Хотя можно сделать так... Поставить вашему .prodpage height: 100%;
Но одна тока неурядица, в FF такой способ с абсолютными элементами не прокатывает в отличии от IE6, там всё отлично :)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>test</title>

<style type="text/css">

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
	margin: 0;
	padding: 0;
}

.prodpage {
	position:relative;
	margin: 7px;
	font-size: 0.812em;
	padding: 5px;
	border: 2px solid orange;
	background-color: yellow;
	height: 100%;
}

.insert {
	width: 28%;
	border: 1px gray dashed;
	background-color: #FFEBD7;
	float: right;
}

.insert p {
	font-size: 0.812em;
	margin: 7px;
	text-align: right;
}

.insertfix {
	width: 70%;
	border-right: 2px orange solid;
}
	
</style>

</head>

<body>
	<div class="prodpage">
		<div class="insert">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ullamcorper. </p>
		</div>
		<div class="insertfix">
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ullamcorper.
			In ac erat. Donec vitae mauris vitae justo lobortis adipiscing. Duis velit.
			Suspendisse potenti. Nam arcu pede, auctor ac, eleifend et, vehicula sit amet, elit.
			Aenean nibh eros, porttitor scelerisque, vehicula eget, tincidunt quis, mi. Aliquam
			sodales gravida arcu.
		</div>

	</div>

</body>

</html>

  • 0


Оформление форума – IPBSkins.ru