2012-10-17

ブログの記事一覧などで、記事を2列の横並びにしつつ、
下線で区切りを入れるケースというのは結構あるかと思います。

で、普通にliにborderを入れてしまうと、
記事数が奇数だったときに最後に半分だけ下線が入って不格好。
liの最後だけ非表示にするとしたら、記事数が偶数の場合にうまくいかない、と
予想以上に面倒だったりします。

(さらに…)

2012-10-14

WordPressのWP-PageNaviを使用していて、
IE7で見るとborderの下部分が切れているのに気づきました。
IE6ではOKでIE7だけがダメ。

いろいろ調べた結果、borderを入れている要素に
position:relative; を入れると無事に表示されました。

参考サイト
http://css-bug.jp/win/ie/ver6/0088/
※参考サイトはなぜかIE6なのですが。。

2012-06-07

今さらながらこんな基本中の基本をメモすることになるとは、、な記事ですが。

これまで作っていたサイトのほとんどが980ピクセル固定センタリングだったのですが、
今回は2カラムで左カラムはナビゲーションで幅を固定、右がメインで可変というレイアウトで、
右カラムの幅が可変になってくれなかったのでググッてみました。

(さらに…)

2011-11-24

ブラウザいっぱいに画像を表示させるようなサイトで、
横幅はブラウザの幅いっぱいにしたいのですが、
縦幅は固定でオーバーフローを非表示させるような形にし、
さらにその画像をフェード切り替えするようなものを作っていたのですが、
縦位置のセンタリングがどうしてもうまくできず、、
しょうがないので、CSSで調整してみました。

(さらに…)

2011-10-27

これまでにも何度かやっていたはずなのですが、忘れていたのでメモです。
例は最後のborderを消すパターンになります。

勘違いしてulにmargin-bottom:-1pxを入れていました。
それはリストタグの方に入れて、ulにoverflow:hiddenと
IE6対策としてzoom:1を指定します。

(さらに…)

2011-08-17

とあるページでページ内リンクの処理を入れていたら、
リンク先をクリックすると一部分が上にずれて切れてしまっていました。
URLにハッシュタグがついていない状態では問題なかったので、
気持ち悪いなーと思いながらいろいろ調べていると、
どうもclearfixを取ればうまくいくようです。

それで「ページ内リンク clearfix」で検索すると見事にヒットしました。
STUDIO BLOOM
「URLにハッシュを指定してページ内リンクしたときにレイアウトが崩れる件について」


最終的な原因としては、「アンカーを配置している要素の親要素に
”overflow:hidden”が指定されているとその親要素が上にずれる」とのことのようです。

できるだけclearfixに頼りすぎない方がいいですね!

2010-09-14

ChromeやSafariではまったく問題なかったのですが、
このブログのトップページに max-width:100% と position:absolute を使って
写真を背景画像としてブラウザの幅に合わせて表示させていたのですが、
Firefoxだけ画像の元サイズで表示されて、横スクロールバーが出ていました。

#main_photo {
position:absolute;
top:0;
}


と書いていたのを、

#main_photo {
position:absolute;
top:0;
width:100%;
}


と修正することでうまく表示できました。

2010-08-23

fancyboxをちょっと改造していて、IEだけどうにも表示がうまくいかなかったので、
CSSハックを使いました。

IE6、IE7に対応させるのはスラッシュだけでいけるのとかを知らなかったので、
あまりハックに頼るのは良くないですが、覚えておくとやっぱり便利だなと思いました。

参考サイト
http://www.webcreatorbox.com/tech/css-hack-list/

2010-07-29

これまでaタグ以外にhoverを使うような場面はなかったので、
気にしたこともなかったんですが、IE7以上、Firefoxなどでは、
aタグ以外のタグにも、hoverを使うことができるらしいです。

で、問題のIE6なのですが、Whatever:hoverなる有名なものがあるそうです。

参考サイト
http://d.hatena.ne.jp/sa90/20080403/1207653253


さらに調べてみると、Javascriptとして読み込むだけのお手軽なものも発見しました。
http://www.yomotsu.net/lab/javascripts/ie6csshover


実際にhoverでやりたかったのが、透過PNGを背景画像に使うことだったのですが、
DD_belatedPNG.jsを使用すると、どうもhoverが使えなくなることが発覚。
いろいろ試した結果、iepngfix(iepngfix_tilebg.js)を使うことで解決できました!

ちょっと凝ったことをやろうとすると、IE6は本当にやっかいですね。
もう無視しようかな、と思い、クライアントのサイトのAnalyticsを見ると、
IE6使用者がまだ18%もいました。。。
セキュリティ上よろしくないですし、サポートも打ち切られていますので、
IE6を使用しているみなさん、アップデートしてくださいね~

2010-06-16

リストタグの float:left で画像を並べたときに、
画像の下に少しすき間ができてしまいました。

その場合、ulのタグに line-height:0; を入れてやることで、
すき間なく画像を表示できます。

ただし、IE6の場合はもうひと工夫必要で、
HTMLの記述で、リストタグを改行させずにすべて続けて書くか、
CSSでliタグに font-size:1px; を入れることで解決しました。


参考サイト
http://blog.yuu.noor.jp/?eid=1142307
http://www.coolwebwindow.com/csstips/help/000280.php