SitePoint.com

sethtrain · Jan 5, 2005, 14:40

As you can see the bottom of the page in IE has a gap at the top of the navigation border. Firefox doesn't. Anyhelp?

HTML:

HTML Code:

<!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>
	<title>Kentucky Academy of Technology Education</title>
    <link href="katemain.css" rel="stylesheet" type="text/css" />
</head>

<body>

<!-- Begin Container -->
<div id="container">
	
	<!-- Begin Banner Bar with Search -->
	<div id="banner">
		<img src="images/katetop.jpg" alt="Kentucky Academy of Technology Education" />
	</div>
	<!-- End Banner Bar with Search -->
	
	<!-- Begin Left Navigation -->
	<div id="left">
		<h4>Curriculum/Assessment</h4>
		<ul>
			<li><a href="../katelinks/default.asp">KATE Links</a></li>
			<li><a href="kycorecontent/default.htm">KY Core Content</a></li>
			<li><a href="full/tech_standards/default.htm">Teacher Tech Standards</a></li>
			<li><a href="full/tech_proficiency/default.htm">Tech Proficiency Indicators</a></li>
		</ul>
		<h4>Instruction/Environment</h4>
		<ul>
			<li><a href="../katelinks/default.asp">KATE Links</a></li>
			<li><a href="kycorecontent/default.htm">KY Core Content</a></li>
			<li><a href="full/tech_standards/default.htm">Teacher Tech Standards</a></li>
			<li><a href="full/tech_proficiency/default.htm">Tech Proficiency Indicators</a></li>
		</ul>
		<h4>Learning/Leadership</h4>
		<ul>
			<li><a href="../katelinks/default.asp">KATE Links</a></li>
			<li><a href="kycorecontent/default.htm">KY Core Content</a></li>
			<li><a href="full/tech_standards/default.htm">Teacher Tech Standards</a></li>
			<li><a href="full/tech_proficiency/default.htm">Tech Proficiency Indicators</a></li>
		</ul>
	</div>
	<!-- End Left Navigation -->
	
	<!-- Begin Middle Content -->
	<div id="center">
		<div id="content">
			<h2>Monthly Features</h2>
			
			<h3>Jackson Purchase</h3>
			<p>
				"The Jackson Purchase was a historic event before it became a region. The transaction involved prolonged 
				negotiations culminating in a treaty between agents of the United States and those of the Chickasaw Indian 
				Nation. Representing the United States were the aging Isaac Shelby, Revolutionary War hero and twice Kentucky 
				governor, and General Andrew Jackson, hero of the Battle of New Orleans and later president. The Chickasaws 
				were represented by their chiefs, head men and warriors including Levi and George Colbert, Chinubby 
				(the Boy King), and Tishomingo. The two sides signed the treaty in northwestern Mississippi on October 19, 1818; 
				it was ratified by the United States Senate and confirmed by President James Monroe on January 7, 1819.
			</p>
			
			<h3>The Raven</h3>
			<p>
				“The Raven is a narrative poem by Edgar Allan Poe. It was published for the first time on January 29, 1845 in the 
				New York Evening Mirror. In overwrought language and images, it tells of the mysterious visit of a raven to a 
				distraught lover. It is one of the best known American poems.” 
				-- http://en.wikipedia.org/wiki/The_Raven_(Edgar_Allan_Poe) 
			</p>
			
			<h3>Ellis Island</h3>
			<p>
				“On January 1, 1892, a fifteen-year old Irish girl named Annie Moore became the first of the more than twelve 
				million immigrants who would pass through the doors of the Ellis Island Immigration Station in its sixty-two 
				years of operation. This small island off the New Jersey coast in the New York Harbor lies in the shadow of 
				the Statue of Liberty. Together, these two landmarks have welcomed millions of immigrants to America.”  
				-- http://memory.loc.gov/ammem/today/jan01.html 
			</p>
			
			<h3>Spyware</h3>
			<p>
				Need help with fighting off those pesky peeking spies who litter your computer with techno trash... or worse? This 
				feature informs you what syware is, how it spreads and, most importantly, how to shed it once you have it.
			</p>
			
			<h3>Web Series: Accessible Web Pages</h3>
			<p>
				Continuing our series on accessible web pages, this month we feature a 
				<strong><a href="../tech/WEB/standards/standardsprimer.asp">Web Standards Primer</a></strong>. 
				Find out what web standards are, how you can benefit from complying with them and what to do in order to be compliant.
			</p>
			
		</div>
	</div>
	<!-- End Middle Content -->
	
	<!-- Begin Right News 
	<div id="news">
		<h4>News</h4>
		<h5><a href="http://www.eschoolnews.com/">... provided by eschoolnews.com</a>.</h5>
		<ul>
			<li><a href='http://www.eschoolnews.com/news/showStoryRSS.cfm?ArticleID=5451'>Kentucky to launch online testing pilot</a></li>
			<li><a href='http://www.eschoolnews.com/news/showStoryRSS.cfm?ArticleID=5450'>School boards curb eMail exchanges</a></li>
			<li><a href='http://www.eschoolnews.com/news/showStoryRSS.cfm?ArticleID=5441'>Residency dispute tests virtual schooling</a></li>
			<li><a href='http://www.eschoolnews.com/news/showStoryRSS.cfm?ArticleID=5430'>Top 10 ed-tech stories of 2004</a></li>
		</ul>
		
		<h4>On The Web</h4>
		<h5><a href="http://eagle.brooklynpubliclibrary.org/">Brooklyn Daily Eagle</a></h5>
		<p>
			The Brooklyn Public Library has digitized approximately 147,000 pages of yesterday's papers. View complete newspapers with 
			stories that cover such topics as the April 6, 1896 coverage of the war in Cuba, exploding manhole covers, collisions of cars 
			with horse-drawn carriages, and more including text ads. The site lets you click on headlines to read original articles and view 
			graphic ads in their entirety. Remember to turn off pop-up blockers to access the newsprint archive.
		</p>
		
		<h5><a href="http://www.exploratorium.edu/chaco/">Ancient Observatories: Chaco Canyon</a></h5>
		<p>
			Not far from Arizona's Kitt Peak Observatory, on a remote high plateau in northwestern New Mexico, the desert wind whistles 
			through the shallow 10-mile canyon that was once home to a mysterious people. From approximately 850 to 1150 A.D., the Chacoans 
			built a vast and well-organized stone city, where they studied the movements of sun and stars. And then they disappeared. Chaco 
			Culture National Historical Park preserves the heritage of this vanished desert community and the lonesome, glowing spirit of 
			place that remains.
		</p>
	
		<h5><a href="http://www.philamuseum.org/exhibitions/exhibits/africanart/">African Art African Voices</a></h5>
		<p>
			This Philadelphia Museum of Art's exhibition features more than 150 contemporary and traditional works, showcasing the 
			creativity of the artists from Africa. "African Art in Motion" shows how fundamental emotions are expressed in wooden 
			sculptures and masks, while "Contemporary African Art" brings together modern imagery that extends the scope and meaning of 
			African art. 
		</p>
		
	</div>
	End Right News --> 
	
	<!-- Clear the left floats so that the footer will appear correctly -->
	<div style="clear: both;"> </div>
	<!-- End Clear the left floats so that the footer will appear correctly -->
	
	<!-- Begin Footer -->
	<div id="footer">
		<p>&copy; 1999-2004 Kentucky Academy of Technology Education. Questions: <a href="mailto:web@coe.murraystate.edu">web@coe.murraystate.edu</a>.</p>
		<p>Validation: <a href="http://jigsaw.w3.org/css-validator">CSS</a> | <a href="http://validator.w3.org/check/referer">HTML</a> | <a href="http://bobby.watchfire.com">Section 508</a>.</p>
	</div>
	<!-- End Footer -->
	
