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

[shingo]

■現象

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

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

• IE8
• Opera10
• Firefox3.5

■原因

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

■修正内容

.albumImageList .partsHeading h3をfloat指定した

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

■関連情報

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

[takai]

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

[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を修正すれば想定通りの結果が得られます。

[imamura623]

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

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

[itoda]

確認完了しました。

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

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

[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 の手前にでも追加してください。）

[imamura623]

Replying to itoda:

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

修正しました。

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

[itoda]

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

[urabe]

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