Контейнер не расширяется
В предыдущем вопросе кто-то смог мне помочь с проблемой навигации в IE. Моя новая проблема возникает как в Firefox, так и в IE. Что происходит, так это то, что контейнер расширяется только до тех пор, пока идет текст. На главной странице он только наполовину опускается, потому что это то, как далеко идет текст, но на другой странице его размер прокручивается, так как текст расширяется за нижнюю часть экрана. Насколько я знаю, это происходит во всех версиях Firefox и во всех версиях IE, кроме 10. Однако он работает в Chrome и Safari.
HTML:
<!--[If ! IE]>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<![endif]-->
<!--[If lte IE 9]>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "w3.org/TR/html4/strict.dtd">
<![endif]-->
<html>
<head>
<title>Amity Technology Education</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<center>
<div class="container">
<!-- Start Header -->
<div class="header">
<img align="left" height="100%" width="180px"src="G:\Web Design\Website\Images\Tech Pics\amityshield.jpg"/>
<h1>Welcome to Amity Technology Education</h1>
</div>
<!-- End Header -->
<!-- Start Naviagtion Bar -->
<center>
<ul id="nav">
<!-- Has Dropdown -->
<li class="current"><a href="homepage.html">Home</a></li>
<li><a href="consumer.html">Consumer & Family Science</a>
<ul>
<li><a href="zawacki.html">Mr. Zawacki</a></li>
<li><a href="anderson.html">Mrs. Anderson</a></li>
<li><a href="hans.html">Mr. Hans</a></li>
</ul>
</li>
<li><a href="business.html">Business Education</a>
<ul>
<li><a href="fuller.html">Mr. Fuller</a></li>
<li><a href="cofrancesco.html">Mr. Cofrancesco</a></li>
<li><a href="tupper.html">Mrs. Tupper</a></li>
</ul>
</li>
<li><a href="tech.html">Technology Education</a>
<ul>
<li><a href="richard.html">Mr. Richard</a></li>
<li><a href="teravainen.html">Mr. Teravainen</a></li>
<li><a href="battaglia.html">Mr. Battaglia</a></li>
<li><a href="loman.html">Ms. Loman</a></li>
<li><a href="whelpley.html">Mr. Whelpley</a></li>
</ul>
</li>
</ul>
</center>
<!-- End Navigation Bar -->
<!-- Start Content -->
<center>
<h1>Applied Education Statement of Philosophy</h1>
</center>
<p align="left" id="usualp">
The philosophy of the Career and Technical Education Department (CTE) reflects Amity’s Common Core of Learning goals to prepare
students for life by offering them opportunities to acquire skills and competencies in the areas of career and family living.
Course variety gives students the chance to experience growth and learning in many areas essential to becoming productive and
contributing members of society. Career and Technical Education courses also provide students with the opportunities to pursue
academic excellence through a variety of learning experiences which address the diversity of our student population.
Heterogeneous grouping allows for experiences which reflect a microcosm of society (mutual respect, sense of caring/cooperation,
sense of community, etc.) The various electives offered by the Career and Technical Education Department will enhance the
future of students whether they are pursuing post secondary education, entering directly into the job market, or developing
personal and leisure-time interests.
</p>
<!-- End Content -->
</div>
</center>
</body>
</html>
CSS:
body {
background-color: #eee;
font-family: "Trebuchet MS", Helvetica, sans-serif;
background-size: 100%;
}
a {
color: #333;
}
.container {
background-color: #767070;
width: 75%;
height: 97%;
min-width: 1000px;
min-height: 600px;
border-style: none;
box-shadow: 0 0 10px 3px #888888;
height: auto;
min-height: 97% !important;
}
.header {
width: 100%;
height: 150px;
background-color: #767070;
background-size: cover;
}
.header h1 {
float: left;
position: relative;
left: 55px;
top: 25px;
}
#nav {
width: 98.8%;
margin: 0;
padding: 7px 6px 0;
background: #2b2b2b;
line-height: 100%;
display: inline-block;
}
#nav li {
margin: 0 5px;
padding: 0 0 8px;
float: left;
position: relative;
list-style: none;
}
#nav a {
font-weight: bold;
color: #e7e5e5;
text-decoration: none;
display: block;
padding: 8px 20px;
margin: 0;
}
#nav a: hover {
background: #000;
color: #fff;
}
#nav .current a, #nav li:hover > a {
background: #ddd;
color: #666;
}
#nav ul li:hover a, #nav li:hover li a {
background: none;
border: none;
color: #666;
}
#nav ul a:hover {
color: black!important;
}
#nav li:hover > ul {
display: block;
}
#nav ul {
display: none;
margin: 0;
padding: 0;
width: 98.5%;
position: absolute;
top: 35px;
left: 0;
background: #ddd;
border: 1px solid #b4b4b4;
}
#nav ul li {
float: none;
margin: 0;
padding: 0;
}
#nav ul a {
font-weight: normal;
}
#usualp {
margin: 5px;
color: #EEEEEE;
text-indent: 50px;
}
p {
margin: 5px;
color: #EEEEEE;
}
#fullercoursesheadings {
text-align: left;
margin: 5px;
}
1 ответ
<center> тег устарел может быть проблема?
Это не поддерживается в HTML5, в вашем коде я не вижу doctype для других браузеров, кроме IE правильно? Может быть, Chrome и FF предполагают <doctype html> по умолчанию?
Вы можете использовать что-то вроде этого:
<div class="center">
и в вашем css:
.center { margin: 0 50%; }