</div>
<!-- End Container -->

	<div id="navcontainer">
		<!-- Begin Navbar -->
		<div id="navbar">
			<p><a href="about_kate.htm">About KATE</a> | <a href="kate_staff.htm">Contact KATE</a> | Search | 
			<a href="http://www.murraystate.edu/coe">College of Education</a> |	<a href="http://www.murraystate.edu">Murray State University</a></p>
		</div>
		<!-- End Navbar -->
	</div>

</body>
</html>

stylesheet:

Code:

/* CSS Document */

body {
	margin: 0px 0px 0px 0px;
	background-color: #e2e2e2;
	text-align: center;
	/*background-image: url(images/katebackmain.gif);*/
}

a {

}

a:hover {

}

h1 {

}

h2 {

}

h3 {

}

h4 {

}

h5 {

}

#container {
	line-height: 140%;
    margin-top: 10px;
	margin-right: auto;
	margin-left: auto;
	text-align: left;
	padding: 0px;
	width: 760px;
	background-color: #FFFFFF;
	border-top: 1px solid #333333;
	border-right: 1px solid #333333;
	border-left: 1px solid #333333;
}

#banner {
	font-family: Verdana, Arial, sans-serif;
	color: #FFFFFF;
	text-align: left;
	margin: 0px;
	padding: 0px;
	height: 100px;
	margin-bottom: -3px; 
}

#left {
	float: left;
	width: 180px;
	background-color: #FFFFFF;
	border-right: 1px solid #000033;
	overflow: hidden;
}

#center {
	float: left;
	width: 537px;
	overflow: hidden;
}

#content {
	padding: 5px 15px 0px 15px;
	background-color: #FFFFFF;
	color: #666666;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: x-small;
	line-height: 120%;
}

.content p {
	color: #333333;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: small;
	font-weight: normal;
	line-height: 125%;
	text-align: left;
	margin-bottom: 10px;
	}

.content blockquote {
	line-height: 150%;
    background: #DFE0E5;
    border: 1px solid #99ABB5;
    border-right: 5px solid #99ABB5;
    padding: 2px;
	}

.content li {
	line-height: 150%;
	}

