このページを取得しましたが、ie < 7 と Opera 7.11 に問題があります。
これは私がすべてのブラウザでのレイアウトになりたいと思っていたものであり、これらは代わりに IE のものです: ie 5.5およびie 6.0。
xhtml は非常に単純です。
print "<div id=\"page\">
<div id=\"header\">
<ul id=\"nav\">
<li><a href=\"/\" class=\"first\">Címlap<div>Az oldal címlapja</div></a></li>
<li><a href=\"/blog\">Blogok<div>Minden bejegyzés</div></a></li>
<li><a href=\"/friss\">Friss tartalom<div>Aktuális témák</div></a></li>
</ul>
</div> <!-- header -->
<div id=\"main\"><div id=\"main-in\">
<div id=\"right\">";
do_boxes();
print "
</div> <!-- right -->
<div id=\"left\">";
do_content();
print"</div> <!-- left -->
</div></div><!-- main --> </div>";
投稿から作成されたコンテンツと投稿は次のようになります。
<div class="post">
<h2><a href="/blog/2/252/newcastleben-betiltottak-a-ketreces-tojast">Newcastleben betiltották a ketreces tojást</a></h2>
<div class="author">warnew | 2008. october 16. 20:26 </div>
<p>Az angliai Newcastle Városi Tanácsa kitiltotta a ketreces baromfitartásból származó tojásokat az iskolai étkeztetésből, személyzeti éttermekből, rendezvényekről es a "hospitality outletekből".</p>
<p>A ketreces csirke- és pulykahúst még nem tiltották be, de vizsgálják a kérdést, ahogy a <a href="http://en.wikipedia.org/wiki/Halal">Halal</a> hús és a ketreces tojásból készült sütemények és tésztafélék tiltását is.</p>
<ul class="postnav">
<li><a href="/blog/2/252/newcastleben-betiltottak-a-ketreces-tojast%7D">Tovább</a></li>
<li><a href="/blog/2/252/newcastleben-betiltottak-a-ketreces-tojast#comments">Hozzászólások (0)</a></li>
</ul>
</div> <!-- post -->
ボックスは次のようになります。
<div id="ownadbox" class="box">
<h5>Viridis matrica</h5>
<a href="http://viridis.hu/blog/2/172/nepszerusits-minket" title="Népszerűsíts minket"><img src="http://viridis.hu/files/viridis_matrica_jobb.png" alt="viridis matrica"/></a>
</div>
-私が思うのは-関連するcss:
body {
background : transparent url(/images/design/background.png) repeat;
}
#page {
margin : 0px auto;
width : 994px;
background : transparent url(/images/design/header.jpg) no-repeat top left;
}
div#header {
width : 746px;
margin : 0px auto;
}
div#header ul#nav {
padding-top : 170px;
margin-left : 3px;
margin-right : 3px;
border-bottom : #896e51 solid 7px;
overflow : hidden;
}
div#header ul#nav li {
display : block;
float : left;
width : 120px;
margin-bottom : 7px;
}
div#main {
width : 746px;
margin : 0px auto;
}
div#main div#main-in {
padding : 30px 20px;
background : transparent url(/images/design/content-background.png) repeat-y top left;
overflow : hidden;
}
div#main div#main-in div#left {
width : 460px;
overflow : hidden;
float : left;
}
div#main div#main-in div#left div.post {
clear : left;
margin-bottom : 35px;
}
div#main div#main-in div#right {
width : 215px;
float : right;
}
div#main div#main-in div#right div.box {
margin-bottom : 30px;
clear : both;
}
ライブバージョンはここにありますが、修正した後は動きません。これが、投稿の長いコードの背後にある理由です。