Wedding gets trashed in IE8 :-(

HTML & CSS
1

Buongiorno from 8 degrees C wet & foggy Wetherby UK…

In IE 8 this page www.davidclick.com presents layout problems all of which are illustrated here:
http://i216.photobucket.com/albums/cc53/zymurgy_bucket/ie-8-layout-glitch-2_zps4d2c85f0.jpg

Whilst i am trying to get hold of the original developer It would be great if anyone could spot whats triggering the illustrated issues.

Thanks in advance,
David

2

Hi,

Regarding the menu have you enabled media queries to work in IE8?

I didn’t look at your code yet as I am in a bit of a rush but it looks as though you haven’t added media query support with the js polyfill.

http://code.google.com/p/css3-mediaqueries-js/

3

Hi there,

You have a mistake on your code, and this is one big mistake:


.am-wrapper:hover .overlayInner {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha([B]Opacity=1[/B])";
    filter: alpha([B]opacity=1[/B]);
    padding-top: 0; }

and should be like this:


.am-wrapper:hover .overlayInner {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha([B][COLOR="#FF0000"]Opacity=100[/COLOR][/B])";
    filter: alpha([B][COLOR="#FF0000"]opacity=100[/COLOR][/B]);
    padding-top: 20px; }

and one more thing, also need to hide/show the “hr” on hover copy/paste the following code


.am-wrapper .overlay hr {
    visibility: hidden;
}
.am-wrapper:hover .overlay hr {
    visibility: visible;
}

also if you want to have that transparent background you should do some hacks to work in IE8, check the code below


.ie8 .am-wrapper:hover .overlay  {
    background:#000;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
}

I think its a pretty cool callback for IE8.

For me looks good in IE8 and IE9 ( You had some issues with IE9 also … )

4

Hi Miron,

Bi thank you for your reply, I’ll aplly fixes soon and will post back here for an update :slight_smile:

5

Well spotted :slight_smile:

6

Big Thank you Bi, your solution has got rid of the odd horizontal klines in IE 8 :slight_smile: Thank you so much for taking time out to fix this on my behalf :slight_smile:

7

Thank you so much, your solution fixed an onging headache!

8