2010年09月15日

firefoxでの印刷にて、2ページ目が消える

今まで印刷用ページを作成しても遭遇することがなかったが、
1ページは表示されるが、2ページ目以降が消えてしまうという現象にあった。

IEでは問題なく表示されていても、firefoxにて起こり手詰まり状態・・・。
いろいろ調べてみると、下記を発見。
http://www.webbibo.com/stylesheet/print/overflow_ff.html

こちらのブログでは、下記のように記載されています。
この現象を調べた結果、bodyタグに指定したoverflow: auto;に原因があることが分かりました。
どうやら、この現象はMozilla Firefoxや、Netscape7.1などのMozilla Gecko系のブラウザで発生しているバグみたいです。IEやOperaでは問題なく消えずに改ページしてくれます。


同じように試してみたが、やはりうまくいかない。
仕方ないので、自分のソースをさらに解析してみるとbodyタグには、overflow を使用していないが、
レイアウト部分にて clearfix を利用していた。
これが原因だった模様。

clearfixの詳細は、この辺を。
http://blog.d-spica.com/entry/070307clearfix.html

要するに、overflowを指定しているタグが、同一ページから次のページへまたいでしまう場合に、消えてしまう。
clearfixを使っていても、同一ページ内に収まっている場合は、問題なく印刷されました。

これで結構体力が奪われた気がするな・・・。
posted by memo4me at 00:33 | Comment(0) | TrackBack(0) | css | このブログの読者になる | 更新情報をチェックする

2009年07月29日

高さ100%のボックスを作る方法

Webページを作成する際、ブラウザに対し高さ100%のコンテンツを作成することがよくあります。
その際、100%指定をしても100%表示されないことがあります。
タグ内に表示される要素の高さ分しか表示されていない状態ですね。
基本的に互換モードであれば、ちゃんと100%になりますが、大抵標準モードで作成するので、悩まされることがあるのですが、下記のように指定するれば、クリアできます。

CSSで、htmlタグとbodyタグの高さを100%指定

html,body{
 height:100%;
}

これを設定するだけで、<div style="height:100%">などの指定が利くようになります。
僕の場合、Firefoxのスクロールバー対策をしているので、bodyを100%指定すれば、クリアできました。
タグ:XHTML CSS 100% 高さ
posted by memo4me at 11:40 | Comment(0) | TrackBack(0) | css | このブログの読者になる | 更新情報をチェックする

2009年07月03日

Yahoo UI Library Fonts CSS

今まで何回か記載していたYUIのfonts.cssを使ってみました。
どうしてもパーセント指定をするのが面倒と思っていましたが、何とか重い腰を上げて、チャレンジしました。

ひとことで言うと、「何でもっと早く使わなかったんだろう。」です。

ピクセル指定の場合よりも細かい指定が少なく、実に効率がいいと思います。
またパーセンテージ指定なので、IEのバグで、font-familyを指定している場合に、ピクセル指定で11px以上小さく表示することが出来ないことについても考えないでいいので非常に楽です。

今後これを自分のデフォルトにしよう。
タグ:YUI fonts.css
posted by memo4me at 01:00 | Comment(0) | TrackBack(0) | css | このブログの読者になる | 更新情報をチェックする

2009年06月23日

CSSで上下中央にする方法

CSSでtableのように上下中央にすることは出来ないと思ったが、
下記のようにすれば可能のようです。
http://www.yomotsu.net/wp/?p=387

サンプルをみて試してみたが、なかなかうまくいかず、よく考えてみるとそりゃ出来ないということが分かった。
あくまであってればだけど・・・。

HTMLのtableを考えると、tdタグで高さを指定できますが、
CSSで上下中央にする場合、この理論は出来ないようです。(自分理論)
じゃあどうやって、上下中央にするというと、
tableは、一言でいうと表を形成するタグなので、複数の要素が入ります。
なので、1つしかない場合は、どこの中央にも合わないってことになります。

