CSS - Css Layout Problem - Links Not Working

When my cursor passes over the links on the top of my page (not clicking a link, just passing the cursor over the link), the title jumps from its position directly under the links to a position to the right of the links.

Since you are giving me help, I want to make this as easy for you as I can. I have posted a screen shot of exactly how my header looks before and after passing the cursor over the links.

www.middle-age-guy.com/forum-css-help_images.html


Here is the relevant css. I've separated and labeled the css so that you can see how it flows down the page.

___________________________________________

#header {
width: 998px;
margin: 0 auto;
}

#header .container {
background:url(images/head_pat.jpg) left top repeat-x;
height: 200px;
}

/* -- links along the top of the page (Home,

MAGman Lifestyles, etc. --*/

.topline {
}

ul.menu li.page_item {
float: left;
display: inline;
font-size:12px;
margin-top: 25px;
}


ul.menu li.page_item a {
color:#000!important;
text-decoration: none;
padding:25px 0 0px 0px;
margin-right: 15px;
list-style-type: none;
}

ul.menu li.page_item a:hover {
color: #fff!important;
text-decoration:none;
background:url(images/menu_hover.gif) left repeat-x;
}


ul.menu li.current_page_item a {
color: #fff!important;
text-decoration:none;
background:url(images/menu_hover.gif) left repeat-x;
}

/* -------------------- Image on right side of header ---------*/

#magmanheadshot {
padding:0;
margin:25px 50px 20px 0;
float:right;
width:160px;
color:#003e4f;
}

/*--------------- Title - Middle-Age-Guy.com --------------*/

#headline {
width:450px;
margin-top: 20px;
}


#headline h1 {
display: block;
clear:left;
font-size:30px;
margin-left: 20px ;
margin-bottom: 5px;
color:#FFFFFF;
font-weight:normal;
}


/* ------------- Tagline below the title --------------*/
.desc_l {
background:url(images/desc_l.gif);
width:10px;
height:27px;
float:left;
margin-left: 25px;

}


.desc {
background:url(images/desc_pat.gif);
height:27px;
float:left;
font-size:14px;
line-height:25px;
font-weight:normal;
color:#FFFFFF;
}



.desc_r {
background:url(images/desc_r.gif);
width:10px;
height:27px;
float:left;
}



.magmandatingsystem {
margin: 10px 0 0 0;
font-size: 12px;
padding: 0 0 0 23px;
float: left;
width: 400px;
}

/* --------------------- Membership login link -----*/

.login {
font-size: 18px;
color:#FFFFFF;
text-decoration: none;
float: right;
margin-top: -80px;
margin-right: 50px;
list-style-type: none;
}

.login a {
color:#FFFFFF!important;
text-decoration: none;
}

.login a:hover {
color:#FF0000!important;
text-decoration:none;

}

.join {
font-styleblique;
font-size: 9px;
font-weight: bold;
}

.join a {
text-decoration:underline !important;
color:#ff0000!important;
}

.join a:hover {
color:#0099FF!important;
}

/* ------------ End of Header -*/

_______________________________________

Here is the relevant html from header.php

<div id="header">

<div class="container">

<div class="topline">

<ul class="menu">
<li class="page_item"> <a href="(URL address blocked: See forum rules)">Home</a></li>

<li class="page_item">
<a href="(URL address blocked: See forum rules)/?page_id=89"
title="General information foundational to success in all other areas">MAGman Lifestyle</a>
</li>

<li class="page_item">
<a href="(URL address blocked: See forum rules)/?page_id=89"
title="One of the three Pillars of any man's life - his relationships with others">Women & Relationships</a>
</li>

<li class="page_item">
<a href="(URL address blocked: See forum rules)/?page_id=89"
title="The Pillar of a sound body is a middle age guy's call to reality">Health & Fitness</a>
</li>

<li class="page_item">
<a href="(URL address blocked: See forum rules)/?page_id=89"
title="A man's third Pillar is his ability to do battle in the business world.">Business & Wealth</a>
</li>

<li class="page_item">
<a href="(URL address blocked: See forum rules)/magman-blog"
title="MAGman's Blog">Blog</a>
</li>

<li class="page_item">
<a href="<?php if($db_feedburner_address) { echo $db_feedburner_address; } else { bloginfo('rss2_url'); }?>">Subscribe to RSS</a>
</li>


</ul>
</div> <!-- end #topline -->



