画像とテキストを2段組した一覧ページがIE6で崩れる
-
いつもお世話になっております。
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件中)
2件の返信を表示中 - 1 - 2件目 (全2件中)
- トピック「画像とテキストを2段組した一覧ページがIE6で崩れる」には新たに返信することはできません。