ブラウザいっぱいに画像を表示させるようなサイトで、
横幅はブラウザの幅いっぱいにしたいのですが、
縦幅は固定でオーバーフローを非表示させるような形にし、
さらにその画像をフェード切り替えするようなものを作っていたのですが、
縦位置のセンタリングがどうしてもうまくできず、、
しょうがないので、CSSで調整してみました。
(続きを読む…)
2011-11-24
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
2010-05-07
ものすごいマイナーな現象だとは思うのですが、、
Chromeでaタグには text-decoration:none; とし、a:hoverで text-decoration:underline;としたのですが、
なぜかアンダーラインが表示されません。
いろいろ原因を探っていたところ、特定のフォントで、font-size:10px（またはx-small）としたときに、
この現象が起こることに気付きました。
11pxのサイズではちゃんとアンダーラインが出ましたし、
Verdanaなどのちょっと大きめのフォントでは問題なかったのですが、
特にfont-familyを指定しなかったりするとこの現象が起こります。
いくつか解決策はあると思うのですが、
a:hover {
font-size:x-small;
padding-bottom:1px;
}
としたらちゃんとアンダーラインが表示されました。
2010-03-11
IMGタグの後にそのまま文章を入れると、デフォルトでは画像の右下から
文章がくっついて始まってしまいます。
自分でページ制作やブログを書いたりするときにはそういうことは当然しませんが、
ブログ、CMSなどでユーザーに利用してもらうときには、
必ずしもこちらの意図したとおりに使ってもらえるとも限りません。
そこで、IMGタグの後は強制的に改行する方法です。
.entry p img {
display:block;
clear:both;
}
2010-03-09
ブロックレベル要素をセンタリングさせるには普通はtext-align:centerを使いますが、
テーブルなどの幅が決まっているボックスをセンタリングさせるためには
margin-leftとmargin-rightをautoにします。
なので、CSSでテーブル全体をセンタリングさせるには、
.table_center {
margin-left:auto;
margin-right:auto;
}
のように、margin-left、margin-rightを別々に記述するとうまくいきます。