<div id="magmanheadshot">
<img src="/wp-content/themes/blog-design-studio-newblue/images/mag_man4-Head-shot.gif" />
</div>


<div id="headline">


<h1><?php bloginfo(''); ?></h1>

<div>

<div class="desc_l"></div>
<div class="desc">The #1 Personal Development Website for Middle Age Guys</div>
<div class="desc_r"></div>


<div class="magmandatingsystem"><a href="(URL address blocked: See forum rules)/?page_id=176">Read more</a> about the <a href="(URL address blocked: See forum rules)/?page_id=176"><span style="color:#FF0000!important">MAGman Dating System</span></a> for Middle Age Guys</div>


<!-- end #headline -->

<div class="login"><a href="(URL address blocked: See forum rules)/?page_id=89">Members' Login</a>

<p class="join"><a href="(URL address blocked: See forum rules)">Click here</a> to become a member.</p>
</div>

</div> <!-- end .container -->

</div> <!-- end .header -->
______________________________________________

Finally, this is the source code

________________________________________________

<div id="header">

<div class="container">

<div class="topline">

<ul class="menu">
<li class="page_item"> <a href="(URL address blocked: See forum rules)">Home</a></li>

<li class="page_item">
<a href="(URL address blocked: See forum rules)/?page_id=89"
title="General information foundational to success in all other areas">MAGman Lifestyle</a>
</li>

<li class="page_item">
<a href="(URL address blocked: See forum rules)/?page_id=89"
title="One of the three Pillars of any man's life - his relationships with others">Women & Relationships</a>
</li>

<li class="page_item">
<a href="(URL address blocked: See forum rules)/?page_id=89"
title="The Pillar of a sound body is a middle age guy's call to reality">Health & Fitness</a>
</li>

<li class="page_item">
<a href="(URL address blocked: See forum rules)/?page_id=89"
title="A man's third Pillar is his ability to do battle in the business world.">Business & Wealth</a>
</li>

<li class="page_item">
<a href="(URL address blocked: See forum rules)/magman-blog"
title="MAGman's Blog">Blog</a>
</li>

<li class="page_item">
<a href="(URL address blocked: See forum rules)/feed/">Subscribe to RSS</a>
</li>


</ul>
</div> <!-- end #topline -->



<div id="magmanheadshot">
<img src="/wp-content/themes/blog-design-studio-newblue/images/mag_man4-Head-shot.gif" />
</div>


<div id="headline">


<h1>Middle-Age-Guy.com</h1>

</div>

<div class="desc_l"></div>
<div class="desc">The #1 Personal Development Website for Middle Age Guys</div>
<div class="desc_r"></div>


<div class="magmandatingsystem"><a href="(URL address blocked: See forum rules)/?page_id=176">Read more</a> about the <a href="(URL address blocked: See forum rules)/?page_id=176"><span style="color:#FF0000!important">MAGman Dating System</span></a> for Middle Age Guys</div>


<!-- end #headline -->

<div class="login"><a href="(URL address blocked: See forum rules)/?page_id=89">Members' Login</a>

<p class="join"><a href="(URL address blocked: See forum rules)">Click here</a> to become a member.</p>
</div>

</div> <!-- end .container -->

</div> <!-- end .header -->


Thanks for any help you can bring.

Scott

I am really racking my brain here

I know this will end up being a simple fix but after creating this for a few hours straight, I just can't see it.

Ok here's the page and the situation...

myspace[dot]com[slash]daggersanddiamonds


My links at the top of my page are sliced fine and the links do work (in explorer) but somehow in Firefox, they are being hidden by some invisible layer that extends about 800ish pixels in width that hides the clickability.

As you can see, the first half portion of "Add to Friends" works but the rest is disabled, and part of the "Vimeo" link works, but not totally.. and ofcourse the middle links are totally dead to click.

My question is, whats hiding these links?

Any help is super thanked!

I am having a problem with li links on the Mac. The whole site works perfectly on the PC. I have tried all kinds of alterations such as changing /addin z-indexs, but nothing seems to work.

Can anybody help me?

The site can be found he www.pamstellema.com.au

Thanks in advance

I reconfigured my css for my work website that i have been working on. But now for some reason my links in my .left h1 wont hover to click sometimes and will some other times. it's getting a bit confusing. I dont know if there is something to do with the code.

also my website is www24.brinkster.com/mattphat/ymca3.html