.content h2 {
	color: #333333;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: large;
	text-align: left;
	font-weight: bold;
	margin-bottom: 10px;
	}

.content h3 {
	color: #333333;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: small;
	text-align: left;
	font-weight: bold;
	margin-bottom: 10px;
	}

#footer {
    background: #000033;
	border-top: 1px solid #333333;
	border-bottom: 1px solid #333333;
    color: White;
    margin: 0px 0px -1px 0px;
    text-align: center;
    }

#footer a {
	color: white;
	text-decoration: underline;
}

#footer a:hover {
	color: #6699CC;
}

#footer p {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: x-small;
	font-weight: normal;
    margin: 0px;
	margin-bottom: -3px;
	padding: 0px;
    }

#navcontainer {
	text-align: right;
	margin-top: 2px;
	padding: 0px;
	padding-bottom: 5px;
	width: 760px;
	background-color: #e2e2e2;
}

#navbar {
	margin-right: 2px;
}

#navbar p {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: x-small;
	font-weight: normal;
    margin: 0px;
	margin-bottom: -3px;
	padding: 0px;
}

#navbar a {
	color:#666666;
	text-decoration: none;
}

#navbar a:hover {
	color:#333333;
	text-decoration: underline;
}

#navbar a:visited {
	color:#666666;
}

/* Removes default top margin from left/right column paragraphs in Mozilla */
div > p {
  margin-top: 0;
}

Thanks,
Sethtrain

Paul O'B · Jan 5, 2005, 15:15

Hmm , I can't see any gap apart from the gap under the content.

Which specific element are we looking at and where is the gap and which is the desired behaviour?

Ie and firefox look much the same at the bottom of the page except the navcontainer isn't centred in ie.

Paul

sethtrain · Jan 5, 2005, 15:21

In firefox I see no problems. In IE I see a small gap (which can be fixed by putting a -3px bottom margin on my banner div but messes up the center div in firefox). I have attached a picture...

sethtrain · Jan 5, 2005, 15:22

sorry i didn't mention i fixed that problem and changed the original post...i have changed the original post

Paul O'B · Jan 5, 2005, 15:28

The gap is probably cause by your banner image. Set it to display:block and see what happens.

Code:

 
#banner img {display:block}

Paul

sethtrain · Jan 6, 2005, 06:43

That worked! Thanks. I just have one more question. IE seems to be putting lines on my pages (like in my footer). Once I refresh the page it looks correct but if I scroll to the top of the page and then back to the bottom I have that silly line again. Know any way to make this stop (without uninstalling IE).

Paul O'B · Jan 6, 2005, 09:02

Hi,

Sounds like the ie layout bug (position:relative bug (or maybe the peek-aboo bug)).

Try adding position:relative here:

Code:

#footer {
	background: #000033;
 border-top: 1px solid #333333;
 border-bottom: 1px solid #333333;
	color: White;
	margin: 0px 0px -1px 0px;
	text-align: center;
    position:relative;
 }

Paul

sethtrain · Jan 6, 2005, 11:06

That worked! Thanks again. I have never heard of that issue. Why does it do that?

Paul O'B · Jan 6, 2005, 11:20

Quote:

Why does it do that?

Because IE lives in a world of its own

IE likes children of positioned elements to have a position defined as well.

There are many other things that can cause it and most come down to the way ie is designed. It seems that elements don't create layout ("haslayout") unless they have some dimension applied or one of the other properties listed in this link.

http://msdn.microsoft.com/workshop/a.../haslayout.asp

Have a look at p.i.e for loads more bugs.

Paul

sethtrain · Jan 6, 2005, 13:28

I am having the same problem (as I was having before I changed the post i.e. a gap on my border that separates my navigation from my content) and don't know how to fix it.

Here is the code:

HTML Code:

<!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>
	<title>The College of Education at Murray</title>
	<link rel="stylesheet" href="coemain.css" type="text/css" />
</head>

<body>
	
	<!-- Wrapper -->
	<div id="container">
	
		<!-- Banner -->
		<div id="banner">
			<!-- Hidden : for text readers - Section 508 Compatible -->
			<h2>College of Education at Murray</h2>
			<!-- End Hidden -->
			<p class="toptext">3101 Alexander Hall, Murray State University, Murray, KY 42071, 270.762.3817</p>
		</div>
		<!-- End Banner -->
	
		<!-- You are here -->
		<div id="here">
			<p>You are here: <a href="http://www.murraystate.edu">Murray State University</a> &raquo;</p>
		</div>
		<!-- End You are here -->
		
		<!-- Right navigation -->
		<div id="right">
			<div class="sidebar">
				<cfinclude template = "nav.cfm">
			</div>
		</div>
		<!-- End Right navigation -->
	
		<!-- Main content -->
		<div id="center">
			<div class="content">
				<img src="images/coeother.gif" alt="Murray State and COE Links" width="500" height="36" class="img" /> <br />
				<h2>This is a test</h2>
				<p>“The Raven is a narrative poem by Edgar Allan Poe. It was published for the first time on January 29, 1845 in the New York Evening Mirror. In overwrought language and images, it tells of the mysterious visit of a raven to a distraught lover. It is one of the best known American poems.” -- http://en.wikipedia.org/wiki/The_Raven_(Edgar_Allan_Poe) </p>

			</div>
		</div>
		<!-- End Main content -->
		
		<!-- Clear the left floats so that the footer will appear correctly -->
		<div style="clear: both;"> </div>
		<!-- End Clear the left floats so that the footer will appear correctly -->
		
		<!-- Footer -->
		<div id="footer">
			<p>&copy; 2004 College of Education at Murray. All rights reserved. Question or comments to <a href="mailto:web@coe.murraystate.edu">web@coe.murraystate.edu</a>.</p>
			<p>The College of Education at Murray is a <a href="http://www.ncate.org/">NCATE</a> accredited institution. Validation: <a href="http://jigsaw.w3.org/css-validator">CSS</a> | <a href="http://validator.w3.org/check/referer">HTML</a> | <a href="http://bobby.watchfire.com">Section 508</a>.</p>
		</div>
		<!-- End Footer -->
		
	</div>
	<!-- End Wrapper -->
	
