I am completely stumped by a seemingly very simple problem on website www.interiorsformodernliving.com/new (you may need to re-type “new” once you initially put the address into your browser)...

On projects page, the navigation links (home, about us, projects, contact us) don’t work in IE6 and IE7. They work in Firefox and Safari. The weird thing is that the nav links in IE work from the other pages, just not on the projects page and the code is exactly the same on all pages. Any ideas would be greatly appreciated. Thank you!

<div id="links">
<ul>
<li><a href="index.html">home</a></li>
<li><a href="aboutus.html">about us</a></li>
<li><a href="projects.html" class="on">projects</a></li>
<li class="last"><a href="contactus.html">contact us</a></li>
</ul>
</div>

#links
{
color: #e19d65;
font-size: 12px;
margin: 50px 0 0 284px;
}
#links a
{
color: #e19d65;
text-decoration: none;
font-style: normal;
}
#links li
{
display: inline;
list-style: none;
padding-right: 1.4em;
margin-right: 1.10em;
border-right: 1px solid #e8ac7b;
}
#links li.last
{
border-right: 0;
margin-right: 0;
padding-right: 0;
}
#links a.on
{
color: #ffcba1;
}

the code is exactly the same on all pages.

No, it isn't


The #logo div on the projects-page simply overlaps the menu in IE.

But it actualy is the margin: -27px 0 0 93px; more specific the negative top-margin that IE doesn't handle like it should be.

You can probably solve it with an absolute position of the logo.

You are AMAZING. How did you figure that out?

How did you figure that out?

The links on the project-page weren’t clickable and the link-text was not selectable either, so I knew there was something in front of it. Then I gave #logo a border to see if I was correct.

Using a width for the #logo div didn’t solve it, even when the div ‘visually’ didn’t overlap the menu anymore… But negative margins can give strange effects in IE - actually everything can in IE, but however) so I removed de negative-margin and ... found! ;-)

If I have such kind of ‘unexpected’ problems on my site, I place parts of the CSS code between comment-marks and look if it’s ‘solved’. On this way eventual you find which part causes the error etc.
(maybe it's not the most fast or best way, but it works)