CSS - アドボンネット　- adbon.net -

PR

カスタマイズ簡単フォーム（格安の5,000円、30日間の無料期間あり！）

おかげさまで100社以上の企業様からダウンロードいただきました

プログラムの知識が無くても、FORM 関連の HTML タグの知識があれば、簡単にカスタマイズできる、お問合せやアンケートフォームパッケージです。

2010/09/03

IE8で表示できない（真っ白）になる原因

FireFoxなどでは正常に表示できるが、IE8や、IE7で画面が表示できない（画面が真っ白）になる場合があります。

特徴としては、ブラウザの表示は真っ白なのに、「ソースの表示」をすると、きちんとHTMLソースコードが表示できる点です。

いろいろ調べたら、どうやら titleタグと charsetの順序が影響しているようです。

具体的には以下のソースにすると、ＩＥ８やＩＥ７では画面が真っ白になり

<title>タイトル</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

以下のソースだと正常に表示できます。

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>タイトル</title>

FireFoxだと、あまり気にしなくてもIEは厳しく判定されてしまうのですね。

参考になりました？

カテゴリー: CSS, HTML — admin 18:14 コメント (0)

2010/08/03

CSS（スタイルシート）の書式

<head>～</head>の間に書く書式

外部CSSファイルの読み込み

<link rel="stylesheet" href="styles.css" type="text/css" media="screen,print" />

HTML内に書くとき

<style type="text/css">
<!--
p{
  padding:10px;
  background-color: #eee8aa;
}
h1{
  color: #ff0000;
}
-->
</style>

参考になりました？

カテゴリー: CSS, 忘れっぽいのでメモる — admin 11:18 コメント (0)

2010/05/10

importの優先度

以下が@importの優先度一覧

@import url(x.css);
@import url("y.css"); /* 「"」で括るとMacIE4.5は認識しない */
@import url('z.css'); /* 「'」で括るとMacIEは認識しない */

■参考サイト
http://east.portland.ne.jp/~sigekazu/css/boxm.htm

参考になりました？

カテゴリー: CSS — admin 21:41 コメント (0)

IEでbackground-colorが消える

floatをつかうと、時々background-colorが消える時がある。

原因不明だが、widthを指定すると直る（pxでも%でも何でも良い。autoだけは微妙）。
しかし、widthの指定は各ブラウザで違うので、IE用のハックをするのが今のところ
ベスト
例：_width:100%;

参考になりました？

カテゴリー: CSS — admin 21:36 コメント (0)

IEでborder-colorが消える

div要素のborder-colorが消える

IEのレンダリングのバグ
対策：div要素にwidth:100%を指定するか、background-colorを指定すると直る。

参考になりました？

カテゴリー: CSS — admin 21:35 コメント (0)

IE7未満のみスタイルシートを読み込む

HTMLのヘッダ部分に以下を指定をすると、IE7未満のブラウザはCSSを読み込まなくなる。

【コード】

<!–[if lt IE 7]>
<style type=”text/css”>
@import url(”http://veerle.duoh.com/index.php?css=blog/css-ie”);
</style>;
<![endif]–>

【参考サイト】
http://veerle.duoh.com/index.php

※Web Designing 200605 に掲載

参考になりました？

カテゴリー: CSS — admin 21:34 コメント (0)

絶対配置の注意点

絶対配置指定すると、以下のブラウザでは表示が崩れる

(1)Opera 6
(2)IE7 ベータ版

参考になりました？

カテゴリー: CSS — admin 21:33 コメント (0)

id属性、class属性値に「_」は使わない

「_」を含んだid/class属性値は、IE4、Mac版NN4.x、Mac版NN6(初期)では無視されるので使用は控える

×：#top_header
○：#top-header

参考になりました？

カテゴリー: CSS — admin 21:32 コメント (0)

長いURLがデザインからはみ出す対策

全角文字なら問題ないが、半角英数字をなど長いURLを表示すると、ブロック要素からはみ出すときがあります。そんなときは以下の対策をします。

■IE6.x　以下のCSSハックにて対応する

body{
  _word-break: break-all;　/* IE6独自 */
}

■IE7.x　以下のCSSハックにて対応

*:first-child+html body{
  word-break: break-all;　/* IE7独自 */
}

■FireFox
Ver3にバージョンアップすれば直る
http://www.mozilla-japan.org/products/firefox/3.0b1/releasenotes/

■Opera
“/”で改行される（修正なし）

■Sarafi
対策なし？？

参考サイト
http://www.will3in.jp/blog/ishiwa/archives/2007/03/26-0155.php
http://archiva.jp/web/html-css/20060808013000.html

参考になりました？

カテゴリー: CSS — admin 20:40 コメント (0)

ヘテムル
1,500円～

<ビジネス向け>
安定、低価格サーバ

エックスサーバー
1,050円～

<ビジネス向け>
安定、低価格サーバ

お名前.com
1,365円～

<ビジネス向け>
安定、低価格サーバ

シックスコア
1,890円～

<ビジネス向け>
安定、高速、低価格サーバ

ロリポップ
105円～

<個人向け>
低価格サーバ