こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

IEでホームページが表示されず、CSSが表示されます。助けてください。

ビルダーで作ったホームページをFTPで転送したらホームページが表示されず、CSSがポップアップされてホームページが表示されません。(IE8の場合。)IE6でホームページを開こうとしたら、「・・・ダウンロードできません。・・・」とエラーメッセージがでます。

ホームページ作成初心者ですが、こんな事初めてでどうしたらいいか困ってます。どなたか分かる方いらしたらぜひ教えて下さい。よろしくお願いします。

ちなみにアドレスは、http://www.life-is-best.sakura.ne.jp/kogao

HTMLの一部
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<META http-equiv="Content-Style-Type" content="text/css">
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>小顔cute</title>
<meta name="description" content="小顔に「小顔cute」"/ >
<meta name="keywords" content="小顔"/>
<META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 11.0.0.0 for Windows">
<link href="kogao.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="cent">
<div class="cont">
<table cellspacing="0" cellpadding="0" id="container" summary="テーブル">
<tr>
<td colspan="3" id="header"></td>
</tr>

CSSの一部
@charset "shift_jis";
body {
color: #333333;
margin: 0px;
padding: 0px;
text-align: center;
background: #FFFFFF url(bg.gif);/*壁色と壁紙設定*/
font-family : "MS P ゴシック", sans-serif;/*全体の文字サイズ*/
}

.cent { text-align: center; }
.cont { margin-left: auto; margin-right: auto; width: 920px; }

h1,h2,h3,p,ul,li{
margin: 0px;
padding: 0px;
}

ul{
list-style-type: none;
}
.color1 {
color: #FE5F04;
}
img {
border: none;
}
.uline1 {
background: url(uline_1.gif) repeat-x left bottom;
}



/*全般のリンク設定。(a:hoverはカーソルオーバー時)*/
a {
color: #000080;
}
a:hover {
color: #cc0000;
}



/*コンテナー(HP全体の枠)
------------------------------------------------------------------------*/
#container {
width: 920px;
border: 1px solid #808080;/*HPを囲む枠の色と幅*/
text-align: left;
margin-right: auto;
margin-left: auto;
}

投稿日時 - 2009-10-27 01:39:44

QNo.5399797

すぐに回答ほしいです

質問者が選んだベストアンサー

残念ですがいまだIEでは現象が出ています。
(リンクしていない)kogao.cssのダウンロードを要求していますからゴミが残っているか、何かサーバー上でトラぶっている可能性があるような気がします。
(現在/kogao/ディリクトリのindexにはkogao.cssのリンク記述が見当たらないので、またIEのキャッシュクリア後にも出現しますから間違いはないかと)

まさかとは思いますが
9行目の style11.cssへのリンクが大文字で始まっているので修正します。
それでも現象が出ればサーバーのサポートに依頼した方が早いです。

