IE compatibility issues w/ wordpress

Usually wordpress templates take care of cross-browser compatibility for you, but I've basically built my own and I haven't had to deal wit开发者_JAVA技巧h IE issues in a while. Everything seems to work fine except for #social and #menu. The CSS for these is here:

#social {
float:left;
width:500px;
display:inline;
margin:333px 0 -420px 208px;
}

#menu {
display:inline;
background:transparent;
width:100%;
float:left;
margin:365px 0 0 -55px;
text-transform:lowercase;
}

And here's the site: http://www.erisdesigns.net/STAGE/ED1.3/

I looks to be a simple positioning issue. I really only care about getting them to work in IE7 and IE8. Thanks for any help.

If the width/height of the header is fixed and you want each of those elements to appear at a certain position within the header, using float and margins is a bad idea. You put yourself at the mercy of browser idiosyncrasies, and IE is not very merciful. Use absolute positioning instead.

First, add position: relative; to the #headercontent element. (Or delete it and just use #header. I don't see the point of having two header divs.) If necessary, also give the header a fixed height so that it will not collapse when you rearrange the other elements.

Now, position each of the elements in the header (the quotes, the menu, and the social media icons) using position: absolute; and assign fixed numerical values to their top and left (or bottom and right) properties.

Yes, absolute positioning feels like brute force and somewhat less elegant, but all browsers including IE tend to obey brute force if nothing else.