Nav bar not working in explorer 11 - html

I'm a beginner with responsive sites and having a problem with this one. Everything shows up fine for me on my Mac, iPad and iPhone, but apparently the nav bar is going blank on a Windows machine in Explorer 11 (11.0.25 to be exact). What am I missing? I've tried researching but haven't been able to figure out the problem and can't replicate it since it all looks fine on my end. The site is at http://muconf.missouri.edu/boats2016/
(http://muconf.missouri.edu/boats2016/boatsproblem.png) My contact says the only reason the Home button is showing up in this screenshot is she is hovering over it, otherwise everything is blank.
CSS
<!doctype html>
<html><!-- InstanceBegin template="/Templates/index.dwt"
codeOutsideHTMLIsLocked="false" -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Raleway|Lato|Oxygen">
<link rel="stylesheet" type="text/css" href="boats2.css" />
<style>
* {
box-sizing: border-box;}
.row:after {
content: "";
clear: both;
display: block;}
</style>
<!-- InstanceBeginEditable name="Based on a True Story" -->
<title>Based on a True Story</title>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
</head>
HTML
<body>
<!-- begin header -->
<div class="header">
<img src="images/header_2016.jpg" width="3300" height="446" alt=""/>
</div>
<!-- end header -->
<!-- begin nav menu -->
<nav class="clearfix" id="nav">
<ul class="clearfix">
<li>Home</li>
<li>Schedule</li>
<li>Register</li>
<li>Presenters</li>
<li>Location/Travel</li>
<li>Contact Us</li>
<li>Previous Years</li>
</ul>
</nav>
<!-- end nav menu -->
/*** showing the menu ***/
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$("#nav").addClass("js").before('<div id="menu">☰</div>');
$("#menu").click(function(){
$("#nav").toggle();
});
$(window).resize(function(){
if(window.innerWidth > 768) {
$("#nav").removeAttr("style");
}
});
</script>
<!-- begin content area -->
<div class="TextOnlyContainer" style="margin: 0 auto"><!-- InstanceBeginEditable name="EditRegion3" -->
<!-- start left column -->
<div style="float:left; width:75%"><h2>Reporting Real Life, Telling True Stories</h2>
<p align="left" class="text">Join us once again in Columbia, Missouri, from March 2-4, 2016, as a dynamic group of filmmakers, journalists, and film critics engage in a series of thoughtful and energetic discussions about telling true stories in film and journalism. The fifth year of <em>Based on a True Story: The Intersection of Documentary Film and Journalism</em> will again set about analyzing the intersection of nonfiction storytelling forms, advocacy in that storytelling, and the cultural and ethical implications of the convergence between journalism and documentary film.</p>
<p class="text">An interdisciplinary group of scholars at the University of Missouri — sponsored by the Mizzou Advantage Program — will be partnering again with the True/False Film Fest to continue our tradition of light-hearted yet serious-minded discussions about documentary film. Conference attendees will spend time engaging with some of the top thinkers, purveyors, and practitioners of documentary film. It will be the perfect run-up to the 12th annual True/False Film Festival, March 3–6, 2016!</p></div>
<!-- end left column -->
<!-- start right column -->
<div style="float:right; background-color:#ccc; padding:1em;">
<a href="http://truefalse.org/"><h5 style="text-align:center">True/False Film Fest</h5>
<img src="images/tf2016.jpg" alt="True/False Film Fest" width="175" height="212" border="0" /></a>
</div>
<!-- end right column -->
<div style="clear:both"></div>
<!-- Begin DWUser_EasyRotator -->
<script type="text/javascript" src="http://c520866.r66.cf2.rackcdn.com/1/js/easy_rotator.min.js"></script>
</p>
<p></p>
<p></p>
<div class="dwuserEasyRotator" style="width: 100%; height: 400px; position:relative; text-align: center; margin:0 auto" data-erconfig="{autoplayEnabled:true, lpp:'102-105-108-101-58-47-47-47-85-115-101-114-115-47-87-111-111-100-121-47-68-111-99-117-109-101-110-116-115-47-69-97-115-121-82-111-116-97-116-111-114-80-114-101-118-105-101-119-47-112-114-101-118-105-101-119-95-115-119-102-115-47', wv:1}" data-ername="slideshow" data-erResponsiveRatio="{600:400}" data-erTID="{jz42jpztf5098200863541}">
<div data-ertype="content" style="display: none;"><ul data-erlabel="Main Category">
<li>
<span class="text"><img class="main" src="images/slideshow/slide05.jpg" />
<img class="thumb" src="images/slideshow/slide05.jpg" /></span>
</li>
<li>
<span class="text"><img class="main" src="images/slideshow/slide04.jpg" />
<img class="thumb" src="images/slideshow/slide04.jpg" /></span>
</li>
<li>
<span class="text"><img class="main" src="images/slideshow/slide03.jpg" /> <img class="thumb" src="images/slideshow/slide03.jpg" /></span>
</li>
<li>
<span class="text"><img class="main" src="images/slideshow/slide02.jpg" /> <img class="thumb" src="images/slideshow/slide02.jpg" /></span>
</li>
<li>
<span class="text"><img class="main" src="images/slideshow/slide01.jpg" /> <img class="thumb" src="images/slideshow/slide01.jpg" /></span>
</li>
</ul>
</div>
<div data-ertype="layout" data-ertemplatename="NONE" style=""> <div class="erimgMain" style="position: absolute; left:0;right:0;top:0;bottom:0;" data-erConfig="{__numTiles:3, scaleMode:'scaleDown', imgType:'main', __loopNextButton:false, __arrowButtonMode:'rollover'}">
<div class="erimgMain_slides" style="position: absolute; left:0; top:0; bottom:0; right:0;">
<div class="erimgMain_slide">
<div class="erimgMain_img" style="position: absolute; left: 0; right: 0; top: 0; bottom: 0;"></div>
</div>
</div>
<div class="erimgMain_arrowLeft" style="position:absolute; left: 10px; top: 50%; margin-top: -15px;" data-erConfig="{image:'circleSmall', image2:'circleSmall'}"></div>
<div class="erimgMain_arrowRight" style="position:absolute; right: 10px; top: 50%; margin-top: -15px;" data-erConfig="{image:'circleSmall', image2:'circleSmall'}"></div>
</div><div class="erabout erFixCSS3" style="color: #FFF; text-align: left; background: #000; background:rgba(0,0,0,0.93); border: 2px solid #FFF; padding: 20px; font: normal 11px/14px Verdana,_sans; width: 300px; border-radius: 10px; display:none;"> This <a style="color:#FFF;" href="http://www.dwuser.com/easyrotator/" target="_blank">jQuery slider</a> was created with the free <a style="color:#FFF;" href="http://www.dwuser.com/easyrotator/" target="_blank">EasyRotator</a> software from DWUser.com. <br />
<br />
Use WordPress? The free <a style="color:#FFF;" href="http://www.dwuser.com/easyrotator/wordpress/" target="_blank">EasyRotator for WordPress</a> plugin lets you create beautiful <a style="color:#FFF;" href="http://www.dwuser.com/easyrotator/wordpress/" target="_blank">WordPress sliders</a> in seconds. <br />
<br />
<a style="color:#FFF;" href="#" class="erabout_ok">OK</a></div>
<noscript>
Rotator powered by EasyRotator, a free and easy jQuery slider builder from DWUser.com. Please enable JavaScript to view.
</noscript>
<script type="text/javascript">/*Avoid IE gzip bug*/(function(b,c,d){try{if(!b[d]){b[d]="temp";var a=c.createElement("script");a.type="text/javascript";a.src="http://easyrotator.s3.amazonaws.com/1/js/nozip/easy_rotator.min.js";c.getElementsByTagName("head")[0].appendChild(a)}}catch(e){alert("EasyRotator fail; contact support.")}})(window,document,"er_$144");</script>
</div>
</div>
<!-- End DWUser_EasyRotator -->
<!-- InstanceEndEditable -->
<!-- footer -->
<div class="Footer" style="padding:0">
<table width="100%" border="1" cellpadding="0" cellspacing="0">
<tr>
<td width="273" align="center" valign="middle"><p><img src="images/MU_Advantage_sm.jpg" width="130" height="75" alt="Mizzou Advantage" /></p>
<p>Mizzou Advantage</p></td>
<td colspan="2" align="center" valign="middle" ><p><img src="images/Murraylogo3.jpg" alt="T/F logo" width="86" height="86" border="0" /> </p>
<p>Jonathan B. Murray <br />
Center for Documentary Journalism</p></td>
<td width="273" align="center" valign="middle"><p><img src="images/tf_logo_sm.jpg" alt="T/F logo" width="75" height="75" border="0" /> </p>
<p>True/False Film Fest</p></td>
</tr>
<tr>
<td height="40" colspan="2" align="center">Missouri Humanities Council</td>
<td height="40" colspan="2" align="center"><a href="http://grs.missouri.edu">Univ. of Missouri <br />
Department of German & Russian Studies</a></td>
</tr>
<tr>
<td height="40" colspan="2" align="center">Missouri School of Journalism</td>
<td height="40" colspan="2" align="center">Chancellor's Distinguished Visitors Program</td>
</tr>
<tr>
<td height="40" colspan="2" align="center">Donald W. Reynolds Journalism Institute</td>
<td height="40" colspan="2" align="center"><p>Department of Women's and Gender Studies</p></td>
</tr>
<tr>
<td height="40" colspan="4" align="center">Univ. of Missouri Film Studies Program</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="10">
<tr>
<td style="text-align:center">MU Conference Office © 2016, University of Missouri</td>
</tr>
</table>
</div>
<!-- end Footer -->
</div> <!-- end TextOnlyContainer -->
</body>
<!-- InstanceEnd --></html>


Seems to be a problem with the background going white when the link is visited
Try to get rid of the a:visited selector altogether, it is not needed
#nav a:link, a:visited {
...
}
To
#nav a {
...
}

