iframe vs ff&opera

[dmitriy11340]

всем привет.

столкнулся с серьёзной проблемой, никак не могу решить её.

iframe отлично работает в chrome и safari, но отказывается от height:100% в firefox и opera.

сверстал сайт на дивах без использования display для улучшенной совместимости, в одном из блоков, подгружается контент из файлов 'page1.htm' ,'page2.htm' и 'page3.htm'.

именно тут и возникает эта грабля.

пробовал различные скрипты, ничего не помогает.

если в content в css задать например height:300px то работает отлично, но в процентах не хочет, и возвращяется на минимальное значение, как будто к iframe вообще не применялось height.

max-height не помогает также.

единственное что в состоянии растянуть в процентах iframe это если добавить в дефолты height:100% в самую верхушку css,

/*css reset*/
*{
	margin:0px;
	padding:0px;
	}

но после этого вся структура сайта полностью разрушается, как будто выставили везде position:absolute и любые height ниже не слушает.

фрагмент из index.htm

<!--				content_right-->
				<div id="content">
Error Message: An Error Has Occurred In the Script on This Page
				</div>

фрагмент из index.css

/*cframe*/
.cframe{
	border:none;
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	}
/*id content*/
#content{
	height:100%;
	}

фрагмент из index.js

/*content frames*/
function cframe1(id){
if(id=="content"){document.getElementById(id).innerHTML=
"<iframe class='cframe'frameborder='no'scrolling='auto'src='page1.htm'>Your browser doesn't support iframe</iframe>";}
}
function cframe2(id){
if(id=="content"){document.getElementById(id).innerHTML=
"<iframe class='cframe'frameborder='no'scrolling='auto'src='page2.htm'>Your browser doesn't support iframe</iframe>";}
}
function cframe3(id){
if(id=="content"){document.getElementById(id).innerHTML=
"<iframe class='cframe'frameborder='no'scrolling='auto'src='page3.htm'>Your browser doesn't support iframe</iframe>";}
}

подскажите как решить эту граблю без использования php

[SelenIT]

А у ближайшего предка #content какая высота? Цепочка от html нигде не порвалась?

[dmitriy11340]

А у ближайшего предка #content какая высота? Цепочка от html нигде не порвалась?

да, я по наччалу так и думал, но код уже вымучанный и проверенный, маловероятно что я мог где то его порвать...

выкладываю весь кусок css с разметкой

/*index.css
rci(row column index)
row(0..f),col(0..f)
rci0	header
rci7	content
rcif	footer
*/
/*css reset*/
*{
	margin:0px;
	padding:0px;
	}
body{
	width:100%;
/*	position: fixed;*/
	font:14px/14px arial,sans-serif;
/*	background:url(index.jpg) no-repeat top center;*/
	background-color:#fff;
	}
/*no script*/
.noscript{
	display:none;
	}
/*table*/
.rci{
/*	display:inline-block;*/
	width:100%;
	height:100%;
	min-width:800px;
	min-height:600px;
	text-align:center;
	}
/*table_header_left*/
.rci00{
	width:50%;
	height:10%;
	min-height:80px;
	float:left;
/*	background: url("hleft.png") no-repeat scroll center bottom transparent;*/
	}
/*table_header_right*/
.rci0f{
	width:50%;
	height:10%;
	min-height:80px;
	float:left;
/*	background: url("hright.png") no-repeat scroll center bottom transparent;*/
	}
/*table_content_left*/
.rci70{
	width:25%;
	height:80%;
	min-height:160px;
/*	max-width:200px;*/
	float:left;
	}
/*table_content_right*/
.rci7f{
	width:75%;
	height:80%;
	min-height:160px;
	float:left;
	}
/*table_footer_left*/
.rcif0{
	width:50%;
	height:10%;
	float:left;
	}
/*table_footer_right*/
.rciff{
	width:50%;
	height:10%;
	float:left;
	}
/*cframe*/
.cframe{
	border:none;
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	}
/*id content*/
#content{
	height:100%;
	}
/*</row(0..f)col(0..f)>*/

сия радость находиться внутри дива /*table_content_right*/, т. е. .rci7f и занимает большую часть страницы

p. s. он и есть предок собственно

p. s. s. даже если учесть его ограничение 80% (чтобы дивы не расползлись, там всё впритык), то в опере и фаирфоксе iframe вообще статичен, и может быть 100px занимает по высоте или даже 50, а в хроме и сафари тянется как резина без проблем

Edited June 21, 2011 by dmitriy11340

[SelenIT]

Так уже у body нет height:100%. Если добавить html, body { height: 100%; } — не поможет?

[dmitriy11340]

Так уже у body нет height:100%. Если добавить html, body { height: 100%; } — не поможет?

body{
	width:100%;
	height:100%;

неа, уже пробовал, фактически в каждый класс ставил height:100%. хром и сафари корректно отрабатывает и без него, а опере и фаирфоксу по тангенсу

[SelenIT]

Для html тоже надо, а то body не поймет, от кого эти 100% брать (таков уж стандарт).

А вот то, что хром "и так работает", подозрительно. Какой доктайп?

[dmitriy11340]

Для html тоже надо, а то body не поймет, от кого эти 100% брать (таков уж стандарт).

А вот то, что хром "и так работает", подозрительно. Какой доктайп?

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

вообще старался следовать w3.org

для наглядного примера, выкинул контент и убрал украшения, закинул этот комплект с граблей сюда

правда хостинг там вставляет свой линк powered by, так что архив с оригиналом тут

может быть кто то сможет разобраться как хакнуть iframe для firefox и opera

хотя конечно не исключаю что при верстке где то у меня руки были не из того места, и iframe height:100% работает хорошо у других, но пока что ошибки у себя найти не смог..

p. s. код почистил как смог, так что выглядит немного убого, в оринигале у меня просто оформлены кнопки и фрейм по красивее, а так тоже самое.

Edited June 22, 2011 by dmitriy11340

[SelenIT]

У html нет height {100%}, как я и предполагал. Если поставить, всё растянется.

А вот то, что Хром при таком раскладе растягивает - для меня сюрприз...

[dmitriy11340]

У html нет height {100%}, как я и предполагал. Если поставить, всё растянется.

А вот то, что Хром при таком раскладе растягивает - для меня сюрприз...

кажется всё получилось, правда есть неувязки с всякими css красивостями, оказывается нельзя внутри контента с iframe включать ещё один div, даже пустой, это тоже ведёт к потери height:100%

буду разбираться дальше, я раньше никогда html стиль не использовал, думал что body основной, спасибо за подсказку