今まで自分がやってたのは、
HTMLソース
<div class="test">
  <p>てすと</p>
</div>

CSSソース
div.test p {
  background:url(bg.gif);
  display: table-cell;
  vertical-align: middle;
  margin: 0;
}
/*for IE6 */
* html .test p {
  display: inline;
  zoom: 1;
}
/*for IE7 */
*:first-child+html .test p {
  display: inline;
  zoom: 1;
}

こんな感じのもので、divに背景画像を設定し、中央に合わせたいと思ってました。
しかしこれは出来ませんでした。
なぜならば、要素が1つしか無いため、既に中央にいることになっている。(合ってるかな・・・w)

tableで書くと、↓「てすと」しかないので、中央も何もないことになる。
<table>
  <tr>
    <td>てすと</td>
  </tr>
</table>


同じような状況で中央にするには、
HTMLソース
<div class="test">
  <p><img src="spacer.gif" width="1" height="50" /></p>
  <p>てすと</p>
</div>

CSSソース
div.test{
  background:url(bg.gif)
  height:50px;
}

div.test p {
  display: table-cell;
  vertical-align: middle;
  margin: 0;
}
/*for IE6 */
* html .test p {
  display: inline;
  zoom: 1;
}
/*for IE7 */
*:first-child+html .test p {
  display: inline;
  zoom: 1;
}
のようにする必要があります。

自分的には、謎が解けてよかった。
posted by memo4me at 13:54 | Comment(0) | TrackBack(0) | css | このブログの読者になる | 更新情報をチェックする

2009年05月28日

半角英数による横幅崩れ

今さら感はありますが、半角英数を連続で入力した際、自動的に改行できない為、デザインが崩れてしまいます。
もしIEだけの対応であれば、
word-break: break-all

を使って改行することが出来ますが、他のブラウザでは出来ません。

ただいろいろなWebサイトを見ていると、大半のサイトが規定幅を超える半角英数の文字の羅列(URL)がある場合、表示上はみ出る箇所を表示しないようにしています。
対応方法は、簡単で、
.hoge{
  width: 300px;
  overflow: hidden;
}

これだけ。
今後これを標準として考えよう。

どうしても他のブラウザで改行したい場合は、jQueryを使えば、IE以外のブラウザでも対応が可能になります。
http://webtech-walker.com/archive/2008/11/02151611.html

これ使ったけどうまくいかなったけど、たぶん俺のやり方が悪いのかな・・・。
もう少し試してみよ
タグ:CSS Overflow hidden
posted by memo4me at 14:11 | Comment(0) | TrackBack(1) | css | このブログの読者になる | 更新情報をチェックする

2009年02月17日

line-height設定時の行間バグ(IE)

すごい久しぶりの更新・・・。
気づいたらこまめに更新しよう。

普通にHTML(XHTML)を作成し、CSSにて行間設定をしていたのですが、
更新内容によりフォントサイズがまちまちな状況になることが分かりました。
firefoxでは、何も問題ないのですが、IEで見た場合、フォントサイズを大きく設定した場合、正常な行間を空けることが出来ない現象がありました。

回避方法は、「line-height設定時に、単位を記載しない」です。
○line-height: 1.4;
×line-height: 1.4em;

単位をつけると継承方法に違いが出る為で、単位をつけないと文字に対して1.4倍の行間で表示されるようになります。
※1.4と設定した場合

今まで動的ページのテンプレートを作成しても上記の問題にブチ当たることはありませんでしたが、今後はline-heightに単位をつけないで設定するのがBESTってことですね。
posted by memo4me at 18:07 | Comment(0) | TrackBack(0) | css | このブログの読者になる | 更新情報をチェックする

2008年11月21日

CSSで設定するフォントについて

今まで気にしないで、Webページを作成していましたが時代の流れかUTF-8で作成することが増えてきました。結構前から多いけど(笑)
HTML(XHTML)を作成するに当たり、文字コードをUTF-8にすると問題が発生します。
1番有名なのは・・・
IEの英数フォントが、Times New Romanに勝手に設定されてしまうこと。