</body>
</html>

CSS:

Code:

body {
	margin: 0px 0px 0px 0px;
	background-color: #e2e2e2;
	text-align: center;
	background-image: url(images/mainback.gif);
	}

a {
    text-decoration: underline;
    }

a:link {
	color: #000033;
	}

a:visited {
	color: #000033;
	}

a:active {
	color: #000033;
	}

a:hover {
	color: #3366CC;
	}

h1, h2, h3 {
	margin: 0px;
	padding: 0px;
	font-weight: normal;
}

#container {
	line-height: 140%;
    margin-top: 10px;
	margin-right: auto;
	margin-left: auto;
	text-align: left;
	padding: 0px;
	width: 760px;
	background-color: #FFFFFF;
	border: 1px solid #333333;
	}

#banner {
	font-family: Verdana, Arial, sans-serif;
	color: #FFFFFF;
	text-align: left;
	margin: 0px;
	padding: 0px;
	height: 142px;
	margin-bottom: -3px;
	background-image: url(images/coe_top.jpg);
	}

#banner h2 {
	display:none;
}

#banner .toptext {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 10px;
	line-height: 1.2em;
	color: #FFFFFF;
	text-align: right;
	padding-top: 4px;
	padding-right: 4px;
}

#banner img {
    border: 0px;
    }

#here {
	background-color: #6699CC;
	height: 20px;
	width: 758px;
	position: relative;
	left: 0px;
	top: 0px;
	text-align: left;
	color: #FFFFFF;
	padding-left: 2px;
	border-top: 1px solid #000033;
	border-bottom: 1px solid #000033;
	vertical-align: middle;
	margin: 0px;
}

#here p{
	color: #FFFFFF;
	font-size: 11px;
	font-family: Arial, Helvetica, sans-serif;
	text-align: left;
	margin-top: 0px;
	margin-bottom: 2px;
	vertical-align: middle;
}

#here a {
	color:#FFFFFF;
	font-weight: normal;
}

#here a:hover {
	color: #000033;
}

#right {
	float: left;
	width: 180px;
	background-color: #FFFFFF;
	border-right: 1px solid #000033;
	padding-top: 2px;
	overflow: hidden;
	}

.sidebar .leftheading {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #000033;
	text-align: left;
	border-bottom: 1px solid #6699CC;
	width: 100%;
	padding-left: 4px;
	padding-top: 0px;
	margin-top: 2px;
	background-color: #FBEFC8;
	height: 16px;
	vertical-align: middle;
	border-top: 1px solid #6699CC;
}

.sidebar p {
	padding: 0px;
	margin: 0px;
	line-height: 1.5em;
	padding-left: 2px;
	font-size: 10px;
}

.sidebar a {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: normal;
	color: #000033;
	text-decoration: none;
}

.sidebar a:hover{
	text-decoration: underline;
}

.award {
	text-align: center;
}

.award img {
	border: 0px;
}

#center {
	float: left;
	width: 579px;
	overflow: hidden;
}

.content {
	padding: 15px 10px 5px 10px;
	background-color: #FFFFFF;
	color: #666666;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: x-small;
}

.content img {
	border: 1px #000033 solid;
	display: block;
	margin: auto;
}

.centeredimage {
    text-align: center;
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 0px;
}

.content p {
	color: #333333;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: small;
	font-weight: normal;
	line-height: 125%;
	text-align: left;
	margin-bottom: 10px;
	}

.content blockquote {
	line-height: 150%;
    background: #DFE0E5;
    border: 1px solid #99ABB5;
    border-right: 5px solid #99ABB5;
    padding: 2px;
	}

.content li {
	line-height: 150%;
	}

.content h2 {
	color: #333333;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: large;
	text-align: left;
	font-weight: bold;
	margin-bottom: 10px;
	}

.content h3 {
	color: #333333;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: small;
	text-align: left;
	font-weight: bold;
	margin-bottom: 10px;
	}