Related

How do I replace a table with text in CSS?

So for an assignment of mine I have to use CSS Media Queries to display two webpages depending on the size of the window. I have that done, but for the mobile phone version, I have to replace the tables on the menu page with text, which describes the menu. How do I do this in CSS?
#media screen and (min-width: 37.5em) and (max-width: 64em){
header{
padding-top: 1em;
}
main{
padding-top: 0.1em;
padding-bottom: 0.1em;
padding-left: 1em;
padding-right: 1em;
font-size: 90%;
}
h1{
font-size: 1.5em;
}
nav li{
display: block;
margin: 0;
border-bottom: 1px solid #FFE4C4;
}
nav li::first-line{
border-top: 1px solid #FFE4C4
}
nav a{
display: block;
}
#wrapper img{
background-image: none;
height: 0;
}
table{
display: none;
}
#address{
color: #191970;
font-size: 92%;
font-family: Calibri;
background-image: none;
border-color: #FFE4C4;
border-radius: 2px;
border-style: none;
width: 200px;
margin-top: 50px;
}
table.Coffees:after{
content: "Our Coffees";
content: "Our coffees are well-known throughout the region as bold and flavorful. We offer many different types of coffees, one of which is sure to satisfy your taste. Prices start at $2.00 per cup."
}
table.Tea:after{
content: "Our Teas";
content: "Our teas are hand-selected from around the world to bring you a wide variety of possibilities. We specialize in flavorful afternoon teas as well as a wide assortmentof exotic teas. Stop in and try a cup! Prices start $2.00 per cup."
}
table.Snacks:after{
content: "Our Snacks";
content: "We offer a wide variety of foods ranging from simple snacks to complete inners. Our specialties are organic salads and fresh seafood. Try our fried clam strips and fish strips. The locals swear these are the bestq you'll find anywhere. Prices are seasonal, but always a real deal."
}
}
This is what I have for that part of my CSS file. I heard the content property was a way to do it, but I don't see anything.
Thank you in advance!
Upon request, here are the html files for the index page and the menu page respectively:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The Lighthouse Bistro</title>
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="stylesheet" href="bistro.css">
</head>
<body>
<div id="wrapper">
<header>
<h1>The Lighthouse Bistro</h1>
</header>
<nav>
<ul>
<li class="navlist">
Home
</li>
<li class="navlist">
Our Menu
</li>
<li class="navlist">
Entertainment Schedule
</li>
<li class="navlist">
Reservations
</li>
</ul>
<div id="address">
The Lighthouse Bistro
<br>
#27 Lighthouse Road
<br>
Mackinac City, Michigan 49701
<br>
<br>
888-555-5555
<br>
</div>
</nav>
<div role="main">
<img src="images/oldmackinaclight.jpg" alt="Old Mackinac Light" height="350" width="250">
<h3>Enjoy Fine Dining and Entertainment at Lighthouse Point</h3>
<p>The Lighthouse Bistro offers fine dining and entertainment a stones throw from the Old Mackinac Point Lighthouse on the
Straits of Mackinac. The lighthouse was built in 1892 as a sentinel for vessels entering the Straits of Mackinac. Open year
round. Yes, even in the winter! Stop in for a mug of one of our specialty coffees after your hike.</p>
<ul>
<li>Speciality coffees and teas</li>
<li>Bagels, Muffins, and Organic Snack</li>
<li>Clam Strips, Oysters, and Fresh Fish served daily</li>
<li>Music and Poetry Readings</li>
<li>Open Mic Night Every Friday starting at 8:00pm</li>
</ul>
</div>
<footer>
<br>
<em>Copyright © 2018 The Lighthouse Bistro</em>
<br>
<em>ourfirstname#yourlastname.com</em>
</footer>
</div>
</body>
</html>
Here is the menu:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The Lighthouse Bistro</title>
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="stylesheet" href="bistro.css">
</head>
<body>
<div id="wrapper">
<header>
<h1>The Lighthouse Bistro</h1>
</header>
<nav>
<ul>
<li class="navlist">
Home
</li>
<li class="navlist">
Our Menu
</li>
<li class="navlist">
Entertainment Schedule
</li>
<li class="navlist">
Reservations
</li>
</ul>
<div id="address">
The Lighthouse Bistro
<br>
#27 Lighthouse Road
<br>
Mackinac City, Michigan 49701
<br>
<br>
888-555-5555
<br>
</div>
</nav>
<div role="main">
<table class="Coffees">
<caption>Some of Our Coffees</caption>
<tr>
<th id="Coffee">Coffee</th>
<th id="Desc1">Description</th>
<th id="Price1">Price</th>
<th id="Image1">Image</th>
</tr>
<tr>
<td headers="Coffee" class="center">Just Java</td>
<td headers="Desc1">The regular house blend, decaffinated coffee, or the flavor of the day</td>
<td headers="Price1" class="center">Endless cup $2.00</td>
<td headers="Image1" class="center"><img src="images/coffee1.jpg" alt="coffee1" width="100" height="75"></td>
</tr>
<tr class="secrow">
<td headers="Coffee" class="center">Cafe au Lait</td>
<td headers="Desc1">House blended coffee infused into a smooth steamed milk.</td>
<td headers="Price1" class="center">Single $2.00, Double $3.00</td>
<td headers="Image1" class="center"><img src="images/coffee2.jpg" alt="coffee2" width="100" height="75"></td>
</tr>
<tr>
<td headers="Coffee" class="center">Iced Cappucino</td>
<td headers="Desc1">Sweetened espresso blended with icy-cold milk and served in a chilled glass</td>
<td headers="Price1" class="center">Single $4.75, Double $5.75, Wow! $7.75</td>
<td headers="Image1" class="center"><img src="images/coffee3.jpg" alt="coffee3" width="100" height="75"></td>
</tr>
<tr class="secrow">
<td headers="Coffee" class="center">Espresso</td>
<td headers="Desc1">Our house blend espresso - the best!</td>
<td headers="Price1" class="center">Single $5.00, Double $7.50</td>
<td headers="Image1" class="center"><img src="images/espresso1.png" alt="espresso" width="100" height="75"></td>
</tr>
</table class="Teas">
<br>
<table>
<caption>Some of Our Teas</caption>
<tr>
<th id="Tea" scope="col">Tea</th>
<th id="Desc2" scope="col">Description</th>
<th id="Price2" scope="col">Price</th>
<th id="Image2" scope="col">Image</th>
</tr>
<tr>
<td headers="Tea" class="center">Breakfast Teas</td>
<td headers="Desc2">Darjeeling, English Breakfast, Queen Anne, Green tea with lemon</td>
<td headers="Price2" class="center">Endless cup $2.00</td>
<td headers="Image2" class="center"><img src="images/tea1.jpg" alt="tea1" width="100" height="75"></td>
</tr>
<tr class="secrow">
<td headers="Tea" class="center">Afternoon Teas</td>
<td headers="Desc2">Lemon, Pure Peppermint, Earl Grey, China Oolong</td>
<td headers="Price2" class="center">Endless cup $3.00</td>
<td headers="Image2" class="center"><img src="images/tea2.jpg" alt="tea2" width="100" height="75"></td>
</tr>
<tr>
<td headers="Tea" class="center">Exotic Teas</td>
<td headers="Desc2">Orange & Cinnammon Spice, Camomile, Honey & Vanilla, Pomegranate & Raspberry</td>
<td headers="Price2" class="center">Single cup $3.50</td>
<td headers="Image2" class="center"><img src="images/tea3.jpg" alt="tea3" width="100" height="75"></td>
</tr>
</table>
<br>
<table class="Snacks">
<caption>Snacks</caption>
<tr>
<th id="Snack">Snack</th>
<th id="Desc3">Description</th>
<th id="Price3">Price</th>
<th id="Image3">Image</th>
</tr>
<tr>
<td headers="Snack" class="center">Bagels and Muffins</td>
<td headers="Desc3">Bagels, Plain muffins, Blueberry muffins, Chocolate muffins, and much more</td>
<td headers="Price3" class="center">Small $2.00, Large $3.00</td>
<td headers="Image3" class="center"><img src="images/muffin1.jpg" alt="muffin1" width="100" height="75"></td>
</tr>
<tr class="secrow">
<td headers="Snack" class="center">Organic Snacks</td>
<td headers="Desc3">Organic chips with sea salt, Organic salads</td>
<td headers="Price3" class="center">Prices vary</td>
<td headers="Image3" class="center"><img src="images/salad1.jpg" alt="muffin2" width="100" height="75"></td>
</tr>
<tr>
<td headers="Snack" class="center">Fresh Fish</td>
<td headers="Desc3">Clam strips, Fried Fish Strips, Fried Oysters, and many other seasonal selections</td>
<td headers="Price3" class="center">Prices vary by season $5.75-$15.75</td>
<td headers="Image3" class="center"><img src="images/clamstrips.png" alt="muffin3" width="100" height="75"></td>
</tr>
</table>
</div>
<br>
<footer>
<em>Copyright © 2018 The Lighthouse Bistro</em>
<br>
<em>yourfirstname#yourlastname.com</em>
</footer>
</div>
</body>
</html>