ここでやらないといけないのが、ゴシックの設定で「sans-serif」。
こいつが曲者で、何も考えないで使うとフォントサイズを12px以下に指定した場合、IE6とIE7で、正しく表示されない。

色々調べたら、font-familyの設定で、日本語フォントを初めに設定し、その後にsans-serifを書けば、この辺の問題は解決とかあったけど全然ダメだった。俺がダメなだけかもだけど・・・。

他に方法がないか調べたところ、やっぱり前に調べたところに行き着いて、YUIなどでも配布してるfont.cssのようなパーセンテージ設定を基本とするフォントの指定方法。

デフォルトフォントを13pxに設定し、他で10pxとか小さくしたい場合には、77%とかに指定すれば問題ない。
この方法でコーディングし、IEなどでブラウザ文字サイズを変更してもpx指定をしているように文字サイズが大きくなったり小さくなったりすることはない。まあデフォルト設定しているからってことですね。

パーセンテージにがいくつだと何pxとかこの辺を覚えるのがだるいけど、全体的に考えるとバグが減るからやりやすくなるものなのかなー
posted by memo4me at 02:16 | Comment(0) | TrackBack(0) | css | このブログの読者になる | 更新情報をチェックする

2008年10月08日

ddに書く内容が改行すると、IE6で3pxずれてしまう現象について

dl,dt,ddタグで擬似テーブルを作る時に、ddタグ内に記載してるテキストが2行以上になる場合、1行目と3pxのずれが生じます。

これを解決するには、margin-rightを-13emに設定することで、解決できるようです。
http://develo.org/2008/05/03/0104.html

このHPを参考にして修正したのですが、記載してある内容のdisplay:inlineやclearfixの設定をせず、margin-rightの設定のみで解決できました。
reset.cssを使ってるからなのかな・・・

まだ当分IE6は使われると思うので、抑えておかないとですね
タグ:XHTML CSS DL DT DD IE6
posted by memo4me at 15:17 | Comment(0) | TrackBack(0) | css | このブログの読者になる | 更新情報をチェックする

2008年08月23日

white-space: nowrap

今までHTMLを組んだ時に一度も使ったことの無かったCSSセレクタ「white-space」を使ってみました。

どういう時使うのかが疑問だった。
決まった範囲内に文字を表示させたいのであれば、文字が入る範囲で横幅を指定すれば問題なく出来るし・・・。
昔tableレイアウトがメインだった頃、tableタグで使われるnowrapを使ったことはあったけど、それだけだった。

liような横幅を指定しないと入力した文字分の幅しかタグの範囲が存在しないタグをfloatさせて横並びにしたい場合に便利

li{
  display: block;
  white-space: nowrap;
  float: left;
}


こんな風に指定しておけば、li自体がブロック要素になり、尚且つ文字数が不変でも文字自体を改行せず、横幅に入りきらない時は、ブロック単位で改行してくれるので、見た目が綺麗。

たぶん忘れるからメモ
posted by memo4me at 15:15 | Comment(0) | TrackBack(0) | css | このブログの読者になる | 更新情報をチェックする

2008年08月06日

reset.css

以前、社内の勉強会で、reset.cssの話があったので使ってみました。
結論からいうと、reset.cssを使うと使わないでは、雲泥の差があることが分かりました。

dl、dt、ddタグやul、liタグなど、デフォルト設定されているタグのmarginなどをすべてリセットするだけで、非常に作成が楽になります。

YUIにfont.cssもありますが、。一応英語フォントを考慮において作られているようなので、使えるか微妙ですが、調べてみるとこんなのを見つけました。
http://3ping.org/2006/04/09/0747

これ使うことによって、楽になるか分かりませんが、
近いうちにでも試してみたいと思います。
posted by memo4me at 23:33 | Comment(0) | TrackBack(0) | css | このブログの読者になる | 更新情報をチェックする

