Я ломал голову над некоторыми проблемами CSS и понял, что это был doctype.
На производственном сайте
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Где на нашем сценическом сайте
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
При использовании производственного тега многие из моих текстовых цветов, размеров и т. Д. Для элементов моего Списка исчезают.
Я использую файл CSS 960 сетки, за которым следуют файлы сброса и text.css.
После этого у меня есть файл main.css со своими собственными стилями, но, в частности, стили шрифтов для моего списка внутри определенного div не распознаются
Ниже приведен CSS для страницы, за которой следуетHTML
.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>