Need help fixing responsive site in IE8

Although not really a Wordpress question... I'm having real trouble with some IE8 fixes.

This is a test version of the site:
http://totallyuk.com/gdc/products/

Works fine in Firefox, Safari, IE9, IE10...
First biggest problem is that all of my navigation links are white text on white background in IE8. Nothing I've tried seems to correct it. I've also noticed that the selection background color is white in IE8?! (I do have a custom purple background color for selection in browsers that support this).

The site is 'mobile-first' responsive so the default styles are for mobile, with media queries over-writing those for larger screens. I've got IE8 loading a separate stylesheet which is basically a copy of the 'desktop' query and this is mainly working.

Check the site in a 'proper' browser and you can see how it should look.

Any help would be massively appreciated!
Thanks

  • Patrick
    • Support Monkey

    Hi @Martin

    IE is a real PITA isn't it?

    I can usually help out in these types of situations. But unfortunately, my IE is acting up and won't even launch, dammit.

    So, I'll see if I can find another member of the support staff who actually has a working copy of IE to test with. :slight_smile:

    One question though: are you seeing this odd behavior in Windows, iOS, Linux, or...?

  • Marko Miljus
    • The Incredible Code Injector

    Hi guys,

    When I change this line in the wide-ie.css I get positive results:

    .sf-menu LI.current-menu-item A{
    	background: transparent; /*instead of #000;*/
    }

    @Martin, could you please give it a try and let me know does it work for you?

    Cheers,
    Marko

  • Martin
    • Site Builder, Child of Zeus

    Hi @Marko

    That's done it thank you so much!
    Why the h$ll would background: #000; produce a white background!?

    So that's fixed the main nav - I have the same issue in a few other places (sidebar menu & current item in sidebar like here: http://totallyuk.com/gdc/treatments/caffeine-fix/). I'm trying to hunt down the culprits now but if you happen to spot any, please do share!

    I can't help thinking that there is some underlying issue due to the fact that the selection ( ::selection ) background color is white?! I didn't think that was even possible in IE8!

    Finally, the text rendering is absolutely awful in IE8.. I tried a few variations of font-smoothing but can't seem to make it look any less ugly in IE8. Looks beautifully smooth on retina iPad and iPhone though! J

    Thanks again for you help..
    Any help on these other niggles would be really appreciated!

  • Marko Miljus
    • The Incredible Code Injector

    Hi @Martin,

    you're welcome!

    I am not sure what could be the cause of the issues but I used to the bugs like these in the IE :slight_smile:

    The issue with fonts and IE is common, you may read more about it here http://stackoverflow.com/questions/3694060/how-to-make-google-fonts-work-in-ie

    What you may try with Google fonts here (not sure does it work) is to make separate calls to every font weight like this:

    wp_register_style('sans_pro_300', 'http://fonts.googleapis.com/css?family=Source+Sans+Pro:300');
    wp_enqueue_style('sans_pro_300');
    
    wp_register_style('sans_pro_400', 'http://fonts.googleapis.com/css?family=Source+Sans+Pro:400');
    wp_enqueue_style('sans_pro_400');
    
    wp_register_style('sans_pro_600', 'http://fonts.googleapis.com/css?family=Source+Sans+Pro:600');
    wp_enqueue_style('sans_pro_600');
    
    wp_register_style('sans_pro_700', 'http://fonts.googleapis.com/css?family=Source+Sans+Pro:700');
    wp_enqueue_style('sans_pro_700');

    In regards to the same bug in the sidebar, I've found the right line again in the style.css

    A.currentitem{
    background: transparent; /* instead of #333;*/
    }

    Cheers!
    Marko

  • Martin
    • Site Builder, Child of Zeus

    Thanks again @Marko Miljus J

    I'll look into the font rendering shortly but am desperate to sort the background-color issues first..

    Your fix does remove the background color but I actually need a grey background color (for the 'active state' of the link.. Surely this should be possible and why is it displaying a white background color, rather than the color #333?

    Any ideas?

    Thanks again for your help

  • Marko Miljus
    • The Incredible Code Injector

    Hi @Martin,

    I think I found possible cause of the issue.

    Please check the first lines in the style.css

    html, body{
      zoom: 1;
      filter: alpha(opacity=100);
      -webkit-font-smoothing: antialiased;
      opacity: 1;
    }

    If you erase this line filter: alpha(opacity=100); the white backgrounds are gone but some parts become red :slight_smile: So, I guess, you just need to change everything "red" in the css to something else like #000;

    I am just not sure what could be the reason of doing that this way.

    Hope it helps :wink:

    Cheers,
    Marko

  • Martin
    • Site Builder, Child of Zeus

    Marko you are a legend - I could kiss you lol!

    The red is there because I added color:red !important; all over the place in the IE stylesheet, trying to figure out where the problem was.. I'll go through and get rid of those now.

    Thank you so much for your help, this was driving me crazy!

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.