[RESOLVED] Links not clickable in IE 7

[svidgen]

Hey,

I've implemented a really simple design for a recent learning project of mine. However, I came to find that nothing on the right side of the page is accessible in IE7--or at least IE7 with certain settings turned on. That's the thing that really baffles me: it works on my installation at home, but I haven't seen it work on any other installations of IE7 ... ?

Anyway, if someone could take a look at it, that would be appreciated:

http://pyramid.thepointless.com

As far as my testing goes, it works in FF, Safari, IE 6, and my particular installation of IE7, but no one else's installation of IE7.

Thanks!

[WebJoel]

not clickable? One is not visible in Firefox either...

first screenshot IE

second screenshot Fx

0r is that my adblocker not showing the javascript ad? (a good reminder why javascript-based ads are not so effective :) )

[svidgen]

Yes, I'm not too concerned with the JavaScript ads not showing up--that's to be expected for a certain percentage of users. The issue I'm seeing with most of the IE7 installations I've come across is that absolutely -nothing- on the right sidebar reacts to mouse events. This includes mouseovers and clicks on links and form elements.

Any ideas?

Thanks!

[svidgen]

For anyone that's following this thread, I've discovered that the problems with IE7 are due to one relatively small change I made and neglected to test on my home computer:

I added a digg.com link. If you visit the page again, the digg.com code is commented out. It's in the header section:


<div id="header" class="content_left">
<h3>The Pyramid Project</h3>
<!--
<div style="margin-top: -3em; margin-bottom: 1.5em; margin-right: 5px; margin-left: auto; width: 130px;">
<script type="text/javascript">
digg_url = 'http://pyramid.thepointless.com';
digg_bgcolor = '#ffffee';
digg_skin = 'compact';
</script>
<script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script>
</div>
-->
</div>


I still don't know where the conflict lies. If anyone has time to take a look at that and tell me what the conflicting rule(s) is(are), I'd love to be informed. Otherwise, I'll have to look at it in more depth later.

Thanks!

[WebJoel]

<div style="margin-top: -3em; margin-bottom: 1.5em; margin-right: 5px; margin-left: auto; width: 130px;">
<script type="text/javascript">
digg_url = 'http://pyramid.thepointless.com';
digg_bgcolor = '#ffffee';
digg_skin = 'compact';
</script>
<script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script>
</div> There is a possibility that the " # " won't work in javascript. The vast majority of *js that I have ever worked on, never used the pound-sign... any 'scripters wanna take a stab at this? :confused:

[ryanbutler]

It's the negative bottom margin in IE 7. Exactly why is a little above my head.

[svidgen]

The negative top margin was indeed mucking things up for IE7. For the time being I've zeroed that margin, and I may try using relative or absolute positioning within' that DIV in the future. Otherwise, I might just take the digg link out.

Anywho, thanks for the help!