ここの情報は古いです。ご理解頂いた上でお取り扱いください。

Opened 8 years ago

Closed 8 years ago

#4364 closed defect (fixed)

アルバム写真一覧画面で「新しい順に並べ替える」のリンクがずれて表示される

Reported by: shingo Owned by: imamura623
Priority: minor Milestone: OpenPNE2.14.3
Component: 指定しない Version: 2.14.x
Keywords: Cc:

Description (last modified by imamura623)

■現象

アルバム写真一覧画面で「新しい順に並べ替える」のリンクがずれて表示される
Firefox3.0.15で確認

以下のブラウザでは問題なし

  • IE8
  • Opera10
  • Firefox3.5

■原因

アルバム画像一覧のh3要素のfloatを指定が無かったっため

■修正内容

.albumImageList .partsHeading h3をfloat指定した

詳しい解説はcomment4を参照する

■関連情報

  • #3236:アルバムの表示順に整合性がないため昇順に変更する

Attachments (2)

クリップボード01.gif (8.6 KB) - added by shingo 8 years ago.
ticket4364_img.png (18.0 KB) - added by takai 8 years ago.
想定している結果と現状のイメージ

Download all attachments as: .zip

Change History (14)

Changed 8 years ago by shingo

Attachment: クリップボード01.gif added

comment:1 Changed 8 years ago by kiwa

Milestone: OpenPNE2.12.16OpenPNE2.14.3

comment:2 Changed 8 years ago by kiwa

Keywords: OpenPNE2.12.16 removed
Version: 2.12.x & 2.14.x2.14.x

comment:3 Changed 8 years ago by kiwa

Type: enhancementdefect

Changed 8 years ago by takai

Attachment: ticket4364_img.png added

想定している結果と現状のイメージ

comment:4 Changed 8 years ago by takai

検証しました。

生じている問題

Firefox 3.0以前(Fxに限るものとはいえない)でチケットの概要の通り、リンク部分が2行目に表示されます。

想定している結果と現状については添付ファイルを参照してください。

原因

添付ファイルで示している「想定している結果」が崩れていないのは、CSSで例外的なスタイルを記述しているためです。

アルバム機能の当該部分に対して、この例外的な記述を行っていなかったため、今回の問題が生じています。

.homeMainTable .partsHeading h3 {
	float: left;
	width: 66%;
}
.albumImageList .partsHeading p.link, 
.homeMainTable .partsHeading p.link {
	float: right;
	width: 33%;
	margin: 0;
	text-align: right;
}

CSSにこのような記述がありますが、当該部分のh3要素にもfloatを指定すると想定通りの結果となります。

.albumImageList .partsHeading h3,
.homeMainTable .partsHeading h3 {
	float: left;
	width: 66%;
}
.albumImageList .partsHeading p.link, 
.homeMainTable .partsHeading p.link {
	float: right;
	width: 33%;
	margin: 0;
	text-align: right;
}

Firefox 3.0以前でしか問題が生じない理由

もしかしたらFx以外でも生じるかもしれません。

現状の当該部分は、

<h3 style="display: inline">見出し</h3>
<p class="link" style="float: right"><a>リンク部分</a></p>

という構造になっています。

フロートしたボックスが、直前のインライン要素よりも下側に配置されてしまうという実装になっているブラウザで問題が生じるように思います。私見ですが、この問題が生じるブラウザの実装不備ということではなく、仕様の解釈の違いによるものだと思われます。

いずれにせよ、ブラウザのバグではなく設計(OpenPNE)側の問題です。本件に関しては前述の通りCSSを修正すれば想定通りの結果が得られます。

comment:5 Changed 8 years ago by imamura623

Description: modified (diff)
Keywords: 確認中 added

上記の指摘通り修正しました。

  • r13128 でtrunkにコミット
  • r13129 でstable-2.14.xにコミット

comment:6 Changed 8 years ago by imamura623

Description: modified (diff)

comment:7 Changed 8 years ago by imamura623

Owner: changed from nobody to imamura623
Status: newassigned

comment:8 Changed 8 years ago by itoda

Keywords: 差し戻し added; 確認中 removed

確認完了しました。

  • 写真一覧の見出し表示結果確認
  • 写真一覧の見出しデフォルト表示順確認
  • 新しい順に並べ替えるリンクを押す
  • 古い順に並べ替えるリンクを押す

リンクの表示位置は問題ありませんでしたが、 IE6で表示した場合に「新しい順に並べ替える」リンク部分の背景が正常に表示されないので差し戻しです。

comment:9 in reply to:  8 Changed 8 years ago by takai

CSSの修正に不備がありました。

ダブルフロートにしたため、いわゆるclearfixが必要になります。

/*----------------------------------------------
 * clearfix, overflow: hidden
 *--------------------------------------------*/
...略
.homeMainTable .partsHeading,
.formTable .partsHeading,
.formTable div.checkList ul,
.monthlyCalendarTable div.block {
	zoom: 1;
	overflow: visible;
}
...略
.homeMainTable .partsHeading:after,
.formTable .partsHeading:after,
.formTable div.checkList ul:after,
.monthlyCalendarTable div.block:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}

この2箇所に、他のセレクタと同じように

	.albumImageList .partsHeading,
	.albumImageList .partsHeading:after,

を追加する必要があります。(homeMainTable .partsHeading の手前にでも追加してください。)

comment:10 in reply to:  8 Changed 8 years ago by imamura623

Keywords: 確認中 added; 差し戻し removed

Replying to itoda:

リンクの表示位置は問題ありませんでしたが、 IE6で表示した場合に「新しい順に並べ替える」リンク部分の背景が正常に表示されないので差し戻しです。

修正しました。

  • r13137でstable-2.14.xにコミット
  • r13138でtrunkにコミット

comment:11 Changed 8 years ago by itoda

確認完了しました。
背景部分は正常に表示されました。

comment:12 Changed 8 years ago by urabe

Keywords: 確認中 removed
Resolution: fixed
Status: assignedclosed

ソース確認しました。OKです

Note: See TracTickets for help on using tickets.