1
私はいくつかのCSSの問題について頭を悩まされていて、それがdoctypeだと分かりました。DocTypeはCSSが認識されないようにします
生産拠点は、私のテキストの色の多くの生産タグを使用する場合は、当社のステージサイトは
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
を運ぶよう
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
は、要素が消える私のリストのためなどのサイズ運びます。
私は960グリッドCSSファイルを使用し、その後にresetとtext.cssファイルを使用します。
はその後、私は自分のスタイルであるmain.cssファイルを持って、まだ具体的に特定のdivの内側の私のリストのフォントのスタイリングは、以下
は、HTMLに続いて、ページのCSSで認識されません。.sideBox {
width: 225px;
float: right;
text-align: left;
}
.sidebox ul, #slideMenu ul {
list-style: none;
margin: 0;
padding: 0;
text-indent: 0;
margin-top:8px;
}
#slideMenu ul li {
margin-right:10px;
padding-right: 10px;
float: left;
width:150px;
border-right: 1px solid #cccccc;
}
.sidebox li {
height:124px;
margin: 0;
padding: 0 10px;
border-bottom: 1px solid #cccccc;
}
.sidebox li:first-child{
height:123px;
border-top: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
}
.sidebox h3, .sidebox p
{
margin: 0;
color: #707070;
padding:0;
font-size: 22px;
margin-top:1px;
font-weight:500;
}
.sidebox p {
font-size:18px;
color:#a6a6a6;
}
.infoBoxDiv {
height: 100%;
vertical-align: middle;
}
.infoBoxDiv h2, infoBoxDiv.p {
height: 100%;
vertical-align: middle;
}
.sidebox li.infohighlighted {
border-top: 2px solid #00A4E4;
border-bottom: 2px solid #00A4E4;
position:relative;
top:-1px;
height:121px;
}
.sidebox li:first-child.infohighlighted {
border-top: 2px solid #00A4E4;
border-bottom: 2px solid #00A4E4;
position:relative;
top:0px;
height:121px;
}
.sidebox li.infohighlighted p {
color: #707070;
font-family: Georgia;
}
.sidebox li.infohighlighted h3 {
color: #00A4E4;
font-family: Georgia;
margin: 0px;
top: -1px;
padding: 0px;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/960.css" />
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/text.css" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery_ui.js" type="text/javascript"></script>
<script src="js/rotator.js" type="text/javascript"></script>
</head>
<body style="background-color:#e4e5ef;"><br><br>
<div class="container_16" style="background-color:#fff;"><br><br>
<div id="splashContainer">
<div id="jqb_object">
<div class="jqb_slides">
Slides Here
</div>
</div>
<div class="sideBox">
<ul id="slideList">
<li id="infoBox_0" class="infoDefault infoHighlighted"><br><h3>$95 Rx Glasses</h3><p>Vintage inspired frames with prescription lenses</p></li>
<li id="infoBox_1" class="infoDefault"><br><h3>New Collection</h3><p>See 4 new exclusively designed styles</p></li>
<li id="infoBox_2" class="infoDefault"><br><h3>New Collection</h3><p>See 4 new Designs</p></li>
<li id="infoBox_3" class="infoDefault"><br><h3>New Collection</h3><p>See 4 new Designs</p></li>
</ul>
</div>
</div>
<div id="mediaBanner" class="subContainer">
<div id="featuredIn">
<span style="vertical-align:middle; line-height:38px;">Featured In:</span>
<img src="images/nyTimes.png" style="vertical-align:middle;margin:none;padding:none;">
<img src="images/vogue.png" style="vertical-align:middle;margin:none;padding:none;">
<img src="images/dailyCandy.png" style="vertical-align:middle;margin:none;padding:none;">
<img src="images/gq.png" style="vertical-align:middle;margin:none;padding:none;">
<span style="vertical-align:middle; line-height:38px;color:#ccc; padding-left:30px;font-style:bold;">|</span>
</div>
<div id="socialBox"><span style="vertical-align:middle; line-height:38px;">Join Us | Follow Us</span></div>
</div>
<div class="subContainer miniBoxContainer">
<div class="miniBox"><img src="images/miniBox282x128.jpg" /><h4>New Collection</h4><a href="#">Check out the new collection</a></div>
<div class="miniBox"><img src="images/miniBox282x128.jpg" /><h4>New Collection</h4><a href="#">Check out the new collection</a></div>
<div class="miniBox"><img src="images/miniBox282x128.jpg" /><h4>New Collection</h4><a href="#">Check out the new collection</a></div>
</div>
</div>
</body>
</html>
プロダクションサイトで動作させるdoctypeを使用するだけではどうですか？最初のものはあなたが使うべきもののように見えるので、CSSファイルを呼び出す方法には問題があると思います。 – Andrew
firefoxの場合は、エラーコンソールを表示します（shift-ctrl-j）。 doctype（または一般的な構文エラー）によってCSSエラーが発生した場合、そこにログに記録されます。 –
productiond DocTypeを制御できません。プロダクションサイトでは、HTMLトランジションの拡張doctypeタグを持っています。その理由はわかりません。 – CogitoErgoSum