IE vs FF discrepancy

On this site, you will notice that the resources button on the sidebar is all the way down near the footer. In firefox, it is where it should be-- near the top of the sidebar. Any thoughts on why the discrepancy here?

 

You may be getting unexpected results because you have some contradictory style rules.

#nav-container {
  width: 220px;
  float: left;
  position: absolute;
  height: 200px;
}

* html #nav-container {
  width: 220px;
  float: left;
  position: absolute;
  left: -3px;
  top: 0;
}

Code (markup):

An element may not be both float and absolute positioned. That may or may not be at issue here, but there is no point in debugging while there exists known problems.

cheers,

gary

 

I managed to partly fix the issue. I was missing a ul

Previously, my xhtml was like this;

<li class="resources">
<div class="resources"</div>
</li>

Code (markup):

and so i edited it to this;

<ul>
<li class="resources">
<div class="resources"</div>
</li>
</ul>

Code (markup):

However, once that issue was fixed, something else came up. When you hover over the button, a blue background would appear behind the button.

I tried debugging the issue but couldn't find out what style was causing it. So I had to put in a more specific style

div.resources a img:hover {
	background-color: #fff;
	}

Code (markup):

The problem still exist but I masked that problem by making the hover color white so that it matches the background color of the sidebar.

Though, if anyone knows what could be causing this issue, let me know.

By the way, I found this great new debugger for Firefox called Firebug -- which is alot better than the Firefox Web Dev Toolbar. I had issues with the Web Dev Tool but Firebug is like the best thing since sliced bread. Just in case anyone is interesed.