CSS/HTML - Footer will not stay at the bottom of the page

I have been searching all around for solutions as this is a common problem.
All the 'solutions' that has worked for others has not worked for me :(
This is the body of my index.html file:
<body>
<div id="header">
<table width="100%" height="auto" border="0">
<tr>
<td><h1 id="logo">WEBSITE</h1></td>
<td><div id="navigation">
<ul>
<li>HOME</li>
<li>FORUM</li>
<li>NEWS</li>
<li>INFORMATION</li>
<li>GALLERY</li>
<li>STAFF APPLICATIONS</li>
<li>CONTACT US</li>
</ul>
</div></td></tr></table>
</div>
<div id="announcement">
<center>
<p><marquee>Latest News: WEBSITE IS STILL UNDER MAINTENANCE!</marquee></p>
</center>
</div>
<div id="slider">
<center>
<h1>IMAGE SLIDER COMING SOON</h1>
</center>
</div>
<div id="featured">
<table width="100%" height="100%" border="0">
<center>
<tr>
<!-- Column 1 -->
<td align="center" valign="top"><div id="thumbnail">
<img src="images/logo.png" alt="" title="1" width="100px" height="100px" />
<h3>Our Community, Your Community</h3>
<p>When you join our community, you are part of our community. We like outsiders that join us, because it means that we are getting <b>BIGGER</b>, and bigger is better! We are growing, gaining more members, more customers and more jobs are available! If you have not already joined us, then join us now!</p>
Register
</div></td>
<!-- Column 2 -->
<td align="center" valign="top"><div id="thumbnail">
<img src="images/thumbnail-2.png" alt="" title="2" width="100px" height="100px" />
<h3>Virus & Spyware Free</h3>
<p>All the projects we create are checked by other members of the organisation to ensure your computer & security is not
at risk because of our products. We also release the source code of the projects that we have created so you can check yourself.</p>
</div></td>
<!-- Column 3 -->
<td align="center" valign="top"><div id="thumbnail">
<img src="images/thumbnail-1.png" alt="" title="3" width="100px" height="100px" />
<h3>Free Open-Source Projects</h3>
<p>We create projects for the public to use without paying a penny or entering any pesky surveys. The projects we create
are open-sourced which means the source code is available to the public to use however they want as long as they leave
credits in the project that they created! The projects we create can range between Websites, programs and on special
occasions, games.</p>
Read More
</div></td>
</center>
</div>
<div id="footer">
Test
</div>
</body>
This is the CSS for my footer:
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
background-color: red;
}
If anyone knows how i can fix this then please say,
Thanks in advanced
Unique

