CSS problems in all browsers

I am trying to add social media icons to the footer of canopyco.com, but开发者_JS百科 am having difficulty with the CSS.

Here are my problems:

1. The icons are aligned properly in Chrome and Safari, but in IE and FF, they are not. This is because in IE and FF, the footer link text is larger than in Chrome and Safari, therefore the margins that I've set up for the icons do not work. The icons should be flush with the left side of the footer navigation links.

2. When I place the icons in the footer, somehow the icons div is covering up the footer navigation links text.

I'm pretty fresh in CSS still, so I'm hoping someone here can guide me. I don't want to post the code here in the question, as there is a LOT of CSS and HTML to take into account when looking at the bugs.

After inspecting your html, here is what you should do:

Get rid of height in the footer nav and set overflow to hidden

#footer ul#footer_nav {
 margin-top: 23px;
 float: right;
 text-align: right;
 overflow: hidden;
}

Also get rid of height in the footer icons and set overflow to hidden

#footer ul#footer_icons {
 margin-top: -3px;
 float: left;
 text-align: left;
 width: 200px;
 margin-left: -2px;
 overflow: hidden
}