2008年06月23日

Firefoxで常にスクロールバーを出す方法

Firefoxでブラウザ表示範囲内にコンテンツが納まっている場合は、スロールが表示されません。しかしブラウザ表示範囲を超える場合には、スクロールバーが表示されます。この時にコンテンツをセンタリングしていると、スクロールバーが表示される為、位置がずれるように見えます。

この解決方法として、
html{
 overflow-y: scroll
}


を記入するとFirefoxにスクロールバー領域が表示されて回避が可能です。

ただOperaでは対応していないので、Operaでも対応するとなると常にスクロールバーが出ている状態にする必要があります。
html{
 height:100%;
 margin-bottom:1px;
}


html領域の高さを100%し、margin-bottom:1px;で、1px分オーバしているので、常にスクロールバーが表示されています。

これでズレはなくなる!
posted by memo4me at 13:27 | Comment(0) | TrackBack(0) | css | このブログの読者になる | 更新情報をチェックする

2008年05月13日

Hyperlinkの拡張子をみて、CSSで画像の設定変更

システムを使わずに、CSSのみでHyperlinkしている拡張子をみてアイコンを変更することが可能みたいです。

Showing Hyperlink Cues with CSS

ちょっと近いうちに試してみよう
タグ:CSS
posted by memo4me at 01:54 | Comment(0) | TrackBack(0) | css | このブログの読者になる | 更新情報をチェックする

2008年04月21日

リンク色指定

基本的なことなんだけど、いつも忘れて検索してるからメモ

a:link { color: red; }
a:visited { color: red; }
a:active { color: red; }
a:hover { color: red; }

ちなみにa:hoverが、a:linkやa:visitedの上に書かれていると、a:hoverのスタイルが上書きされるので、注意。
記述順は、上記のようにする。
posted by memo4me at 10:02 | Comment(0) | TrackBack(0) | css | このブログの読者になる | 更新情報をチェックする

2008年01月25日

dtの高さが高くなる場合のdtとddの横並び

dt、ddタグを使用してコーディングをする際、ddの方が高さがある場合は特に問題がないのですが、dtの方が高さが出てしまうと見た目が崩れてしまいます。

どうにかできないものかと調べてみると、下記で説明されていました。
http://css-happylife.com/log/css-template/000116.shtml

ただクラス名と各種数値を変えただけだと、自分の場合うまくいかなかったので、若干調整してなんとか横並びが出来ました。

dl .test{
width: 380px;
}

.test dt {
width:128px;
font-size: 10px;
margin-bottom:15px;
float:left;
clear:both;
}

.test > dd {
width: 247px;
margin-left: -5px;
padding-left: 10px;
float:left;
}

*+html .test > dd {
float:none;
}

忘れないようにメモ。
タグ:CSS XHTML HTML
posted by memo4me at 08:41 | Comment(0) | TrackBack(0) | css | このブログの読者になる | 更新情報をチェックする

2007年12月08日

floatさせた際に背景が表示されない

.wrapper{
width: 780px;
min-height: 1em;
}

.left{
width: 380px;
float: left;
}

.right{
width: 380px;
float: right;
}

上記のようなCSSがあり、それぞれdivでclassとして指定している場合、wrapperの背景が表示しなくなる。

そこでどうしたら表示するのか調べたところハックを使うことで回避できる。

.wrapper{
width: 780px;
min-height: 1em;
}

.wrapper {
content: "";
display: block;
clear: both;
height: 1px;
overflow: hidden;
}

/*\*/
* html .wrapper {
height: 1em;
overflow: visible;
}
/**/

.left{
width: 380px;
float: left;
}

.right{
width: 380px;
float: right;
}

「min-height: 1em」は、IE7対策用で、最小の高さ指定
詳細

CSSハックは出来るだけ使いたくないから他の方法ないかな〜
タグ:CSS XHTML
posted by memo4me at 00:15 | Comment(0) | TrackBack(0) | css | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。