#footer {
    background: #000033;
	border-top: 1px solid #333333;
	border-bottom: 1px solid #333333;
    color: White;
    margin: 0px 0px -1px 0px;
    text-align: center;
	position: relative;
}

#footer a {
	color: white;
	text-decoration: underline;
}

#footer a:hover {
	color: #6699CC;
}

#footer p {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: x-small;
	font-weight: normal;
    margin: 0px;
	margin-bottom: -3px;
	padding: 0px;
}

/* Removes default top margin from left/right column paragraphs in Mozilla */
div > p {
  margin-top: 0;
}

Paul O'B · Jan 6, 2005, 14:01

HI,

I can't see where you mean from the code alone I'll have to wait until the attachment is approved. We may also need the cfinclude code.

Paul

sethtrain · Jan 6, 2005, 14:10

ok...once you see the image you will get it the included file is (bear with this file I haven't gone through to clean it up):

HTML Code:

<p class="leftheading">Departments</p>
<p>&raquo; <a href="http://www.murraystate.edu/coe/dean/">Office of the Dean</a> </p>
<p>&raquo; <a href="http://coekate.murraystate.edu/acs">Adolescent, Career and Special Education (ACS)</a> </p>
<p>&raquo; <a href="http://coekate.murraystate.edu/ece">Early Childhood and Elementary Education (ECE)</a> </p>
<p>&raquo; <a href="http://coekate.murraystate.edu/elc">Educational Studies, Leadership and Counseling (ELC)</a> </p>
<p>&raquo; <a href="http://coekate.murraystate.edu/tes">Teacher Education Services (TES)</a> </p>
<p>&raquo; <a href="http://coekate.murraystate.edu/kate">Kentucky Academy of Technology Education (KATE)</a> </p>

<p class="leftheading">COE/MSU Resources</p>
<p>&raquo; <a href="http://www.murraystate.edu/coe/centers/uac/default.htm">Advising Center</a> </p>
<p>&raquo; <a href="http://coekate.murraystate.edu/advsheet">Advising Sheets</a> </p>
<p>&raquo; <a href="http://coekate.murraystate.edu/centers">Centers</a> </p>
<p>&raquo; <a href="http://coekate.murraystate.edu/portfolio">COE ePortfolio</a> </p>
<p>&raquo; <a href="http://coekate.murraystate.edu/syllabi">Common Course Syllabi</a> </p>
<p>&raquo; <a href="http://coekate.murraystate.edu/connections">Connections</a> </p>
<p>&raquo; <a href="http://www.murraystate.edu/coe/coedirs.htm">Directory</a> </p>
<p>&raquo; <a href="http://coekate.murraystate.edu/building/Default.htm">Emergency Plan</a> </p>
<p>&raquo; <a href="http://coe.murraystate.edu">Exchange (Web Mail)</a> </p>
<p>&raquo; <a href="http://coekate.murraystate.edu/graduate">Graduate Programs</a> </p>
<p>&raquo; <a href="http://coekate.murraystate.edu/ota/2004">KY Outstanding Teacher</a> </p>
<p>&raquo; <a href="http://coekate.murraystate.edu/ncate">NCATE</a> </p>
<p>&raquo; <a href="http://coekate.murraystate.edu/pdopps">PD Opportunities Clearinghouse </a> </p>
<p>&raquo; <a href="http://coekate.murraystate.edu/programs">Programs</a> </p>
<p>&raquo; <a href="http://coekate.murraystate.edu/coepolicy/Default.htm">Policy Manual</a> </p>
<p>&raquo; <a href="http://www.murraystate.edu/scholarships/">Scholarship Information (MSU)</a></p>
<p>&raquo; <a href="http://coekate.murraystate.edu/ncate/st/6/ev/COE_Standing_Committees.pdf">Standing Committees</a></p>
<p>&raquo; <a href="http://coekate.murraystate.edu/technology">Technology</a> </p>
<p>&raquo; <a href="http://www.murraystate.edu/msml/msml.htm">University Libraries (MSU)</a> </p>

<p class="leftheading">State/National Resources</p>
<p>&raquo; <a href="http://www.kde.state.ky.us/">KY Dept of Education(KDE)</a> </p>
<p>&raquo; <a href="http://www.kde.state.ky.us/KDE/Instructional+Resources/Curriculum+Documents+and+Resources/default.htm">KDE Curriculum Documents and Resources</a> </p>
<p>&raquo; <a href="http://www.ed.gov/index.jsp">US Department of Education</a> </p>
<p>&raquo; <a href="http://www.ed.gov/offices/OESE/reference.html">No Child Left Behind Desktop Reference</a> </p>
<p>&raquo; <a href="http://www.kyepsb.net/">Education Professional Standards Board(EPSB)</a> </p>
<p>&raquo; <a href="http://coekate.murraystate.edu/kate/pd/epsb.htm">EPSB Modules</a> </p>
<p>&raquo; <a href="http://www.cpe.state.ky.us">KY Council on Post-secondary Education</a> </p>
<p>&raquo; <a href="http://www.kyvl.org/">Kentucky Virtual Library</a> </p>

<p class="leftheading">Education News Resources</p>
<p>&raquo; <a href="http://www.chronicle.com/">Chronicle of Higher Education</a> </p>
<p>&raquo; <a href="http://washingtonpost.com/wp-dyn/politics/fedpage/columns/highered/">Higher Ed <em>(Washington Post)</em></a> </p>
<p>&raquo; <a href="http://www.edweek.org/">Education Week<em> (K-12 news)</em></a> </p>
<p>&raquo; <a href="http://www.nea.org/he/advo-new/henews.html">NEA Advocate: Higher Ed</a> </p>
<p>&raquo; <a href="http://www.educationnews.org">EducationNews.org</a> </p>
<p>&raquo; <a href="http://www.eschoolnews.com/">eSchool News</a> </p>
<br />
<hr style="width: 90%; text-align: center; border: 1;" />
<p class="award"> <a href="http://coekate.murraystate.edu/connections/articles/2004/iste_nets.htm"> <img src="http://localhost/coe/images/iste.gif" alt="2003 ISTE Distinguished Achievment Award Winner" /> </a> </p>

Paul O'B · Jan 7, 2005, 04:17

Hi,

Its the clearer div adding the space. use this method instead.

Code:

	</div>
  </div>
  <!-- End Main content -->
  <!-- Clear the left floats so that the footer will appear correctly -->
  <div class="clearer"></div>
  <!-- End Clear the left floats so that the footer will appear correctly -->
  <!-- Footer -->
  <div id="footer">

CSS:

Code:

.clearer{
height:1px;
overflow:hidden;
margin-top:-1px;
clear:both;
}

Hope that helps.

Paul

sethtrain · Jan 7, 2005, 09:27

Last question I promise: Why is the IE bug still happening in this file. I don't have any positioning to mess it up. I get that line in my footer thing again:

CSS:

Code:

body {
	margin: 0px 0px 0px 0px;
	background-color: #e2e2e2;
	text-align: center;
	background-image: url(images/mainback.gif);
	}

img {
	border: 0px;
}

a {
    text-decoration: underline;
    }

a:link {
	color: #000033;
	}

a:visited {
	color: #000033;
	}

a:active {
	color: #000033;
	}

a:hover {
	color: #3366CC;
	}

h1, h2, h3 {
	margin: 0px;
	padding: 0px;
	font-weight: normal;
}

table {
	border-spacing: 3px;
}

th {
	background: #000033;
	color: white;
	text-align: center;
}

td {
	vertical-align: top;
	border: 3px solid #ffffff;
}

#container {
	line-height: 140%;
    margin-top: 10px;
	margin-right: auto;
	margin-left: auto;
	text-align: left;
	padding: 0px;
	width: 760px;
	background-color: #FFFFFF;
	border: 1px solid #333333;
	}

