Hey guys!

 

Got a new website for a client but in IE9 it's displaying awfully.

 

The site is http://www.wmimmigration.com, in FF, Chrome etc it's fine, but IE9 it's a pig.

 

Anyone help me out of this deep hole?

 

Cheers

Bump, if anyone can help with this, I will buy them a 2 month gold membership for here

in your CSS, add

#header {
position:relative;
}

 

Move id=logo from the img tag and add it to the anchor tag around it.

 

Change this property in your #logo

#logo {
position:absolute;
}

 

Change this property in your #head-nav

#head-nav {
margin: 0 0 0 100px;
}

 

And by the way, if this works, don't worry about the membership.

Edited July 13, 201115 yr by Pedro

Nah didn't work, the menu is displaying awfully and the client wants this fixed....

 

I have added a screenshot to show what I mean, the menu us supposed to be above that content.

 

Any help is appreciated.

I'm looking at the site, and the changes I mentioned are not there.

Can you add them in please, even if it doesn't fix the problem, it's how you CSS should be.

 

And by adding them in it will be easier to fix the bugs.

 

Let me know when you've added them and I'll have another look.

it does the same in IE8

 

best fix the validation error to start with http://validator.w3.org/check?uri=http%3A%2F%2Fwww.wmimmigration.com%2F&charset=%28detect+automatically%29&doctype=Inline&ss=1&outline=1&group=0&user-agent=W3C_Validator%2F1.1

 

and watch out with Super Cache. I've no idea what it does but it came up on another thread in the last week and changes weren't being reflected when the site was looked at again.

Added your code back in Pedro but had to change it slightly cos it messed up the styling for Firefox etc,

From what I see now, do the following:

 

First, in your HTML index file, change from id="Header" to id="header".

 

Second, remove the negative margin top from #head-nav. leave it as:

#head-nav{
height: 60px;
margin: 0 0 0 100px;
width: 100%;
}

 

Third, add overflow:hidden to #MainWrapper:

#MainWrapper{
overflow:hidden;
}

 

Fourth: add this to your css:

#head-nav ul li {
float: left;
}

 

Update and let me know for more debugging

I'd take out width:100%; from #head-nav too. It's a block element, so it's already 100%. If you add width:100%, when you add margin 100px, it becomes 100% + 100px

Fixed with one issue left, it's still displaying behind the content and pushed the content up.

 

I have added a top margin but still not working, any ideas?

line 174 - close the </div properly. May not solve the problem but could cause others.

line 174 - close the </div properly. May not solve the problem but could cause others.

 

My Firefox HTML checker didn't see that :| Fixed now though

shameless bump, anyone able to help with this, I bloody hate IE GRRRRRRRR