2 replies [Last post]
dmikester1
Offline
Regular
Last seen: 12 years 13 weeks ago
Timezone: GMT-6
Joined: 2007-05-24
Posts: 36
Points: 19

My site looks great in FF but I can not get it to scroll the content in IE. Can anyone help me figure this out?
Thanks
Mike

CSS

* {
  padding: 0;
  margin: 0;
}
 
body, html {
  background-color:#BBC0CB;
	height: 100%;
	position: fixed;
}
 
#container {
  background-color: #00007d;
	color: #000000;
  position: fixed;
  width: 744px;
	top: 10px;
	left: 10px;
	bottom: 10px;
	min-height: 500px;
}
 
#header {
  position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 106px;
}
 
#wrap {
  width: 742px;
	min-height: 392px;
	top: 116px;
	left: 10px;
	bottom: 12px;
	overflow: hidden;
	position: fixed;
}
 
#navigation {
  float: left;
  left: 0;
	width: 180px;
	top: 0;
	background-color: #00007d;
	color: #ffffff;
	padding: 10px;
	oveflow: none;
	font-weight: bold;
	font-size: 14px;
	font-family: Verdana,Arial,Helvetica,sans-serif;
}
 
#navigation li {
  list-style-type: none;
	padding: 5px;
}
 
#content, #form {
  float:left;
	width: 522px;
	background-color: #ffffff;
	overflow: auto;
	padding: 0 10px;
  height: 100%;
	margin-bottom: 10px;
	min-height: 100%;
	max-height: 100%;
}
 
.clear {
  clear: both;
	line-height:0px;
	font-size:1px;
}
 
#form div.inputs1 label {
  float: left;
	width: 10em;
}
 
#form div.inputs1 .second  {
  width: 150px;
	margin-right: 10px;
}
 
#form div.inputs1 .third {
  width: 150px;
}
 
#form div.inputs1 .thirdT {
  margin-left: 128px;
}
 
#form div.inputs1 label.short {
  width: 5em;
}
 
#form div#inputs2 label, #form div#inputs2 input {
  margin: 0 5px;
 
}
 
#form div#inputs2 input {
  width: 17em;
}
 
#form div#inputs2 div.label {
  float: left;
  width: 8em;
}
 
#form select.short {
  width: 4em;
	margin-bottom: 5px;
}
 
#form label.grades {
  width: 4em;
	margin-left: 5px;
}
 
#form select.grades {
  width: 3em;
}
 
#form div.inputs1 input {
  float: left;
}
 
#form .half {
  width: 49%;
	float: left;
}
 
#form .half input {
  width: 18em;
	margin-bottom: 5px;
}
 
.half .right {
  float: right;
	margin-right: 10px;
}
 
#form textarea {
  margin-bottom: 3px;
}
 
input.submit {
  display:block;
  margin:0px auto;
	width: 100px;
	height: 30px;
	margin-bottom: 10px;
	background-color: #00007d;
	color: #ffffff;
	font-weight: bold;
}
 
input.submit:hover {
  background-color: #0000C9;
	cursor: pointer;
}
 
#content p {
  padding: 8px 0;
}
 
 
#spacer {
  height: 10px;
}
 
h2, h3 {
  padding: 10px;
}
 
.small {
  font-size: 11px;
}
 
.strong {
	font-weight: bold;
}
 
.italic {
  font-style:italic;
}
 
.bold {
  font-weight: bold;
}
 
.red {
	color: #cc0000;
}
 
.left {
  text-align: left;
}
 
.center {
  text-align: center;
}
 
.clear {
  clear: both;
}
 
.spacer {
  width: 30px;
	margin-left: 30px;
}
 
a:link, a:visited, a:hover, a:active {
	text-decoration: none;
}
 
#navigation a, #navigation a:visited {
  color: #ffffff;
}
 