#banner {
	font-family: Verdana, Arial, sans-serif;
	color: #FFFFFF;
	text-align: left;
	margin: 0px;
	padding: 0px;
	height: 142px;
	margin-bottom: -3px;
	background-image: url(images/coe_top.jpg);
	}

#banner h2 {
	display:none;
}

#banner .toptext {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 10px;
	line-height: 1.2em;
	color: #FFFFFF;
	text-align: right;
	padding-top: 4px;
	padding-right: 4px;
}

#banner img {
    border: 0px;
    }

#here {
	background-color: #6699CC;
	height: 20px;
	width: 758px;
	position: relative;
	left: 0px;
	top: 0px;
	text-align: left;
	color: #FFFFFF;
	padding-left: 2px;
	border-top: 1px solid #000033;
	border-bottom: 1px solid #000033;
	vertical-align: middle;
	margin: 0px;
}

#here p{
	color: #FFFFFF;
	font-size: 11px;
	font-family: Arial, Helvetica, sans-serif;
	text-align: left;
	margin-top: 0px;
	margin-bottom: 2px;
	vertical-align: middle;
}

#here a {
	color:#FFFFFF;
	font-weight: normal;
}

#here a:hover {
	color: #000033;
}

#center {
	float: left;
	width: 100%;
	overflow: hidden;
}

.content {
	padding: 15px 15px 5px 15px;
	background-color: #FFFFFF;
	color: #666666;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: small;
	}

.content p {
	color: #333333;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: small;
	font-weight: normal;
	line-height: 125%;
	text-align: left;
	margin-bottom: 10px;
	}

.content blockquote {
	line-height: 150%;
    background: #DFE0E5;
    border: 1px solid #99ABB5;
    border-right: 5px solid #99ABB5;
    padding: 2px;
	}

.content ul {
	list-style: none;
	margin: 0px;
	padding: 0px;
}

.content li {
	line-height: 150%;
}

ul.linklist {
	list-style-type: circle;
	padding-left: 15px;
}

ul.sublist {
	list-style-type: disc;
}

ul.subsublist {
	list-style-type: square;
	padding-left: 10px;
}

