※ ChatGPTを利用し、要約された質問です(原文:外部CSSがIEで無反映)
外部CSSがIEで無反映
Web制作初心者です。
ポートフォリオとしてサイトを2つくらい作ったのですが、2つとも
Google Chromeで表示確認をしていて、出来上がってから
Internet Explorerでも表示確認をしてみたら、IEでは
外部CSSが全く反映されていない状態でした。
何がダメなのか全くわかりません。
お手数ですがご助言お願い致します。
------------HTML-----------------
<!doctype html>
<html>
<head>
<meta charset="text/html; charset=utf-8">
<meta name="descrption" content="">
<meta name="keywords" content="">
<link rel="stylesheet" type="text/style" href="common.css">
<link rel="stylesheet" type="text/style" href="index.css">
<title>
Profile-TOP-
</title>
</head>
<body>
<div id="wrapper">
<!--*************ヘッダー部分*************-->
<div id="header">
<h1>My Profile Site</h1>
<!--ナビゲーション部分-->
<div class="navi">
<ul>
<li class="top">TOP</li>
<li><a href="profile.html">Profile</a></li>
<li><a href="design.html">Design</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div><!--/navi-->
</div><!--/header-->
<!--************コンテンツ部分************-->
<div id="content">
<a href="profile.html"><img src="images/NY.png" alt="ny"></a>
<p class="please">↑<br>Please click the image!</p>
<p class="site">当サイトは私のプロフィールやポートフォリオを掲載しています。</p>
</div><!--/content-->
<!--*************フッター部分*************-->
<div id="footer">
<p>Copyright © 2013 nnn All Rights Reserved.</p>
</div><!--/fotter-->
</div><!--/wrapper-->
</body>
</html>
--------------CSS-----------------
-----common-----
/*----------body部分---------*/
* {
font-family: serif;
}
body,html {
background: url("images/wood_texture4.jpg") ;
color: #ffffcc;
margin: 0;
padding: 0;
line-height: 20px;
height: 100%;
}
img {
border: none;
}
/*--------wrapper--------*/
#wrapper {
width: 900px;
margin: 0 auto;
padding: 0;
}
/*---------header---------*/
#header {
background-color: #000000;
margin: 0;
height: 120px;
padding-top: 1px;
}
h1 {
float: left;
font-size: 40pt;
padding-top: 10px;
padding-left: 30px;
padding-right: 60px;
width: 440px;
margin-top: 0;
margin-right: 30px;
}
.navi ul {
margin-top: 0;
}
.navi ul li {
list-style-type: none;
float: left;
width: 80px;
margin-top: 28px;
margin-right: 2px;
padding: 6px 10px;
text-align: center;
background-color: #151515;
font-weight: bold;
}
a:link {
color: #cccccc;
text-decoration: none;
}
a:visited {
color: #cccccc;
}
a:hover {
color: #ff6600;
}
/*------------content---------------*/
#content {
background-color: #6e6e3c;
clear: left;
color: #000000;
margin: 0;
height: auto;
}
/*-------footer-------*/
#footer {
background-color: #000000;
height: 40px;
padding: 10px;
clear: both;
padding-right: 20px;
margin-top: 0;
margin-bottom: 0;
}
#footer p {
text-align: right;
vertical-align: middle;
}
--------index.css---------
/*content*/
#content img {
position: relative;
left: 50px;
}
p {
text-align: center;
margin-bottom: 0;
}
.please {
color: #ffffff;
font-weight: bold;
font-size: 15pt;
}
.site {
padding-bottom: 20px;
}
/*現在のページナビ*/
.top {
color: #990000;
}
お礼
仰る通りでした! まさか、丸暗記しておかないといけない基礎の基礎部分が違うだなんて思っても見ませんでした(苦笑 大変助かりました! ありがとうございました!