サポート » 使い方全般 » 画像とテキストを2段組した一覧ページがIE6で崩れる

  • 解決済 235durham

    (@235durham)


    いつもお世話になっております。
    WordPressでサイト構築していて、IE6でレイアウトが崩れる問題に直面しました。
    WordPressには直接関係ないCSSの問題かもしれませんが、
    適切な質問場所がわからず、こちらで質問させていただきます。
    誠に申し訳ございませんが、不適切であればご指摘ください。
    ——————————-
    商品画像と商品タイトル、抜粋、更新日を一覧ページに表示し、
    それらを2段組みにしたいと思っています。(完成イメージはこちら)。

    現在、次のようにコーディングしています。
    ▼PHPファイル

    <div class="indexcontent">
    <?php query_posts('showposts=30&cat=71');?>
    <?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>
    
    <div class="post" id="post-<?php the_ID(); ?>">
    <div class="post_book">
    	<div class="title_date">
    		<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
    		<div class="author"><?php the_excerpt();?></div>
    		<p class="small">更新日:<?php the_time('Y年 n月 j日') ?></p>
    	</div>
    
    	<div class="thumb">
    		<?php $values = get_post_custom_values("thumbnail");
    			$imgSrc = $values[0];
    			?>
    		<?php if ($imgSrc != '') : ?>
    		<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
    		<img src="<?php echo $imgSrc; ?>" alt="<?php the_title(); ?>" width="70" height="100" />
    		</a>
    		<?php endif; ?>
    	</div>
    	</div><!--//post_book -->
    	</div><!--//post -->
    
    <?php endwhile; ?>
    
    <div class="clear"></div>
    </div><!--//indexcontent-->

    ▼style.css

    .indexcontent{
    	width:530px;
    	background: #FFFFFF url(img/contentbg.gif) repeat-y;}
    .indexcontent a:hover{color:#C78D4D;}
    .indexcontent .post h3{
    	font-size:13px;
    	text-decoration: underline;}
    .indexcontent .post{
    	width: 265px; height: 125px;
    	float: left;
    	border-bottom:3px #CCCCCC dotted;}
    .indexcontent .post_book {
    	width:245px;
    	padding:10px;}
    .indexcontent .post_book .title_date{
    	float:right;
    	width: 164px;}
    .indexcontent .post_book .thumb{
    	float:left;
    	width:70px;}
    .indexcontent .author{
    	font-size:12px;
    	margin-top:2px;}
    .thumb img{
    	border:1px #CCCCCC solid;}

    上記の方法では、IE7、Firefox3.5.7、Safari4.0.4では実現できましたが、
    IE6で見ると、最後の段の右側の画像とテキストの一部が右にフロートされず、
    一段下に下りて表示されてしまいます(こんな感じです)

    最後の段以外の上の列はきちんと表示されるのに、
    最後の段だけ崩れてしまうというのはいったいどういうことか、
    しかも、テキストは所定の位置に正常に出てきますが、
    そのうえでテキストの一部が画像に引きずられるような形で下の段に出てくるとは、
    いったいどういうことか(単なるテキストの落ちではない形…)
    widthやmargin、paddingの指定場所のせいかといろいろコーディングをいじりましたが、
    どうしてもわかりませんでした。

    対策方法をご存知の方がおられましたら、ぜひお教えいただけないでしょうか?
    アドバイスでも構いません。
    当方、phpもcssもまだまだ不勉強で、何かとご迷惑をおかけしてしまうかもしれませんが、
    ぜひお知恵をお貸し頂きたく存じます。どうぞよろしくお願い申し上げます。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • フロートさせる要素の 前・間 のコメントをひととおり削除してみてください。
    <!--//post --> とか。

    トピック投稿者 235durham

    (@235durham)

    kzさま

    ご返信誠にありがとうございました!おっしゃったとおりにコメントを削除したら、
    見事に意図通りに表示されました!本当に感激、感謝です。

    調べてみると、そこそこ有名なバグのようですね。
    「float IE6」なんかで検索しても出て来なかったのですが、
    原因がわかって検索したら、同じような例がいくつか出てきました。
    検索の仕方にこコツが要りますね。。

    私も少しずつ構築経験を積んで、バグへの対処法も学んでいきたいと思いました。
    本当にありがとうございました。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • トピック「画像とテキストを2段組した一覧ページがIE6で崩れる」には新たに返信することはできません。