Layout and display issues with IE8 (and Chrome) [#1321542]

Love this theme in Opera but in IE8 it looks odd. In particular, the main menu bar at the top gets stretched across the page on 2 lines of 3 menu links each. Also, it does something strange with photos in tables. I put 3 thumbnails in a table to show the difference among a fixed image in text, a linked image that opens full size in the window, and a colorbox link that floats full size in the overlay. In IE8 and Chrome, the thumbs get squished to almost vertical lines and the colorbox won't even activate. It seems specific to Respond (or perhaps its parent, Omega) because the thumbs display and work as intended in other themes. Screenshots attached.

File	Size	Author
table-photos-ie8.png	21.3 KB	javamonkey
table-photos-opera.jpg	72.99 KB	javamonkey
respond-ie8.png	95.88 KB	javamonkey
respond-opera.png	67.83 KB	javamonkey

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

davidam CreditAttribution: davidam commented 30 January 2012 at 00:12

I've the same problem in IE8, adding that I've horizontal scroll in my netbook and the images doesn't display, although the html is printed (I'm using the field image).

Comment #2

davidam CreditAttribution: davidam commented 2 February 2012 at 05:37

I've been researching about it. Some images wasn't displaying because float divs needs width in explorer and anothers like the search image was having troubles due to that it's a background image. In this particular situation I've added:

<!--[if lte IE 8]>
    -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/sites/\
all/themes/omega/respond/i/search.png', sizingMethod='scale')";
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/sites/all/t\
hemes/omega/respond/i/search.png', sizingMethod='scale');
<![endif]-->

Now, I'm trying bring rounded corners there are a module called css3pie, it's not working in my drupal installation, I've read know issues but without successfull. I would thank any successful solution to css3 elements in explorer with respond theme.

Comment #3

javamonkey CreditAttribution: javamonkey commented 22 February 2012 at 21:49

In what file and which section of the file do you use the code you quoted? I would like to try it because Respond is very cool but not very usable currently with IE, unfortunately. The rounded corners would be great also but it's not major block for me, unlike the spread out top menu bar and the missing/weird image layouts.

Comment #4

vregouby CreditAttribution: vregouby commented 17 April 2012 at 13:40

subscribing to any new solution to this problem. Does Respond.js provides any kind of help ?

Comment #5

alederman CreditAttribution: alederman commented 17 August 2012 at 15:59

David, I am a total noob to Drupal. Further, I have not done any web design or development since at least the year 2000! I am learning what I can. I am experiencing the same menu loading issue. I would love to try your fix. But like the other person who posted, I am too inexperienced to know where i should put this code.

Can you help identify where this goes?

BTW, i have put the CSS3PIE module and library on my site. It didn't address the rounded corners, but there are some areas where it does now look better on IE8.

Thanks,
Adam