Navigation Menu Shifted to the Right on IE7 and earlier

I am new to css/html. I work in the area of non-profit housing and I want to build a site to recruit donations and volunteers. I have validated my code and tested the site on several browsers. The problem is the navigational menu is shifted to the right about an inch on ie7 and earlier. It appears fine in other browsers I have tested. The temporary site is:

http://74.220.215.79/~phhcvolu

The HTML and CSS code is below:
CSS code:
body {

padding : 0;

line-height : 1.2em;

margin : 0;

text-align : justify;

background-color : white;

Firefox and IE compatability

I HATE Firefox and IE right now

Chrome and safari are rendering like this:
http://wincraftmc.net/images/chrome.png

firefox and IE are rendering like this(Firefox has the curved corners though):
http://wincraftmc.net/images/Firefox.png

I have been trying to work this out for hours now.

Heres my testpage:
http://wincraftmc.net/test/index.html

CSS:
http://wincraftmc.net/test/home/style.css
http://wincraftmc.net/test/home/iestyle.css

IE7 TD Hover Problems

I know everyone's tired of hearing about IE problems. I am rendering a table, and inside that table I have hidden DIV elements which are supposed to pop-up and be usable on hover (e.g. have buttons you can push and content to be read). However, in IE7 standards mode (in IE8) when the DIV Display is 'Block', it is hidden behind cells on the same TR. It renders completely fine in IE8+ or any standards compliant browser. Does anyone know a work around?

Please review the code and example here: http://jsfiddle.net/Ew9GU/15/

Strange phenomena with IE6

Hi all,

I have created a custom template which uses the mootools library quite a lot for things like accordion and tabs. This all sits on the Joomla framework but is CSS specific.

Everything is working well with the exception of a stange phenomena in IE6 - as always.

CSS image a href decoration not working in FireFox and IE but it does in Chrome, what to do?

I put this in my CSS:
a {text-decoration:none;}
In Google Chrome you don't see a line around the clickable images, that's what I want. But in FireFox and Internet Explorer there are lines around the clickable images and I don't know how to fix this... since I put a {text-decoration:none;} in my CSS, which I think should solve the problem...
What do I need to do?
The website I'm talking about it www.cynthiajanes.com by the way

Syndicate content