in a previous question someone was able to help me with the nav issue in IE. My new issue occurs in both firefox and IE. What happens is the container expands only as far as the text goes. On the homepage it only goes half way down, because that is how far the text goes, but on another page it size is made scrollable since the text expands past the bottom of the screen. As fasr as I know this occurs in all versions of Firefox and all version of IE except for 10. It does work in Chrome and Safari however.
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;
}