I have solved your problems. I spent some more hours for you and i get solution for set footer at bottom of page.
Live Working Demo
HTML Code:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="wrapper">
<div id="header">
<table width="100%" height="auto" border="0">
<tr>
<td><h1 id="logo">WEBSITE</h1></td>
<td><div id="navigation">
<ul>
<li>HOME</li>
<li>FORUM</li>
<li>NEWS</li>
<li>INFORMATION</li>
<li>GALLERY</li>
<li>STAFF APPLICATIONS</li>
<li>CONTACT US</li>
</ul>
</div></td></tr></table>
</div>
<div id="content">
<div id="announcement">
<center>
<p><marquee>Latest News: WEBSITE IS STILL UNDER MAINTENANCE!</marquee></p>
</center>
</div>
<div id="slider">
<center>
<h1>IMAGE SLIDER COMING SOON</h1>
</center>
</div>
<div id="featured">
<table width="100%" height="100%" border="0">
<center>
<tr>
<!-- Column 1 -->
<td align="center" valign="top"><div id="thumbnail">
<img src="images/logo.png" alt="" title="1" width="100px" height="100px" />
<h3>Our Community, Your Community</h3>
<p>When you join our community, you are part of our community. We like outsiders that join us, because it means that we are getting <b>BIGGER</b>, and bigger is better! We are growing, gaining more members, more customers and more jobs are available! If you have not already joined us, then join us now!</p>
Register
</div></td>
<!-- Column 2 -->
<td align="center" valign="top"><div id="thumbnail">
<img src="images/thumbnail-2.png" alt="" title="2" width="100px" height="100px" />
<h3>Virus & Spyware Free</h3>
<p>All the projects we create are checked by other members of the organisation to ensure your computer & security is not
at risk because of our products. We also release the source code of the projects that we have created so you can check yourself.</p>
</div></td>
<!-- Column 3 -->
<td align="center" valign="top"><div id="thumbnail">
<img src="images/thumbnail-1.png" alt="" title="3" width="100px" height="100px" />
<h3>Free Open-Source Projects</h3>
<p>We create projects for the public to use without paying a penny or entering any pesky surveys. The projects we create
are open-sourced which means the source code is available to the public to use however they want as long as they leave
credits in the project that they created! The projects we create can range between Websites, programs and on special
occasions, games.</p>
Read More
</div></td>
</center>
</div>
</div>
<div id="footer">
This is footer Section
</div>
</div>
</body>
</html>
CSS Code:
html,
body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height:100%;
position:relative;
}
#header {
padding:10px;
background:white;
}
#content {
padding:10px;
padding-bottom:80px; /* Height of the footer element */
}
#footer {
width:100%;
height:80px;
position:absolute;
bottom:0;
left:0;
background:red;
color:white;
}
Result:

I am not sure what you are looking to do. Are you looking for the footer to be permentaly immovable at the bottom of the page, so that when the rest of the page scrolls it doesn't? Or are you looking to keep the footer under the table, and it scrolls with the rest of the site?
If you are looking for the former, you need to change "relative" to "absolute" and make sure your left, right and bottom margins are set to 0.
If you just want the footer to stay under the table, the rest of the code is needed to see how it's interacting with the other elements and their css styles.

To know about positioning visit http://www.w3schools.com/css/css_positioning.asp
I ran your code and the relative positioning is working fine on my chrome browser. Please set the position of the elements of your body of the page so that its relative.
1.Change your css code as
#footer {
clear: both;
z-index: 10;
height: 3em;
margin-top: -3em;
background-color: red;
position:relative; //or any of the other positions as per your page
}
2.One more thing you can do as i did is to set your footer styles as an inline styling like so
<div style="clear:both;z-index:10; height:3em; margin-top:-3em; background-color:red; position:relative;">
Test
</div>
3.If inline styling doesnt work go for internal style set the styles for the footer in a style tag embedded in the head tag
4.You need to keep your div tag outside the main div tag. keep it as a separate element rather than being a child of another element. I have faced similar problems while working with my projects and changing the tag position and the structure of the body helps. You just need to have patience and keep on trying different methods.

you not close your tag
see Demo after add
<html>
<head>
<style>
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
background-color: red;
}
</style>
</head>
<body>
<div id="header">
<table width="100%" height="auto" border="0">
<tr>
<td><h1 id="logo">WEBSITE</h1></td>
<td><div id="navigation">
<ul>
<li>HOME</li>
<li>FORUM</li>
<li>NEWS</li>
<li>INFORMATION</li>
<li>GALLERY</li>
<li>STAFF APPLICATIONS</li>
<li>CONTACT US</li>
</ul>
</div></td></tr></table>
</div>
<div id="announcement">
<center>
<p><marquee>Latest News: WEBSITE IS STILL UNDER MAINTENANCE!</marquee></p>
</center>
</div>
<div id="slider">
<center>
<h1>IMAGE SLIDER COMING SOON</h1>
</center>
</div>
<div id="featured">
<table width="100%" height="100%" border="0">
<center>
<tr>
<!-- Column 1 -->
<td align="center" valign="top"><div id="thumbnail">
<img src="images/logo.png" alt="" title="1" width="100px" height="100px" />
<h3>Our Community, Your Community</h3>
<p>When you join our community, you are part of our community. We like outsiders that join us, because it means that we are getting <b>BIGGER</b>, and bigger is better! We are growing, gaining more members, more customers and more jobs are available! If you have not already joined us, then join us now!</p>
Register
</div></td>
<!-- Column 2 -->
<td align="center" valign="top"><div id="thumbnail">
<img src="images/thumbnail-2.png" alt="" title="2" width="100px" height="100px" />
<h3>Virus & Spyware Free</h3>
<p>All the projects we create are checked by other members of the organisation to ensure your computer & security is not
at risk because of our products. We also release the source code of the projects that we have created so you can check yourself.</p>
</div></td>
<!-- Column 3 -->
<td align="center" valign="top"><div id="thumbnail">
<img src="images/thumbnail-1.png" alt="" title="3" width="100px" height="100px" />
<h3>Free Open-Source Projects</h3>
<p>We create projects for the public to use without paying a penny or entering any pesky surveys. The projects we create
are open-sourced which means the source code is available to the public to use however they want as long as they leave
credits in the project that they created! The projects we create can range between Websites, programs and on special
occasions, games.</p>
Read More
</div></td>
</center>
</table>
</div>
<div id="footer">
Test
</div>
</body>
</html>