Code:

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "(URL address blocked: See forum rules)">
<HEAD>
<TITLE>Northwest Connecticut YMCA | We build strong kids, strong families, strong communities.</TITLE>
</HEAD>
<style type="text/css">  
* {
	margin: 0;
	padding: 0;
}

body {
background: #66A7C5;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 17px;
color: #333;
margin:10px 100px 10px 100px; 

}

a {
text-decoration: none;
color: #004990;
}
a:hover {
text-decoration: underline;
color: #111;
}

#wrap {
margin: 0 auto;
width: 780px;
background: #F0ECEB;
border-top: 7px solid #A3D6F5; 
border-bottom: 7px solid #A3D6F5;
border-left: 7px solid #A3D6F5;
border-right: 7px solid #A3D6F5;
}
#header {
height: 309px;
padding: 2px;
}
#header h1 { 
font-size: 12px;
letter-spacing: 0px;
padding: 0px 0 0 0;
color: #6C7476;
}
#header h1 a { 
color: #aaa;
text-decoration: none;
font-weight: 100;
letter-spacing: -2px;
}
#header h1 a:hover {
color: #111;
}
#header h2 {
font-size: 19px;
color: #111;
padding: 5px 0 0 20px;
letter-spacing: -1px;
font-weight: 100;
}

#menu {
height:70px;
line-height: 30px;
border-top: 7px solid #EE3233;
border-bottom: 7px solid #EE3233;
background: #F0ECEB;
padding: 8px;

}
#menu ul {
list-style-type: none;
padding-left: 20px;
}
#menu ul li {
display: block;
float: left;
}
#menu ul li a {
padding: 0 20px 0 0;
text-decoration: none;
font-weight: 100;
font-size: 14px;
color: #004990;
}
#menu ul li a:hover {
color: #004990;
text-decoration: none;
font-weight: 600;
}

#content {
padding: 0 20px 20px 20px;
}

.right {
float: right;
width: 520px;
text-align: justify;
}
.right h2 {
font-size: 12px;
font-weight: 100;
padding: 15px 0 7px 0;
}
.right h2 a {
text-decoration: none;
color: #004990;
}
.right h2 a:hover {
color: #111;
}

.left {
float: left;
width: 200px;
margin-top: 10px;
background: #6C7476;
}
.left h2 {
margin: 10px 0 0 0;
padding-left: 10px;
height: 28px;
line-height: 28px;
color: #fff;
font-size: 13px;
background: #EE3233;
}
.left ul {
padding: 10px 0 15px 20px;
list-style-type: square;
color: #EE3233;
}
.left ul li a {
color: #fff;
text-decoration: none;
font-size: 13px;
font-weight: 100;
}
.left ul li a:hover {
color: #fff;
font-weight: 600;
}

