1

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

kamui
  • 3,339
  • 3
  • 26
  • 44
Aaron Chauvin
  • 167
  • 1
  • 3
  • 14
  • Ok, I'm ready to just set a bounty on this 'cuz I've searched all over the internetz and found nothing pertaining to my specific problem but there is no option to set a bounty anywhere on this page... =/ – Aaron Chauvin Jul 01 '11 at 20:00
  • Ok, had to "un-accept" an answer for the option to start a bounty. =P – Aaron Chauvin Jul 02 '11 at 19:40
  • Anybody interested in earning 50 rep? The portfolio review date has passed, I'm just hoping the reviewers didn't use IE7, but I still want my site to be viewable in IE7, soooo… – Aaron Chauvin Jul 03 '11 at 04:06

6 Answers6

3

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;

Jason Gennaro
  • 34,535
  • 8
  • 65
  • 86
  • Thx! I can't test/implement this until the library opens on Tuesday due to my aforementioned internet issue, but if it works, I'll be sure to give you the +50! – Aaron Chauvin Jul 03 '11 at 16:20
  • Ok, that did indeed make the jaguar appear, but what about the text tab in the upper-left corner? – Aaron Chauvin Jul 05 '11 at 18:18
  • @Aaron. I don't have IE7 here @ work to test this, but I think the upper-left text issue has to do with `position:abolsute;" and your `z-index` rules. Try changing to `position:relative;". – Jason Gennaro Jul 06 '11 at 18:56
  • At the library now, about to test the position: absolute suggestion… if these librarians would ever come over and log me into this computer! – Aaron Chauvin Jul 07 '11 at 19:41
  • Ok, I changed all
    's for the entire slide-out pane (#opts, #opendiv, #optsdiv & #closediv) to position: relative and (in IE7) part of the #opendiv shows, but it's clipped at the bottom... also, #optsdiv doesn't show at all. I was fortunate to get on a computer that has FF installed and in this browser (and I suspect all the other browsers that I've been testing in - IE9/Chrome/Safari), changing the position to relative breaks the layout of the
    's... any suggestions? At least there's _some_ progress! =)
     – Aaron Chauvin Jul 07 '11 at 20:31
  • Check that... I realized that I didn't have width/height set for each
    in the #opts container
    (or for the #opts
    for that matter) and once I added those properties, I was able to set the positions back to absolute and IE7 will at least show #opendiv/#closediv and even animate them to the right/left when clicked (respectively) but #optsdiv isn't showing up when #opendiv is clicked... it does in FF though... what's the deal?
     – Aaron Chauvin Jul 07 '11 at 21:06
  • I've tried adding `display: block;` to `#optsdiv` and changing only `#optsdiv`'s `position` to `relative`, but neither of those remedied the problem... – Aaron Chauvin Jul 07 '11 at 21:21
  • @J. Gennaro: And don't worry about the bounty expiring if you cant get to it yet, I'll just set it again and when we get this fully solved I'll give you the rep! =) Thanks so much for your help thus far! – Aaron Chauvin Jul 07 '11 at 21:23
  • @J. Gennaro: Nice site btw... I see you use a lightbox too! Those are so awesome. – Aaron Chauvin Jul 07 '11 at 21:26
  • Not sure if it'll help you at this point, but for what it's worth, IE7 can do `display: inline-block;` fine as long as the element was `display: inline;` by default. – Sam DeFabbia-Kane Jul 09 '11 at 18:00
2

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.

Techgration
  • 516
  • 4
  • 16
  • I'm using HTML4.01 and it's validating so I think I'm good there. Thanks for the heads up though. You don't find it odd that the only two problems on the page are the first and last links and nothing else? – Aaron Chauvin Jun 30 '11 at 19:38
  • Oh it's plenty odd. But it's normal when it comes to testing between the different versions of IE. Also, you can force IE new browsers to render like the old ones did with a meta tag, but this wouldn't help in your case. But just in case you did get it working on the old one and then the new one broke, you could use that trick. http://stackoverflow.com/questions/1014666/force-ie8-into-ie7-compatiblity-mode – Techgration Jun 30 '11 at 20:10
1

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.

BumbleB2na
  • 10,723
  • 6
  • 28
  • 30
  • Well here's the thing, all my image links use that same method, but _they_ don't get left indented like the first and last image links... what could be the reason that only the first and last links are behaving this way? – Aaron Chauvin Jun 30 '11 at 19:45
  • Oh, and that's a jaguar, lol. I guess IE9's compatibility mode isn't truly making the browser act as if it's IE7 then... – Aaron Chauvin Jun 30 '11 at 19:47
1

IE7 inline-block trick

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

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

circusdei
  • 1,967
  • 12
  • 28
1

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...

BizNuge
  • 938
  • 1
  • 8
  • 20
  • Yeah, I've tried messing with the initial position but with no results. And yeah, the jaguar pic link was already fixed thanks to Jason below... – Aaron Chauvin Jul 09 '11 at 21:11
  • Have you tried reducing the amount of complex content in the #optsdiv element. Perhaps simply try dropping in <span>test</span> and see what you get. The only way to fix things sometimes is dismantle them and see whats broken inside... wow... browser zen! good luck! – BizNuge Jul 11 '11 at 17:15
  • Thx for the tip, I'll try this as soon as I can get to a computer that has IE7. – Aaron Chauvin Jul 12 '11 at 18:21
0

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

ggzone
  • 3,661
  • 8
  • 36
  • 59