IE is not seeing body tag. works fine in chrome

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>USLI Intranet</title>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<link href="Style_sheets/front_menu_new.css" rel="stylesheet" type="text/css">
<script src="slider_omg/js/swfobject_modified.js" type="text/javascript"></script>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Tabbed jQuery slideshow</title>
<link rel="stylesheet" href="slider_omg/css/slideshow.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="slider_omg/js/jquery.cycle.js"></script>
<script type="text/javascript" src="slider_omg/js/slideshow.js"></script>
<link href="benefitsnew/main.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
.style1 {font-family: Arial, Helvetica, sans-serif}
.style2 {font-size: 12px}
.style5 {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #999999;
}
.style6 {color: #999999}
a {
font-family: Arial, Helvetica, sans-serif;
/*font-size: 12px;*/
color: #003698;
}
a:visited {
color: #003698;
}
a:hover {
color: #E06B00;
}
.active{
background-color: #004499;
}
#leftThird{
float:left;
width:570px;
}
#rightThird{
float:right;
width:131px;
position:relative;
text-align:left;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<div class="left" ><img src="Pics/LOGO-AND-TAGLINE.gif" border = "0"/></div>
<div class="right">
<p> 1190 Devon Park Drive • Wayne, PA 19087<br />
888-523-5545 </p>
<form class="zoom_searchform" action="http://intranet.usli.com/Search2/search.asp" method="get">
<input type="text" maxlength="255" class="zoom_searchbox" size="18" name="zoom_query" value="Search our Site" onBlur="if (this.value == '') {this.value = 'Search Our Site';}"onFocus="this.value='';" />
<input type="submit" class="button" name="search" value="Find" />
</form>
</div>
</div>
<div id="menu">
<ul id="oldtopmenu">
<li><a href="../5CommunityGoals/5CommunityGoals.htm">Five Community<br />
Goals</a></li>
<li><a href="../UnderwritingTools/UnderwritingTools.htm">Underwriting<br />
Tools</a></li>
<li><a href="../PersonalDevelopment/pdc2.htm">Personal<br />
Development Team</a></li>
<li><a href="../Company Story/CompanyStory.htm">Company<br />
Story</a></li>
<li><a href="../LeadershipwithHeart/LeadershipwithHeart.htm">Leadership<br />
with Heart</a></li>
<li><a href="../BusinessCodeEthics/BusinessCodeEthics.htm">Business Code<br />
& Ethics</a></li>
<li><a href="../BranchOffices/Branch-Offices.html">Branch<br />
Offices</a></li>
<li ><a href="../CommunityTeams/CommunityTeams_landing_page.html">Community<br />
Teams</a></li>
<li><a href="../Forms/ServiceRequestForms.htm" style="padding:5px 16px;">Service<br />
Request Forms</a></li>
</ul>
<ul id="oldbotmenu">
<li><a class=" active " href="../index.htm">Home</a></li>
<li>Public Website</li>
<li class="double-line "><a href="../EmergencyResponse/EmergencyResponse.htm">Emergency Response /<br />
Staffing Plan</a></li>
<li class="double-line"><a href="../CareerOpportunities/CareerOpportunities.htm">Career<br />
Opportunities</a></li>
<li class="double-line"><a href="../PhoneList.htm">Community Mtg.<br />
Presentation</a></li>
<li class="double-line"><a href="../StaffLocator/StaffLocator_Pictures.htm">Phone List /<br />
People Search</a></li>
<li>Remembrance</li>
<li>Resources</li>
</ul>
</div>
<div id="content">
<div id="leftThird" >
<!--ZOOMSEARCH-->
<!--<div class="webexlink">
<p style="background-image: url(./Pics/frontpage/uslipinkbanner.jpg); width:445px; height:99px; padding-left: 75px; padding-top:10px; font-family:Arial, Helvetica, sans-serif; font-size:17px; font-weight:bold; color: #FFFFFF; margin-left:0px;">Support Breast Cancer Awareness. Learn More >></p></div>-->
<p>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="505" height="290" id="FlashID" title="USLI slideshow">
<param name="movie" value="ImageRotator.swf">
<param name="quality" value="high">
<param name="wmode" value="opaque">
<param name="swfversion" value="8.0.35.0">
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
<param name="expressinstall" value="../Scripts/expressInstall.swf">
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="ImageRotator.swf" width="505" height="290">
<!--<![endif]-->
<param name="quality" value="high">
<param name="wmode" value="opaque">
<param name="swfversion" value="8.0.35.0">
<param name="expressinstall" value="../Scripts/expressInstall.swf">
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
<br>
</p>
<p><a href="http://www.usli.com/community"><img src="Pics/frontpage/communityportal.jpg" alt="" name="" width="520" height="115" usemap="#Map" border="0">
<map name="Map">
<area shape="rect" coords="266,2,519,112" href="http://www.usli.com/community" target="_blank">
<area shape="rect" coords="5,2,258,112" href="http://www.usli.com/community/docs/CourseCatalogforFamilies_2014.pdf" target="_blank">
</map>
</a> </p>
<div class="pdc">Community Updates</div>
<div id="slideshow">
<div class="slides">
<ul>
<li id="slide-one">
<h2 id="headline_new">Bring Your Benefits Home!<img src="slider_omg/images/slide_image_benefits.png" width="200" height="163" border="0" class="new_slider_image"><br>
</h2>
<p class="inside_text">Did you know you can access your benefit information and much more from home? Visit www.usli.com/community >><br>
<br>
You can also sign up for any of the classes in the "Benefit Workshop Series" to learn<br>
more about what is available to you through our benefits. <br>
<br>
<br>
</p>
</li>
<li id="slide-two">
<h2 id="headline_new">Security Awareness<img src="slider_omg/images/slide_image_facilities.png" width="200" height="162" border="0" class="new_slider_image"><br>
</h2>
<p class="inside_text"><span class="intranet_font">Remember that we can make a difference when it comes to keeping USLI safe. Follow these guidelines to ensure your safety.<br>
<br>
View the "Surviving a Shooting" video as well to learn about three things you can do to make a difference. </span><br>
</p>
</li>
<li id="slide-three">
<h2 id="headline_new">Snap to It!<img src="slider_omg/images/slide_image_graphics.png" width="193" height="162" border="0" class="new_slider_image"><br>
</h2>
<p class="body_font"> If you’ve been meaning to hit the refresh button on your intranet photo or even better, take a more professional photo to improve your LinkedIn account, you’re in luck! Join us monthly for a quick private session. Register >><br>
</p>
<p><br>
</p>
</li>
<li id="slide-four">
<h2 id="headline_new"><strong>People's College for your<img src="slider_omg/images/slide_image_pdc.png" width="200" height="164" border="0" class="new_slider_image"><br>
family! </strong></h2>
<p> <span class="body_font">Our classes are open to family members!<br>
Tell your family members to register here >><br>
<br>
May course schedule is here! >></span><br />
</p>
</li>
<li id="slide-five">
<h2 id="headline_new">It's May in Slainte!<img src="slider_omg/images/slide_image_slainte.png" width="210" height="162" border="0"class="new_slider_image"><br>
</h2>
<p><span class="body_font"><strong>Check out the May calendar!</strong><br>
Did you know you can get $150 back through the Healthy Lifestyles reimbursement? Learn more about this opportunity!</span><br>
<br>
<br>
<br>
<br />
</p>
</li>
<li id="slide-six">
<h2 class="inside_text" id="headline_new"><strong>Join the USLI Helping Hands<strong><strong><img src="slider_omg/images/slide_image_spirit.png" width="193" height="162" border="0" class="new_slider_image"></strong></strong><br>
Committee<br>
</strong></h2>
<p> <span class="body_font">Our community stands behind those in need and lends a helping hand in many ways. <br>
<strong>Find Out More >></strong></span><br>
<br>
<a href="PersonalDevelopment/CommunitySpirit/PaintingLaSalleAcademy/index.html" target="_blank"><br>
</a><br>
<br>
</p>
<br>
<br />
</li>
<!-- <li id="slide-seven">
<h2 id="headline_new">Customer Conferences: Help<br>
Needed for 2014<img src="slider_omg/images/slide_image_corporateevents.png" width="198" height="162" border="0"class="new_slider_image"><br>
</h2>
<p> <span class="body_font">If you would be interested in greeting customers the morning of the conference or being a driver (picking up/dropping off at Applebrook, the airport, train station, etc.) for 2014, please contact Caitlyn (x2432) or Laurel (x2188). Read our blog. >></span> <br />
</p>
</li>-->
</ul>
</div>
<ul class="slides-nav">
<li class="on"><a href="#slide-one">Benefits<br>
<br>
</a></li>
<li><a href="#slide-two">Facilities<br>
<br>
</a></li>
<li> <a href="#slide-three">Graphics &<br>
Social Media</a> </li>
<li><a href="#slide-four">People's<br>
College <br>
</a></li>
<li><a href="#slide-five">Slainte<br>
<br>
</a></li>
<li><a href="#slide-six">CommunitySpirit / <br>
Reception <br>
</a></li>
<!-- <li>
<a href="#slide-seven">Corporate<br>
Events</a></li>-->
</ul>
</div>
</div>
<div id = "rightThird">
<div class="japan"><a href="http://intranet.usli.com:2012/StaffLocator/"> People<br>
Locator </a> </div>
<div class="rollover"><a href="https://www.google.com/calendar/embed?src=uslievents#gmail.com&ctz=America/New_York" target="_blank">USLI Events<br>
Calendar</a> </div>
<div class="menu"> <a href="Dearcadh.htm">Today's Cafe<br>
Selection </a> </div>
<div class="id"> <a href="http://intranet.usli.com/HelpDesk">Service <br>
Request<br>
</a> </div>
<div class="meeting"> <a href="http://intranet.usli.com/Scheduler/SchedulerHome.aspx">Class<br>
Registration</a> </div>
<div class="healthwellness"></div>
<!--<div class="nothingbutnets">
</div>-->
<!-- <div class="corpevents"></div>-->
<div class="oped"> <a href="http://successfulstudents.usli.com/" target="_blank" class="oped">Successful<br>
Student Blog</a></div>
<div class="news"> <a href="http://newsletter.usli.com" target="_blank">Customer<br>
Newsletter</a> </div>
<div class="spanishword"> <a href="PDFs/Spanishwordoftheweek.pdf" target="_blank">Spanish Word <br>
of the Week</a> </div>
<div class="care2wear"> <a href="CARE2/Care2WearGearEntrance.html" target="_blank">CARE2WEAR<br>
GEAR </a> </div>
<div class="julia"> Slainte Fitness Schedule </div>
</div>
</div>
</div>
<table width="750" border="0">
<tr>
<td height="93"> </td>
</tr>
</table>
<div id="Layer7" ></div>
<div id="Layer8" ></div>
<script type="text/javascript">
<!--
swfobject.registerObject("FlashID");
//-->
</script>
<br>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-8410742-9");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>
This is the html for my webpage and it works fine in chrome. However in IE it does not show anything at all. Below is the html code that IE spits out in it's developer tools.
<!-- saved from url=(0044)file://\\intranetdev1\intranet\indexNew.html -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!-- Generated by F12 developer tools. This might not be an accurate representation of the original source file -->
<HTML><HEAD><TITLE>USLI Intranet</TITLE>
<META content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
<SCRIPT type=text/javascript src="Scripts/swfobject_modified.js"></SCRIPT>
<LINK rel=stylesheet type=text/css href="Style_sheets/front_menu_new.css">
<SCRIPT type=text/javascript src="slider_omg/js/swfobject_modified.js"></SCRIPT>
<SCRIPT id=__ie_ondomload defer src="//:"></SCRIPT>
<LINK rel=stylesheet type=text/css href="slider_omg/css/slideshow.css" media=screen>
<SCRIPT type=text/javascript src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></SCRIPT>
<SCRIPT type=text/javascript src="slider_omg/js/jquery.cycle.js"></SCRIPT>
<SCRIPT type=text/javascript src="slider_omg/js/slideshow.js"></SCRIPT>
<LINK rel=stylesheet type=text/css href="benefitsnew/main.css">
<STYLE type=text/css>.style1 {
FONT-FAMILY: Arial, Helvetica, sans-serif
}
.style2 {
FONT-SIZE: 12px
}
.style5 {
FONT-SIZE: 10px; FONT-FAMILY: Arial, Helvetica, sans-serif; COLOR: #999999
}
.style6 {
COLOR: #999999
}
A {
FONT-FAMILY: Arial, Helvetica, sans-serif; COLOR: #003698
}
A:visited {
COLOR: #003698
}
A:hover {
COLOR: #e06b00
}
.active {
BACKGROUND-COLOR: #004499
}
#leftThird {
FLOAT: left; WIDTH: 570px
}
#rightThird {
POSITION: relative; FLOAT: right; TEXT-ALIGN: left; WIDTH: 131px
}
UNKNOWN {
}
UNKNOWN {
}
UNKNOWN {
}
</STYLE>
</HEAD>
<BODY class=js></BODY></HTML>
I am not sure why it automatically closes the body tag without the rest of the content. I also do not know where the class="js" is coming from. I have made sure that div tags are all lined up and shouldn't be causing the problem. I believe all tags having closing tags. I can provide links to all source files if needed. Just wondering if anybody has come across this themselves.
Thanks!