ol.instruct {
	list-style-type: decimal;
	padding-left: 15px;
}

.content h2 {
	color: #333333;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: large;
	text-align: left;
	font-weight: bold;
	margin-bottom: 10px;
	}

.content h3 {
	color: #333333;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: medium;
	text-align: left;
	font-weight: bold;
	margin-bottom: 10px;
	margin-top: 10px;
	}

.content h4 {
	color: #333333;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: small;
	text-align: left;
	font-weight: bold;
	margin-bottom: 10px;
	}

#footer {
    background: #000033;
	border-top: 1px solid #333333;
	border-bottom: 1px solid #333333;
    color: White;
    margin: 0px 0px -1px 0px;
    text-align: center;
}

#footer a {
	color: white;
	text-decoration: underline;
}

#footer a:hover {
	color: #6699CC;
}

#footer p {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: x-small;
	font-weight: normal;
    margin: 0px;
	margin-bottom: -3px;
	padding: 0px;
    }

/* Removes default top margin from left/right column paragraphs in Mozilla */
div > p {
  margin-top: 0;
}

HTML:

HTML Code:

<!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>
	<title>The College of Education at Murray</title>
	<link rel="stylesheet" href="../pdopps.css" type="text/css" />
	<script src="calendar2.js" type="text/javascript"></script>
</head>

<body>
	
	<!-- Wrapper -->
	<div id="container">
	
		<!-- Banner -->
		<div id="banner">
			<!-- Hidden : for text readers - Section 508 Compatible -->
			<h2>College of Education at Murray</h2>
			<!-- End Hidden -->
			<p class="toptext">3101 Alexander Hall, Murray State University, Murray, KY 42071, 270.762.3817</p>
		</div>
		<!-- End Banner -->
		
		<!-- You are here -->
		<div id="here">
			<p>You are here: <a href="http://www.murraystate.edu">Murray State University</a> &raquo; <a href="http://www.murraystate.edu/coe/">College of Education</a> &raquo; PD Opportunities</p>
		</div>
		<!-- End You are here -->
		
		<!-- Begin Navigation -->
		<div id="nav">
			
		</div>
		<!-- End Navigation -->
		
		<!-- Main content -->
		<div id="center">
			<div class="content">
				<h2>Professional Development Opportunities : Database : Add PD Opportunity</h2>
				<form id="pdopps" action="addpdopp.cfm" method="post">
					<table>
						<tr>
							<td><label for="title">Title:</label></td>
							<td><input type="text" name="title" id="title" /></td>
						</tr>
						<tr>
							<td><label for="bdate">Begin Date:</label></td>
							<td><input type="text" name="bdate" id="bdate" value="" /> <a href="javascript:cal1.popup();"><img src="img/cal.gif" alt="Click Here to Pick up the date" /></a></td>
						</tr>
						<tr>
							<td><label for="edate">End Date:</label></td>
							<td><input type="text" name="edate" id="edate" value="" /> <a href="javascript:cal2.popup();"><img src="img/cal.gif" alt="Click Here to Pick up the date" /></a></td>
						</tr>
						<tr>
							<td><label for="desc">Description:</label></td>
							<td><textarea name="desc" id="desc" cols="30" rows="5"></textarea></td>
						</tr>
						<tr>
							<td><label for="sname">Sponsor Name:</label></td>
							<td><input type="text" name="sname" id="sname" /></td>
						</tr>
						<tr>
							<td><label for="semail">Sponsor Email</label></td>
							<td><input type="text" name="semail" id="semail" /></td>
						</tr>
					</table>
				</form>
				<script type="text/javascript">
					<!-- // create calendar object(s) just after form tag closed
						 // specify form element as the only parameter (document.forms['formname'].elements['inputname']);
						 // note: you can have as many calendar objects as you need for your application
						var cal1 = new calendar2(document.forms['pdopps'].elements['bdate']);
						cal1.year_scroll = false;
						cal1.time_comp = false;
						var cal2 = new calendar2(document.forms['pdopps'].elements['edate']);
						cal2.year_scroll = false;
						cal2.time_comp = false;
					//-->
				</script>
			</div>
		</div>
		<!-- End Main content -->

		<!-- Footer -->
		<div id="footer">
			<p>&copy; 2004 College of Education at Murray. All rights reserved. Question or comments to <a href="mailto:web@coe.murraystate.edu">web@coe.murraystate.edu</a>.</p>
			<p>The College of Education at Murray is a <a href="http://www.ncate.org/">NCATE</a> accredited institution. Validation: <a href="http://jigsaw.w3.org/css-validator">CSS</a> | <a href="http://validator.w3.org/check/referer">HTML</a> | <a href="http://bobby.watchfire.com">Section 508</a>.</p>
		</div>
		<!-- End Footer -->
		
	</div>
	<!-- End Wrapper -->
	
</body>
</html>

Paul O'B · Jan 7, 2005, 10:28

Hi,

Well as i mentioned in one of the posts above IE has many bugs to do with layout and most can be fixed with either the height:1% hack or adding position:relative.