#footer {
height: 80px;
line-height: 12px;
background: #6C7476;
text-align: center;
font-size: 11px;
color: #fff;
}
#footer a:link {color: #F0ECEB; text-decoration: underline; }
a:active {color: #F0ECEB; text-decoration: underline; }
a:visited {color: #F0ECEB; text-decoration: underline; }
a:hover {color: #F0ECEB; text-decoration: none; }

</style>
<BODY> 
<div id="wrap 2">
<div id="wrap">


<div id="header">
<center>
<img src="YMCA/NWLOGO4.jpg">
<h1>Northwest Connecticut YMCA - Torrington Branch - 259 Prospect St, Torrington CT 06790
</center>
</div>

<div id="menu">

<center>
<img src="(URL address blocked: See forum rules)" width="360" height="15">
<br>
<img src="ymca/miniY.jpg">
<a href="(URL address blocked: See forum rules)" ONMOUSEOVER=rollover.src="YMCA/homelink2.jpg"  ONMOUSEOUT=rollover.src="YMCA/homelink.jpg">
<img src="YMCA/homelink.jpg" name="rollover" width="89" height="28" border="0"></a>        
<a href="(URL address blocked: See forum rules)" ONMOUSEOVER=rollover2.src="YMCA/Torringtonlink2.jpg"  ONMOUSEOUT=rollover2.src="YMCA/Torringtonlink.jpg">
<img src="YMCA/torringtonlink.jpg" name="rollover2" width="140" height="28" border="0"></a>      
<a href="(URL address blocked: See forum rules)" ONMOUSEOVER=rollover3.src="YMCA/winstedlink2.jpg"  ONMOUSEOUT=rollover3.src="YMCA/winstedlink.jpg">
<img src="ymca/winstedlink.jpg" name="rollover3" width="109" height="28" border="0"></a>
<a href="(URL address blocked: See forum rules)" ONMOUSEOVER=rollover4.src="YMCA/cannanlink2.jpg"  ONMOUSEOUT=rollover4.src="YMCA/cannanlink.jpg">
<img src="ymca/cannanlink.jpg" name="rollover4" width="93" height="28" border="0"></a>     
<a href="(URL address blocked: See forum rules)" ONMOUSEOVER=rollover5.src="YMCA/givinglink2.jpg"  ONMOUSEOUT=rollover5.src="YMCA/givinglink.jpg">
<img src="ymca/givinglink.jpg" name="rollover5" width="86" height="28" border="0"></a>      
<a href="(URL address blocked: See forum rules)" ONMOUSEOVER=rollover6.src="YMCA/aboutuslinks2.jpg"  ONMOUSEOUT=rollover6.src="YMCA/aboutuslinks.jpg">
<img src="ymca/aboutuslinks.jpg" name="rollover6" width="104" height="28" border="0"></a>
<img src="ymca/miniY.jpg">
</center>


</div>




<div id="content">
<div class="right"> 
<span style="font-size : 12px">
<br>
<center>
<img src="ymca/spacer.gif"><br>
Be sure to register for the...
<h2>2009 Sunny Brook 5k Cross-Country <br><i>In Memory of John Ponte</i></h2>
<img src="YMCA/Ponte%20Run.gif" width="360" height="190"><br> 
Click Image for .pdf file.<br>
<img src="ymca/spacer.gif">
</center>
<br>
Other Important YMCA info should go here.
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</span>
</div>

<div class="left"> 

<h2>Links :</h2>
<ul>
<li> <a href="(URL address blocked: See forum rules)">Torrington</a></li> 
<li><a href="(URL address blocked: See forum rules)">Winsted</a></li>
<li><a href="(URL address blocked: See forum rules)">Cannan</a></li>
<li><a href="(URL address blocked: See forum rules)">Hours of Operation</a></li> 
<li><a href="(URL address blocked: See forum rules)">Membership Rates</a></li>
<li><a href="(URL address blocked: See forum rules)">Employment</a></li> 
<li><a href="(URL address blocked: See forum rules)">Contact Us!</a></li>
</ul>

<h2>Fall 2009 Program Guide</h2>
<ul>
<a href="(URL address blocked: See forum rules)"><img src="(URL address blocked: See forum rules)" width="160" height="220" border="0"></a>
</ul>

</div>

<div style="clear: both;"> </div>

</div>

<div id="footer">
<center>
<br>
<span style="font-size : 12px">
<a href="(URL address blocked: See forum rules)">Home</a>  |  
<a href="(URL address blocked: See forum rules)">Torrington</a>  |  
<a href="(URL address blocked: See forum rules)">Winsted</a>  |  
<a href="(URL address blocked: See forum rules)">Cannan</a>   |  
<a href="(URL address blocked: See forum rules)">Giving</a>   |  
<a href="(URL address blocked: See forum rules)">About Us</a>
<br><br>
2009 Northwest Connecticut YMCA.
<br>
The YMCA is a 501(c)(3) not-for-profit social services organization dedicated to
<br>
building strong kids, strong families and strong communities.
<br><br>
</center>
</div>

</div>
</div>
</BODY>
</HTML>

Can anyone help me out here please?
I have an urgent request and need to get this site up and running tomorrow :-(
I cannot seem to hover over, mouse over any of my a:hover, link, over etc in IE.
The cursor just sticks as an arrow and doesn't change to a hand. It works in Firefox fine.
Thanks in advance. Lisa :-)

My HTM file:
**************
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<META name="Description" content="">
<META name="Keywords" content="">
<link href="css/main.css" rel="stylesheet" type="text/css">
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/ie.css" media="screen" />
<![endif]-->
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
<script language="javascript" src="scripts/menu.js" type="text/javascript">
</script>
</head>
<body>
<div id="nav-toplevel">
<div id="nav-meta">
<ul title="Top Level Navigation bar">
<li><a href="index.php" title="">home</a></li>
<li><a href="aboutus.php" title="">about us</a></li>
<li><a href="contact.php" title="">contacts</a></li>
</ul>
</div>
</div>
<!-- End of meta navbar -->
<div id="nav-nextlevel">
<div align="center">
<div id="menu">
<ul id="menujs">
<li id=""><a href="./" title="">Item 1</a>
<ul>
<li id=""><a href="" title="">Thailand</a></li>
<li id=""><a href="" title="">Thailand</a></li>
<li id=""><a href="" title="">Thailand</a></li>
</ul>

<li id=""><a href="./" title="">Item 2</a>
<ul>
<li id=""><a href="" title="">Thailand</a></li>
</ul>
</li>
<li id=""><a href="./" title="">Item 3</a>
<ul>
<li id=""><a href="" title="">Thailand</a></li>
</ul>
</li>
<li id=""><a href="./" title="">Item4</a>
<ul>
<li id=""><a href="" title="">Thailand</a></li>
</ul>
</li>
<li id=""><a href="./" title="">Item 5</a>
<ul>
<li id=""><a href="" title="">Thailand</a></li>
</ul>
</li>
<li id=""><a href="./" title="">Item 6</a>
<ul>
<li id=""><a href="" title="">Thailand</a></li>
</ul>
</li>
<li id=""><a href="./" title="">Item 7</a>
<ul>
<li id=""><a href="" title="">Thailand</a></li>
</ul>
<li id="selectcountry"><a href="#" title="">Item 8</a>
<ul>
<li id="thailand"><a href="" title="">Thailand</a></li>
</ul>
</li>
</li>
</ul>
</div>
</div>
</div>
<!-- End of top level navbar --> </div>
<!-- Start of main content section -->
<div id="container">
<div id="content">
<h1>Main Heading Here</h1>
<h2 align="center">These Links Don't Work :-(</h2>
<p>
<strong>This link doesn't work<a href="." target="_self">Thailand</a><br>
<br>
<strong>This link doesn't work<a href="." target="_self">Thailand</a><br>
<br>
<strong> This link doesn't work <a href=".">Thailand</a></p>
</div>
<div id="contentb">
</div>
<div id="footer">
<p id="info-footer">
<a href="">Doesn't Work</a> |
</p>
</div></div>
</body>
</html>


**************
Here's my main.css

html {
font-family:verdana, arial, helvetica, sans-serif;
font-size:65%;
color:#555;
background:#fff;
/* Border Image */
background-image:url("../images/htm6l.png");
background-position:center center;
background-repeat:repeat-y;
}

body {
position:relative;
width:700px;
padding:15px 30px 180px 20px;
margin:10px auto 10px auto;
/* Page Background */
background-image:url("../images/body.png");
background-position:center center;
background-repeat:repeat-y;
border-bottom:1px solid #ECECEC;
border-top:1px solid #ECECEC;
}

#banner {
position:absolute;
left:0;
width:100%;
height:120px;
padding:0 !important;
padding-right:50px;
background-color:#FFF;
/* top image */
background-image:url("../images/scuba_8.jpg");
background-position:150px 0;
background-repeat:no-repeat;
border-top:1px solid #ECECEC;
border-bottom:1px solid #ECECEC;
}


#nav-toplevel {
position:relative;
right:290px;
margin-right:-25px;
}
#nav-nextlevel {
position:relative;
right:0px;
margin-right:-30px;
}

