ie8 CSS issue

[deeve007]

Okay, now to address CSS issues I’m having in ie8…

This page best example of the two issues: http://goose-view.com/styleliberation/about

Issue #1: Main menu

It seems like ie8 is simply ignoring the styles in the child theme that overrule the parent theme styles. Working fine in other normal browsers and ie9 and above.

Issue #2: Main image

ie8 seems to be ignoring the larger images that should display for larger screened devices, and also media queries are firing too early so bigger dimensions are appearing sooner than they should. Again working fine other browsers…

Any ideas folks? Thanks in advance.

[Atelierbram]

Don’t see any conditional included stylesheets for IE in the source code.

[Atelierbram]

Removed that bit, that was silly of me, … Yes you do have conditional classes on the html-element. Supposedly they kick in, have you tested if they did? Something like ie8 body { background: red;} or something.

[Atelierbram]

Why would I need conditional stylesheet, it should be seeing the styles every other browser sees but it is not.

You mean also styles defined within media-queries?

Just quickly checked your stylesheets, and are not seeing any ie8 .whatever-element styles defined. Like this, IE8 is going to skip the media-queries. Also don’t see any javascript solution for this included either, but maybe I’m overlooking something …

[mcjohnst]

Are you testing on an actual IE8 install or an emulated one ?

[Alen]

This is how it looks on actual XP computer using IE8
<br>

[Alen]

This guy.

[Senff]

The styles in the menu don’t work because you have them in a media query:

@media screen and (min-width: 45em)

IE8 doesn’t support media queries and will therefore just ignore those styles.

Also the reason why the larger images don’t work — there are some styles for those in a media query.

This guy.

?

[Senff]

I finally found out what it is: ie8 isn’t recognising the class by itself (.sfmenu), I had to add the tag element in front of it (ul.sfmenu). Bloody IE!!

I think it’s not an IE issue, because outside of the media queries, .sfmenu is recognized just fine. It’s rather an issue with respond.js (which I find highly unreliable myself).

When I check your site in IE8 now, the menu still doesn’t look good.

[deeve007]

Did you do a hard refresh?

And the media queries are working fine for everything else, and just adding the element to the class had it working, so not sure if it’s respond.js or ie8. I’d lean towards IE knowing its history, but will be testing other scripts at some stage just to make sure.

[Senff]

I did a check on a computer that never accessed your site before, so it’s not cache or anything.

If you stick with your idea that IE is the problem, then you should avoid media queries in the first place altogether. Keep in mind you’re trying to add functionality to an old browser that doesn’t has that modern functionality natively.

[deeve007]

I did a check on a computer that never accessed your site before, so it’s not cache or anything.

Then I can’t say. It’s looking fine on Browserstack, multiple times. If client (digital agency) also sees that it’s fine, then I’ll be satisfied.

If you stick with your idea that IE is the problem, then you should avoid media queries in the first place altogether.

I avoid throwing the baby out with the bathwater.

[Atelierbram]

It’s like trying to get Blood outta stone

[Author]

Posts