In your latest example the trigger problem is the negative margin used in the footer. IE has problems with negative margins unless you use position relative. If you don't use position:relative ie will actually fail to show some content on floats with negative margins. It must be something to do with its redraw routines as the background doesn't seem to get drawn properly. These are all probably related to the "haslayout" issues above although there are extra bugs that don't fall into that category or fall into both.

Anyway armed with the knowledge that you can try height:1% (hide from other browsers of course) or position:relative you should be able to fix most problems.

So add position:relative to the footer or take out the negative margin

Paul

sethtrain · Jan 7, 2005, 13:32

Thanks! What would i do without this wonderful knowledge?

sethtrain · Jan 7, 2005, 14:02

Quote:

Originally Posted by Paul O'B

So add position:relative to the footer or take out the negative margin

WAIT!! This made the whole white area (content area) the same color as the footer in firefox.

Paul O'B · Jan 7, 2005, 14:15

add clear:both to fix mozilla@

Code:

#footer {
	background: #000033;
 border-top: 1px solid #333333;
 border-bottom: 1px solid #333333;
	color: White;
	margin: 0px 0px -1px 0px;
	text-align: center;
 position:relative;
 clear:both;
}

Not sure why it was triggered by the position:relative though! But it will fix it.

Paul

Jan 6, 2005, 09:02	#7
Paul O'B CSS Advisor Join Date: Jan 2003 Location: Hampshire UK Posts: 27,436	Hi, Sounds like the ie layout bug (position:relative bug (or maybe the peek-aboo bug)). Try adding position:relative here: Code: #footer { background: #000033; border-top: 1px solid #333333; border-bottom: 1px solid #333333; color: White; margin: 0px 0px -1px 0px; text-align: center; position:relative; } Paul

Jan 7, 2005, 14:15	#18
Paul O'B CSS Advisor Join Date: Jan 2003 Location: Hampshire UK Posts: 27,436	add clear:both to fix mozilla@ Code: #footer { background: #000033; border-top: 1px solid #333333; border-bottom: 1px solid #333333; color: White; margin: 0px 0px -1px 0px; text-align: center; position:relative; clear:both; } Not sure why it was triggered by the position:relative though! But it will fix it. Paul

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Jan 5, 2005, 15:15	#2
Paul O'B CSS Advisor Join Date: Jan 2003 Location: Hampshire UK Posts: 27,436	Hmm , I can't see any gap apart from the gap under the content. Which specific element are we looking at and where is the gap and which is the desired behaviour? Ie and firefox look much the same at the bottom of the page except the navcontainer isn't centred in ie. Paul

Jan 5, 2005, 15:22	#4
sethtrain SitePoint Zealot Join Date: Dec 2003 Location: Paducah, KY Posts: 175	sorry i didn't mention i fixed that problem and changed the original post...i have changed the original post

Jan 5, 2005, 15:28	#5
Paul O'B CSS Advisor Join Date: Jan 2003 Location: Hampshire UK Posts: 27,436	The gap is probably cause by your banner image. Set it to display:block and see what happens. Code: #banner img {display:block} Paul

Jan 6, 2005, 06:43	#6
sethtrain SitePoint Zealot Join Date: Dec 2003 Location: Paducah, KY Posts: 175	That worked! Thanks. I just have one more question. IE seems to be putting lines on my pages (like in my footer). Once I refresh the page it looks correct but if I scroll to the top of the page and then back to the bottom I have that silly line again. Know any way to make this stop (without uninstalling IE).

Jan 6, 2005, 11:06	#8
sethtrain SitePoint Zealot Join Date: Dec 2003 Location: Paducah, KY Posts: 175	That worked! Thanks again. I have never heard of that issue. Why does it do that?

Jan 6, 2005, 14:01	#11
Paul O'B CSS Advisor Join Date: Jan 2003 Location: Hampshire UK Posts: 27,436	HI, I can't see where you mean from the code alone I'll have to wait until the attachment is approved. We may also need the cfinclude code. Paul

Jan 7, 2005, 10:28	#15
Paul O'B CSS Advisor Join Date: Jan 2003 Location: Hampshire UK Posts: 27,436	Hi, Well as i mentioned in one of the posts above IE has many bugs to do with layout and most can be fixed with either the height:1% hack or adding position:relative. In your latest example the trigger problem is the negative margin used in the footer. IE has problems with negative margins unless you use position relative. If you don't use position:relative ie will actually fail to show some content on floats with negative margins. It must be something to do with its redraw routines as the background doesn't seem to get drawn properly. These are all probably related to the "haslayout" issues above although there are extra bugs that don't fall into that category or fall into both. Anyway armed with the knowledge that you can try height:1% (hide from other browsers of course) or position:relative you should be able to fix most problems. So add position:relative to the footer or take out the negative margin Paul

Jan 7, 2005, 13:32	#16
sethtrain SitePoint Zealot Join Date: Dec 2003 Location: Paducah, KY Posts: 175	Thanks! What would i do without this wonderful knowledge?