#nav-meta {
position:absolute;
right:0;
top:1px !important;
top:0px;
}

#nav-meta ul {
display:inline;
margin:0;
padding:0;
}

#nav-meta ul li {
display:inline;
margin:0 !important;
margin-left:3px;
padding:1px;
background-color:#F8FBFF;
border:1px solid #ccc;
border-top:none;
list-style:none;
}

#nav-meta a {
padding-left:2px;
padding-bottom:2px;
font-size:0.94em;
letter-spacing:0.04em;
color:#888;
text-decoration:none;
margin:0 !important;
margin-right:-2px;
}

#nav-meta li:hover {
border-top:1px dashed #CACACA;
}

#nav-meta a:hover {
background-color:transparent !important;
text-decoration:none !important;
background-color:#fff;
text-decorationverline;
}
#menu ul,
#menu li,
#ClearFloat {
margin:0px;
padding:0px;
}
#menu{
position:absolute;
display:block;
top:122px;
margin:0px 0px 0px 99px;
width:auto;
font-family:verdana,Georgia, serif;
font-size:11px;
list-style-type:none;
float:left;
z-index:300;
}

#menu ul li ,
#menu ul li ul li {
position:relative;
font-family:verdana,Georgia, serif;
list-style-type:none;
float:left;
z-index:500;

}
#menu ul li ul {
position:absolute;
display:none;
font-family:verdana,Georgia, serif;
}
#menu ul li a,
#menu ul li a:link,
#menu ul li a:visited {
display:block;
font-size:11px;
font-family:verdana,Georgia, serif;
color:#888;
text-decoration:none;
margin-left:3px;
margin-top:0px;
padding-bottom:3px !important;
padding-left:4px;
padding-right:4px;
padding-top:3px;
background-color:#FFF;
border:1px solid #ccc;
border-top:none;
line-height:10px;
}
#menu ul li.over ul,
#menu ul li:hover ul {
display:block;
font-size: 11px;
font-family:verdana,Georgia, serif;
text-align:left;
width:100px;
background-color:transparent !important;
text-decoration:none !important;
}

