CODEWITHSUNDEEP
hyperlinkinternet-explorer-7
Aaron Chauvin
Aaron Chauvin

Reputation: 167

IE7 link issues?

My internet was just shut off... so I'm at the library trying to fix one last feature of my test page (and eventually my site) before the portfolio review date on the 1st (TOMORROW!!!).

Here's the problem, all this time I've been testing compatibility of my site with IE9/FF4/Chrome12/Safari (latest) but NOT IE7/8. My site/test page works as I want in the browsers I've been testing with.

As luck would have it, the library I'm at has IE7 installed and apparently won't upgrade to IE8, which I think would render my page correctly. I think so due to finding many instances of issues with page renderings in IE7 while there are none in IE8 for the same page through some investigating.

Anyway, on the test page linked above, the text tab slide-out div in the top-left corner of the page isn't displaying and oddly enough, a simple image link at the bottom right of the page isn't either. Those two happen to be the first and last links on the page, if that helps at all (I'm thinking it may have something to do with that). Everything else on the test page is functioning/displaying properly. Just view the test page through any of the above browsers that I've tested with to see how it should display/function.

I've tried adjusting the z-index (as I've found a few cases where that was the culprit of the IE7 misbehaving) but to no avail. I'm stuck and don't know where to go next.

Any help/pointers would be very appreciated as this is getting reviewed tomorrow! A lot is riding on this review and I want to ensure that the reviewers can view the page as intended if they are using IE7.

Edit: CSS, JS

Upvotes: 1

Views: 711

Answers (6)

ggzone
ggzone

Reputation: 3711

IE 7 doesnt support block elements (like button) in a-tag... that was the problem here i had.

Upvotes: 0

BizNuge
BizNuge

Reputation: 938

With regards to the text options, have you tried messing about with the left offset (-140px) applied to your <div class='optsdiv' > perhaps trying it set to zero [0] or even omitting the attribute entirely.

I know changing this value won't necessarily fix your issue, but it might point you in the right direction...

Bottom link seems to work on my IE7 by the way... not sure if you've perhaps fixed this issue already. my build version is 7.0.5730.13 for reference.

Good luck with the fix! IE sux ass...

Upvotes: 1

circusdei
circusdei

Reputation: 1967

IE7 inline-block trick

#id {
    display: inline-block;
    *zoom: 1;
    *display: inline;
}

For why, search google for "hasLayout". ...oh how i love IE...

Upvotes: 1

Jason Gennaro
Jason Gennaro

Reputation: 34855

In your CSS, if you change your 

.SU{
    display:inline-block;
}

to 

.SU{
    display:block;
}

You can see the jaguar no problem.

Apparently, IE7 has issues with display:inline-block;

Upvotes: 3

BumbleB2na
BumbleB2na

Reputation: 10743

Problem with this CSS style:

.SU
{
    text-indent: -9999px;
}

This is hiding the image for me when I run your test page in IE9 in compatibility mode. When I remove the text-indent style I can see the cougar image at the bottom. I seem to remember reading about this text-indent hack being a way for screen readers to read the link, but developers found it was breaking when new (IE7+) browsers were released.

When I run the page in IE9 in compatibility mode, your "Text" popout menu works fine.

Upvotes: 1

Techgration
Techgration

Reputation: 517

I would google "CSS differences between IE7 and IE9" and "JavaScript differences between IE7 and IE9".

Also, IE7 and IE8 do not support HTML5 markup very well (or at all). So I hope you aren't using that.

Upvotes: 2

Related Questions