a:hover, #navigation a:hover {
  color:#ffff00;
}

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Performance Appraisal</title>
<link href="../pdm_intranet.css" rel="stylesheet" type="text/css" />
<link href="../styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <div id="container">
   <div id="header"><img src="../img/header.gif" alt="header" /></div>
		<div id="wrap">
    <div id="navigation">
    </div>
		<form id="form" action="thankyou.php" method="post">
		  <h3 class="center">Performance Appraisal Worksheet<br /><br /></h3>
			<div class="inputs1">
				<div><label>&nbsp;</label><span class="second">First</span><span class="thirdT">Last</span></div>
  			<div><label for="manFirstName">Managers Name:</label>
  			<input type="text" id="manFirstName" name="manFirstName" class="second" />
				<input type="text" id="manLastName" name="manLastName" class="third" /></div><br /><br />
				<div><label>&nbsp;</label><span class="second">First</span><span class="thirdT">Last</span></div>
  			<div><label for="empFirstName">Employee Name:</label>
  			<input type="text" id="empLastName" name="empLastName" class="second" />
				<input type="text" id="empFirstName" name="empFirstName" class="second" /></div><br /><br />
  			<div><label for="location">Location:</label>
  			  <select id="location" name="location">
  				  <option>&nbsp;</option>
  					<option>Eau Claire Plant</option>
  					<option>Palatka Plant</option>
  					<option>Wausau Plant</option>
  					<option>Office Staff</option>
  				</select>
  			</div><div class="spacer">&nbsp;</div>
  			<div><label for="dept">Department:</label>
  			  <select id="dept" name="dept">
  					<option>&nbsp;</option>
  				  <option>Accounting</option>
  					<option>Estimating</option>
  					<option>Human Resources</option>
  					<option>Information Systems</option>
  					<option>Maintenance</option>
  					<option>Production</option>
  					<option>Project Management</option>
  					<option>Purchasing</option>
  					<option>Quality Control</option>
  					<option>Sales</option>
  				</select>
        </div><div class="spacer">&nbsp;</div>
  			<div><label for="position">Position:</label>
  			<input type="text" id="position" name="position" /><br /><br />
  			<div><label>Review Period:</label>
  			<label for="year" class="short">Year:</label>
  			  <select id="year" name="year" class="short">
  				  <option>&nbsp;</option>
  					<option>2009</option>
  					<option>2010</option>
  					<option>2011</option>
  					<option>2012</option>
  				</select><br />
  				<label>&nbsp;</label><label for="quarter" class="short">Quarter:</label>
  				  <select id="quarter" name="quarter" class="short">
  					  <option>&nbsp;</option>
  						<option>1</option>
  						<option>2</option>
  						<option>3</option>
  						<option>4</option>
  					</select>
  					<div class="spacer">&nbsp;</div>
  			</div>
			</div>
			</div>
			<div><strong>Step 1:</strong> Review the Score Card and 100 Day Plans, rating each individual 
			item A, B or C.<br /><br /></div>
			<div><strong>A</strong> = Accomplish Expectations</div>
			<div><strong>B</strong> = Accomplish Expectations only Partially</div>
			<div><strong>C</strong> = Significantly Under Expectations<br /><br /></div>
			<div><strong>Step 2:</strong> Give an overall rating to the Score Card and 100 Day Plan along with an objective  
			statement(<img src="https://csscreator.com/sites/all/modules/smileys/packs/Roving/drunk.png" title="Drunk" alt="Drunk" class="smiley-content" /> about why you rated as you did <strong>(be specific)</strong>.<br /><br /></div>
			<div><label class="ratings">Scorecard Overall Rating:</label>
			<label class="grades" for="overallRat"><strong>A, B, or C</strong></label>
			  <select id="overallRat" name="overallRat" class="grades">
			    <option>&nbsp;</option>
					<option>A</option>
					<option>B</option>
					<option>C</option>
				</select><br /><br />
			</div>
			<div>Objective Statement(s)<br /><br />
			  <textarea id="objective1A" name="objective1A" rows="2" cols="58"></textarea>
				<textarea id="objective1B" name="objective1B" rows="2" cols="58"></textarea>
				<textarea id="objective1C" name="objective1C" rows="2" cols="58"></textarea><br /><br />
			</div>
			<div><label class="ratings">100 Day Plan Performance:</label>
			  <label class="grades" for="overallRat"><strong>A, B, or C</strong></label>
				<select id="dayPlanRat" name="dayPlanRat" class="grades">
			    <option>&nbsp;</option>
					<option>A</option>
					<option>B</option>
					<option>C</option>
			  </select><br /><br />
			</div>
			<div>Objective Statement(s)<br /><br />
			  <textarea id="objective2A" name="objective2A" rows="2" cols="58"></textarea>
				<textarea id="objective2B" name="objective2B" rows="2" cols="58"></textarea>
				<textarea id="objective2C" name="objective2C" rows="2" cols="58"></textarea><br /><br />
			</div>
			</div>
			<div><input type="submit" value="Submit" class="submit" /></div>
			</form>
			<div class="clear"></div>
  </div>
</div>
</body>
</html>

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 19 weeks 4 hours ago
Timezone: GMT-5
Joined: 2009-10-09
Posts: 2050
Points: 2282

Get rid of "position:

Get rid of "position: fixed;".

dmikester1
Offline
Regular
Last seen: 12 years 13 weeks ago
Timezone: GMT-6
Joined: 2007-05-24
Posts: 36
Points: 19

If I do that, then the whole

If I do that, then the whole page scrolls in both browsers, not just the white content area. Any other suggestions?
Thanks
Mike