#menu ul li a:hover {
display:block;
font-size:11px;
font-family:verdana,Georgia, serif;
color:#ccc;
}

#menu ul li ul li a:hover {
display:block;
font-size:11px;
font-family:verdana,Georgia, serif;
}


#container {
position:relative;
top:160px;
height:100%;
background-color:#F8FBFF;
/* Footer Image */
background-image:url("../images/scuba_footer.jpg");
background-position:right bottom;
background-repeat:no-repeat;
margin-bottom:10px;
z-index:100;
}

#content {
position:relative;
width:700px;
background:transparent;
}

#content p {
font-size:1.08em;
line-height:1.4em;
padding:6px 11px 13px 25px;
margin:0 15px 1.1em 0;
background-image:url("../images/shadow2.png");
background-position:bottom center;
background-repeat:no-repeat;
}

#content ol, #content ul{
font-size:1.08em;
line-height:1.4em;
padding:6px 11px 13px 25px;
margin:0 13px 1.1em 0;
background-image:url("../images/shadow2.png");
background-position:bottom center;
background-repeat:no-repeat;
}
#content li {
list-style-type:square;
margin: 0px 0px 0px 15px;
}

#contentb {
position:relative;
width:525px;
background:transparent;
}

#contentb p {
font-size:1.08em;
line-height:1.4em;
padding:6px 11px 13px 20px;
margin:0 15px 1.1em 0;
background-image:url("../images/shadow.png");
background-position:bottom left;
background-repeat:no-repeat;
}

#contentb ol, #contentb ul {
font-size:1.08em;
line-height:1.4em;
padding:6px 11px 13px 40px;
margin:0 13px 1.1em 0;
background-image:url("../images/shadow.png");
background-position:bottom left;
background-repeat:no-repeat;
}
#contentb li {
list-style-type:square;}



h1,h2,h3,h4,h5,h6 {
height:auto !important;
height:30px;
margin-top:0;
margin-left:11px;
font-family:century gothic, serif;
letter-spacing:0.04em;
background-repeat:no-repeat;
border-bottom:1px solid #ECECEC;
background:transparent;
}

h1 {
width:680px;
padding-top:0.3em;
padding-left:2px;
font-size:14px;
color:#4a74c0;
background-image:url("../images/sand23.png");
background-position:bottom left;
background:transparent;

}

h4 {
border-bottom:0px solid #ECECEC;
}

h2,h3,h4,h5,h6 {
font-size:12px;
font-size:1.3em;
color:#4a74c0;
padding-left:25px;
background-position:bottom left;
}

h2,h3, h4, h5, h6 {
width:660px;
}

h1:first-letter ,h2:first-letter {
font-size:1.6em;
text-transform:uppercase;
}

h3:first-letter ,h4:first-letter ,h5:first-letter ,h6:first-letter {
font-size:1.5em;
text-transform:uppercase;
}

#footer {
position:absolute;
bottom:3px !important;
bottom:0px;
right:23px;
width:100%;
font-size:0.94em;
}

#info-footer {
position:absolute;
right:-32px;
}


a:link {
color:#888;
text-decoration:underline;
}

a:visited {
color:#888;
text-decoration:underline;
}

a:hover {
color:#ff490d;
text-decoration:none;
}

a:active {
color:#000;
text-decoration:none;
}

*************************
Here's my menu.js

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("menujs");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}

window.onload=startList;

********************
here's my ie.css#container {
z-index:-1;
}


I would really appreciate any help.
Thanks again Lisa.