ugrás a tartalomhoz

table, iframe - html5 inkompatibilitás

hollo · 2010. Ápr. 21. (Sze), 20.22
Kedves közösség,

egy olyan oldal kialakításán dolgozom, amelyben a képernyő két részre osztott, az alsó részen kell megjelenítenem a betöltött tartalmat. Mivel teljes képernyőn kell dolgozni, ha kell, görgetősávot is megjelenítve, én egy iframe+táblázat-jellegő megoldás mellett döntöttem.

A releváns kód alant látható:

<!--<!DOCTYPE html>-->
<html>
<head>
	<meta charset="UTF-8">
<style>
body, a, div, iframe{padding:0px; margin:0px;}
body{font-family:sans-serif; height:100%; background-color:#efefef}
#Menu{height: 60px; overflow:hidden; margin:0px; padding:0px;}

ul#Menu{list-style:none;}
#Menu li{display:block; float:left;}
li a{color:inherit; text-decoration:none;display:block; padding:10px; margin:10px; color:#F1EEE2; background-color:#ba3030; -moz-border-radius-bottomleft: 8px; -moz-border-radius-topright: 8px;}
li a:hover, li a:target{background-color:#b12929;}
#Content{border:0px;}

#Wrapper{width:100%; height:100%; display:table;}
	#Wrapper .Row{display:table-row;}
	#Wrapper .Cell{display:table-cell;}
		#Content{width:100%; height:100%;}
</style>
</head>
<body>
	<div id="Wrapper">
		<div class="Row">
			<ul id="Menu" class="Cell">
				<li><a href="..">☜ Vissza</a></li>
				<li><a href="elso.html" target="Content">Első</a></li>
				<li><a href="masodik.html" target="Content">Második</a></li>
			</ul>
		</div>
		<div class="Row">
			<iframe id="Content" name="Content" class="Cell" src="nulladik.html"></iframe>
		</div>
	</div>
</body>
</HTML>
Furdcsa módon, ha az első sort kengedem a komment-jelek közül, az iframe keretem egészen apróra összeugrik. Miért?

Van valami változás az új html5-ben, ami a megjelenítést jelentősen befolyásolja? Mi lehet erre a megoldás?

Előre is köszönettel,
H
‹ mp3 lejátszás lejátszási listáról HTML-ben Wpress téma beüzemelés ›
 ■
1

html

Poetro · 2010. Ápr. 21. (Sze), 23.23
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<style>
body, a, div, iframe {padding:0px; margin:0px;}
body{font-family:sans-serif; height:100%; background-color:#efefef; overflow: hidden}
html {
  height: 100%;
}
#Menu{height: 60px; overflow:hidden; margin:0px; padding:0px;}


ul#Menu{list-style:none;}
#Menu li{display:block; float:left;}
li a{color:inherit; text-decoration:none;display:block; padding:10px; margin:10px; color:#F1EEE2; background-color:#ba3030; -moz-border-radius-bottomleft: 8px; -moz-border-radius-topright: 8px;}
li a:hover, li a:target{background-color:#b12929;}
#Content{border:0px;}

#Wrapper{width:100%; height:100%; display:table;}
    #Wrapper .Row{display:table-row;}
    #Wrapper .Cell{display:table-cell;}
        #Content{width:100%; height:100%;}
    #Wrapper .main {
      height: 100%;
    }
</style>
</head>
<body>
    <div id="Wrapper">
        <div class="Row">
            <ul id="Menu" class="Cell">
                <li><a href="..">☜ Vissza</a></li>
                <li><a href="elso.html" target="Content">Első</a></li>
                <li><a href="masodik.html" target="Content">Második</a></li>
            </ul>
        </div>
        <div class="Row main">
            <iframe id="Content" name="Content" class="Cell" src="nulladik.html"></iframe>
        </div>
    </div>
</body>
</html>