Upon further review of what IE is doing to your document, I'm confident that this is in fact the answer.
You have the massively outdated practice of "commenting out" your stylesheet so that older browsers ignore it. But really, no browser needs that any more.
But the point is, you're starting an HTML comment, but you forgot to end it. This is effectively commenting out your entire document. Chrome is being "clever" and fixing the issue for you, but Internet Explorer is being pedantic and correct by refusing the rest of the content.
I would suggest just removing the <!-- from your <style> element. As I said, it's not needed.

For future reference, this is a simple way, to find what's going on with your html, when something like this happens.
Go to http://validator.w3.org and select validate by URI, file upload or direct input. Click check!
Now, you should find the errors and a small description explaining what's going on!
In this particular case you've got at least 22 Errors and 25 warning(s).
But the main reason why you're not able to see BODY is because you left
<!-- on line 21 just after the style declaration
and never closed it.`

why does my table show up in one cell

My table keeps show up in one cell, not sure what i did wrong. anyone willing to look and let me know where i went wrong.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="main.css">
<title>Ironton Fire department Sponsors</title>
</head>
<body>
<div style="width:1020px; height:1020px; float:center; background- image:url(images/zombie_5k_TM_AP_stripped.png)">
<div class="home">
<img src='images/home_button.jpg' name="register" onMouseOver="this.src='images/home_button_hover.jpg'" onMouseOut="this.src='images/home_button.jpg'" onclick="location.href='index.html'"/>
</div>
<div class="register">
<img src='images/register_button.jpg' name="register" onMouseOver="this.src='images/register_button_hover.jpg'" onMouseOut="this.src='images/register_button.jpg'" onclick="location.href='register.html'"/>
</div>
<div class="sponsor">
<img src='images/sponsor_button.jpg' name="sponsor" onMouseOver="this.src='images/sponsor_button_hover.jpg'" onMouseOut="this.src='images/sponsor_button.jpg'" onclick="location.href='sponsors.html'"/>
</div>
<div class="gallery">
<img src='images/gallery_button.jpg' name="gallery" onMouseOver="this.src='images/gallery_button_hover.jpg'" onMouseOut="this.src='images/gallery_button.jpg'" onclick="location.href='gallery.html'" />
</div>
<div class="sponsors">
<table>
<tr>
<td align="center" width="250">Seth Jackson - Edward Jones</td>
<td align="center" width="250">Heritage Mechanical </td>
</tr>
<tr>
<td align="center" width="250">Mike Flanagan – Iron Range Auto </td>
<td align="center" width="250"> </td>
</tr>
</table>
</div>
<div class="sform">
< p align="center">
<a style="color: #D91D1F;"href="Images/ZX5K Sponsorship Agreement.pdf" target="_blank">ZX5K Sponsorship Agreement</a></p></div></div>
</body>
</html>
here is the css that covers the class .sponsors
.sponsors {
position: absolute;
top: 280px;
left: 340px;
}
here is the link to see what i am talking about, http://www.ifdauxzx5k.com/sponsors.html

Your table doesn't show up in one cell.
But all the cells are on top of eachother, because you have position: absolute; on your TD in your main.css line 62.
td{
color: #D91D1F;
position: absolute;
}
This is why every TD is going to the left top position of the table. Remove this line and it will behave correctly.

My code doesn't work in Chrome or Safari

I have been working on creating a website for a family company. It is mostly created, however I cannot get it to work in Chrome or Safari. Specifically, the links to go from page to page do not work. When clicking on the tabs on the left side, or the logo at the top, you should be directed to a different page. This works perfectly on IE. However, they do not work at all in the other 2. I have looked and looked and can't find a reason why. If anybody could help, it would be greatly appreciated.
I realize that the tabs are not uniform in Chrome or Safari as they are in IE. That is just not as important an issue to fix at the moment.
Here is the HTML for one of the pages so you can see what I have done and where I have messed up.
<!DOCTYPE html>
<html>
<head>
<title>
BERK Consulting LLC
</title>
<style type="text/css">
a:link {color:white; }
a:visited{color:white; }
a:hover {color:white; }
body {background-color:#F2E8DE}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id="Main" style="padding-left:150px; position: absolute; width: 800px;">
<p style="font-size: 18pt; text-align: justify; padding-top: 200px; padding-left: 200px;">
BERK was founded on the desire to remove the bureaucracy, complexity, and hidden agendas from consultancy. When you deal with BERK, you’re dealing directly with the expertise, not a salesperson or a subcontracting agency. <br /> <br />
Our down-to-earth approach combined with extensive 'in the seat' supply chain expertise allows us to advise you on key supply chain evolution decisions, allowing you to maintain focus on managing your business. <br /> <br />
We have eliminated the green beans from our team so that we can establish sustainability in your team and at an affordable rate.
</p>
<p style="text-align: right; font-size: 20pt;"> <strong>
...Securing the Last Piece® <br />
<img src="http://berkllc.com/images/LinkedIn2.png" alt="Follow Us" style="float:right;" width="150px" />
</strong> </p>
</div>
<div id="Tabs" style="background-color:#502800; text-align:right; width:280px; padding-bottom:400px; padding-top:50px; padding-left:20px;">
<img src="http://berkllc.com/images/BERKPic1.jpg" alt="BERK" />
<p style="font-size:11pt; padding-top:50px; ">
<span style="font-family:'Copperplate Gothic Bold'; ">
Home <br /> <br />
Who We Are <br /> <br />
What We Do <br /> <br />
Who We've Helped <br /> <br />
Our Network <br /> <br />
What Are You Missing <br /> <br />
Contact Us <br />
</p>
</span>
</div>
<div id="blank" style="width:100%; padding-top:1px;">
</div>
<div id="Legal1" style="background-color:#1F497D; position: absolute; padding-top:125px; width:994px; text-align:center;">
<table id="Legal2" border="0" style="border-collapse:collapse; font-size:8pt; color:white; margin-left: auto; margin-right: auto;" cellpadding="10px">
<tr>
<th style="cursor: pointer;" onclick="location.href='index.html'">
Home
</th>
<th style="cursor: pointer;" onclick="location.href='BERKContactUs.html'">
Contact Us
</th>
<th style="cursor: pointer;" onclick="location.href='BERKDisclaimers.html'">
Legal Disclaimers
</th>
<th style="cursor: pointer;" onclick="location.href='BERKTrademark.html'">
Trademark/Privacy
</th>
<th style="cursor: pointer;" onclick="location.href='BERKSitemap.html'">
Site Map
</th>
</tr>
</table>
<p style="text-align:center; font-size:6pt; color:white;">
© 2009 BERK Consulting, LLC. All Rights Reserved.
</p>
</div>
</body>
</html>

This is sloppy but add
z-index: 900;position: relative;
to the style for:
<div id="Tabs" style="background-color:#502800; text-align:right; width:280px; padding-bottom:400px; padding-top:50px; padding-left:20px;z-index: 900;position: relative;">
and add
z-index: 1;
to the styles for
<div id="Main" style="padding-left:150px; position: absolute; width: 800px;z-index: 1;">
On an unrelated note I would recommend giving this site or this site a visit if you want to learn good practices and style for html/css/javascript.

The problem is that your "Main" div is covering up the links. And just as I start typing this, I'm called away. In any case, do not trust IE to do this right. Trust Chrome first.