サポート » 使い方全般 » 固定ページで商品一覧のfloatが崩れる

  • 解決済 coz

    (@coz)


    環境:
    MAMP3.0.5
    PHP5.5.10

    現在welcartで固定ページに商品の一覧を表示しています。
    カテゴリーページでは同じHTML、CSSで同じで正しく表示されるのですが、
    固定ページの場合のみ表示が崩れます。

    具体的にはfloatで横並びにした要素の一番右の要素のみ一段下に落ちてしまうような感じです。
     吐き出されたコードにmarginやpaddingが入っているわけでもなく、一旦表示した後にブラウザのデベロッパーツールでfloatのチェックを外し、再度チェックすると解消されます。

    ですので読み込みの順番の問題かなにかかと思うんですが、、、
    解決方法、もしくはデバッグの方法など教えて頂ければと思います。

    ご回答よろしくお願い致します。

    コードは以下です

    <?php if (have_posts()) : ?>
    <?php query_posts('cat_slug=item'); ?>
    <?php while (have_posts()) : the_post(); usces_the_item(); ?>
    <div class="new_item col"><!--新着アイテム-->
        <a href="<?php the_permalink(); ?>">
             <div class="itm">
                <figure class="itm_con"><img src="<?php usces_the_itemImageURL(0); ?>"></figure>
             </div>
             <h5><?php usces_the_itemName(); ?></h5>
             <p>&yen;<?php usces_the_firstPrice(); ?></p>
       </a>
    </div>
    <?php endwhile; endif; ?>
    <?php wp_reset_query(); ?>
3件の返信を表示中 - 16 - 18件目 (全18件中)
  • デベロッパーツールで該当要素、その親要素などなどとも同一と確認し、確実にそっくりそのままなのに崩れる、ということは他の何かになりますかね。

    ・floatされている要素のWidthは固定ページ、投稿ページともに何PXですか?またmarginはいくつですか?
    ・それらを囲っている親要素は固定ページ、投稿ページともに何PXですか?
    <?php if (have_posts()) : ?>←こいつの手前で出力されているHTMLタグを2、3知りたいですね。そのwidthが双方違っていたらカラム落ちはありえます。
    ・floatされている要素にある内容は同じものですか?

    他に、
    ・htmlコードで閉じタグがないとかはないですか?
    ・デベロッパーツールでbodyのクラスを双方同じにするとどうですか?
    ・javascriptがどちらで働いていますか?
    ・ブラウザはなんですか?
    とか聞きたいですね。

    ついでに、親要素のCSSも挙げてもらえますか?

    トピック投稿者 coz

    (@coz)

    回答ありがとうございます。

    ・floatされている要素のWidthは固定ページ、投稿ページともに何PXですか?またmarginはいくつですか?
    ・それらを囲っている親要素は固定ページ、投稿ページともに何PXですか?

    【floatの要素固定ページ、アーカイブページ共に】
    width 140.125px / padding 両サイド5.331px / margin-left 1.656px

    【親要素の固定ページ、アーカイブページ共に】
    width 609.781px / margin-left 16.609px

    <?php if (have_posts()) : ?>←こいつの手前で出力されているHTMLタグを2、3知りたいですね。そのwidthが双方違っていたらカラム落ちはありえます。
    ・floatされている要素にある内容は同じものですか?

    共にdivで一回かこってある状態で、上記の親要素にあたる部分です
    内容も全く同じものです

    ・htmlコードで閉じタグがないとかはないですか?
    ・デベロッパーツールでbodyのクラスを双方同じにするとどうですか?
    ・javascriptがどちらで働いていますか?
    ・ブラウザはなんですか?

    閉じタグのミスもなかったです
    クラスを双方同じにしても変わりませんでした
    javascriptは双方同じものが読み込まれています
    ブラウザはmacのchromeとfirefoxで確認しています

    トピック投稿者 coz

    (@coz)

    皆様お騒がせしました、治りました。。。

    固定ページのほうでは商品を全表示するため、「該当無し」の設定を行っていなかったのですが、商品のアーカイブページにはelse文でnot foundの設定が書いてあったのでその部分まで全てループを一緒にしたら治りました。

    皆様には共有していなかった部分に原因があったようで本当にご迷惑をおかけしてしまい申し訳なく思っています。

    ありがとうございました。

3件の返信を表示中 - 16 - 18件目 (全18件中)
  • トピック「固定ページで商品一覧のfloatが崩れる」には新たに返信することはできません。