Usually wordpress templates take proper care of mix-browser compatibility for you personally, but I have essentially built my very own and that i haven't needed to cope with IE issues shortly. Everything appears to operate fine aside from #social and #menu. The CSS of these is here now:

#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 website: http://www.erisdesigns.net/STAGE/ED1.3/

I looks to become a simple positioning problem. I truly only worry about keeping them operate in IE7 and IE8. Thank you for any help.

When the width/height from the header is bound and also you want all of individuals elements to look in a certain position inside the header, using float and margins is an awful idea. You place yourself subject to browser idiosyncrasies, and IE is not so merciful. Use absolute positioning rather.

First, add position: relative; towards the #headercontent element. (Or remove it and merely use #header. I do not see the purpose of getting two header divs.) If required, also provide the header a set height to ensure that it won't collapse whenever you arrange another elements.

Now, position each one of the elements within the header (the quotes, recption menus, and also the social networking symbols) using position: absolute; and assign fixed statistical values for their top and left (or bottom and right) qualities.

Yes, absolute positioning feels as though brute pressure and somewhat less elegant, but all browsers including IE often obey brute pressure if little else.