余計ですけど
左ブロックの商品メニュー(#left ul.menu)のTextがfont属性の削除でボックスを超えていますので調整が必要です。
(style11.css 272行目の#left ul.menu内、 padding-right: 0px ; font-size : 12px ; の調整で大丈夫だと思います)

投稿日時 - 2009-10-28 10:35:13

お礼

ありがとうございます!

確認したら、確かにその通りでした。
kogao.cssはサーバーから削除したらOKでした。

それと、
>左ブロックの商品メニュー(#left ul.menu)のTextがfont属性の削除で
>ボックスを超えていますので調整が必要です。
>(style11.css 272行目の#left ul.menu内、 padding-right: 0px ; >font-size : 12px ; の調整で大丈夫だと思います)
これを入れたらきれいに表示されました。
これからもっと勉強していきたいと思います。
いろいろとありがとうございます。

投稿日時 - 2009-10-29 00:58:26

ANo.5

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(5)

HTMLチェッカ。
http://validator.w3.org/
拠り厳格に確認訂正は以下。
http://openlab.ring.gr.jp/k16/htmllint/htmllint.html
CSSチェッカ。
http://jigsaw.w3.org/css-validator/

エラーを徹底的に潰す。

投稿日時 - 2009-10-28 00:03:02

ANo.3

>これは大文字を小文字にすればいいのでしょうか?

はい、XHTML文書とするには記述は小文字で行うことがルールなんです。
(だいぶ混ざっているんで…、一応表示は出来ます)
XHTMLについてはこの辺
http://hac-design.com/xhtml/xhtml5.html
が簡潔にまとめられていると思うので参考に、他にもリファレンスサイトは多数あるので探してみてください。

font属性の件は
文法ではないのですが装飾に関しての記述はCSSに…、というのが推奨されています。
せっかく外部CSSを利用しているのですからこちらにすべてまとめた方が管理しやすくなります。
(例えば出現個所の class="menu" 内のリストは)
.menu li {
font-size: -1pt; //単位が判らないのでとりあえず
margin: 0px;
padding: 0px;
list-style-type: none;
}
となると思いますよ。

こちらでもソースを借りてローカルのサーバーでテストしましたがXHTML(2番目の方法)で表示出来ました。
(Vista/ IE8・ChromiumのIEタブ[=IE7])
ファイルはテスト後に破棄しました。

投稿日時 - 2009-10-27 21:06:41

補足

ありがとうございます!
表示されました。
いろいろルールがあるんですね。
知らない事ばかりで本当に勉強になりました。

詳しく教えていただいて感謝しております。
また分からない所は教えて下さい。
ありがとうございました。

投稿日時 - 2009-10-28 01:29:39

お礼

いろいろ丁寧に教えていただきありがとうございました。
大変感謝してます。
また何かありましたら教えて下さい。

投稿日時 - 2009-10-28 01:36:22

ANo.2

エラー個所を見つけるときはここ
http://validator.w3.org/
を使います、htmlファイルなら"Validate by direct input(直接入力)"タブにページのソースを貼りつけてチェックを行います。
(英文だけどエラー個所が赤字で表示されます)

ざっと分かる範囲だけだけど…、
・1行目と2行目 
HTML 4.01 Transitionalで <html xmlns= ~ "> 属性は具合悪いので2行目を
<html lang="ja">
とします。

CSSダウンロードの件は多分
・10行目の最後のバックスラッシュが余計なので
rel="stylesheet" type="text/css">
とします(違うかな?)

で、ほとんどのimgに対してのスタイル指定にも最後のバックスラッシュが余計なので同様に削除。
(47~54行目、他多数)

これとは別に2行目が
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
であれば1行目を
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
とすることでバックスラッシュの件はクリアできるんだけど、
大文字の記述があったりfont属性が出てきたりが多数あるので修正する必要がある。

どちらかというとこちらの方が簡単かもしれない、が修正は同じか?
オリジナルをコピーして別ファイルを作成して試してください。

投稿日時 - 2009-10-27 13:12:52

補足

教えていただいてありがとうございます。
一つ目の方法で試しましたが表示できませんでした。

二つ目の方法を試そうと思いますが、大文字・font属性の事が
よく分かりません。
これは大文字を小文字にすればいいのでしょうか?
教えていただけるとありがたいです。
よろしくお願いします。

投稿日時 - 2009-10-27 17:58:17

ANo.1

 参考に、XPのSafariブラウザではしっかりと表示されますね。
 Indexだけ拝見しました。

 内容はあっているようですが、IE本来の問題かもしれません。
 IE7はどうですか?
 8は出たばかりで、ラグがあるかもしれませんよ?

 Index.htmlとcssファイルの関係(相対的な位置とか)も見てみるとどうでしょうか?
 同階層ですか?
 でも、サファリでは表示されるので間違ってはないのでしょうね、、、、

投稿日時 - 2009-10-27 07:00:20

補足

ありがとうございます。初心者なのでIndex.htmlとcssファイルの関係や階層の調べ方が分かりません。何か調べる方法があれば教えていただけるとありがたいです。(IE7で調べてみたいと思います。)

投稿日時 - 2009-10-27 12:27:25

あなたにオススメの質問