Hi There,

There is no magic bullet unfortunately, IE is a pain in the neck and will be for a few more years to come, there are some ways you can write CSS specific to versions of IE, by using conditional stylesheets, find out more about them here:

http://css-tricks.com/how-to-create-an-ie-only-stylesheet/...

The above article will give you a good overview on how to write conditional CSS that is only picked up by IE.

Another more modern approach is, to include the Paul Irish method for writing conditional styles, the best thing about this way is you dont need additional stylesheets for IE, you can write your IE specific CSS right in your main stylesheet, what you need to do is include the following as your doc type:



Then in your style sheet all you need to do is prefix your css with an IE class like so:



So in the above example IE7 would display the 1px black border on the element with a class of "MyAwesomeStyle" BUT it would be confined to IE7 only, chrome, safari etc would display as the original style without the .ie7 class applied.

So when you check your site in IE and find some element is not playing ball, just write a specific piece of CSS to fix the problem.

The thing to remember is, its ok to not have your site pixel for pixel identical in all browsers, theres no excuse for it being broke, but some minor cosmetic differences are inevitable, one other word of advice I would give is check your work in IE on a regular basis, dont wait until completion to look as you may have a lot of sorting out to do, regular checks will mean you can write your conditional styles on the fly, also where possible try to check in an actual real world copy of IE running on PC hardware, emulators etc are ok but they are renowned for their inaccuracies.

Hi,
Many thanks for the reply!

You mentioned the Paul Irish method which I thought I'd seen somewhere before. Its part of Zurb's Foundation Framework and I already have it in my themes header.

I'm going to try out the Paul Irish Method first as its already in my header. Is there a prefix class for IE in general, or would I have to use the following?:
.ie7, .ie8, .ie9, ie10 .MyAwesoneStyle {
border: 1px solid #cccccc;
}

Either way it look as if I have a mountain of prefixes to climb.

I probably not the foundation.css stylesheet so must be something in my main.css

God knows where to start! Any guesses as to what I need to look at?

Hi There,

As you already have the Paul Irish method in your header it makes sense to go with that, tbh its my preferred method, I cant remember the last time I used a full blown conditional stylesheet.

There is no specific IE class, but you can stack them a little like you said, except it would be more like:



It may be the case that IE8 behaves and IE7 needs some encouragement, so you probably wont have to stack your CSS like that too often.

If your using Zurbs foundation 4, there is some code available to get the grid working with ie8, you can find it here:https://gist.github.com/zurbchris/5068210...

As noted, the CSS support of IE makes web developers pull their hair out.

So, these suggestions already provided can help you achieve greater stability on IE.

Looking forward, here are some thoughts.

If you can stick to a common core of CSS which operates essentially the same across browser families, that helps minimize troubles. Although most modern CSS books attempt to address these issues along the way, the following book addresses them comprehensively:http://www.amazon.com/Pro-CSS-HTML-Design-Patterns/dp/1590598040/re...

The presentation tends to use native CSS constructs first, and hacks only as a last resort.

The 960 Grid maps well to C5's engine, and I typically use that or a more concise approach based on that. Its method of defining columns works for various page types is consistent across IE7+ and more standards-compliant browsers. If you're interested, there's a free C5 addon:http://www.concrete5.org/marketplace/themes/blank-960-grid-system-t... .

And, the main site for the style is a good resource for use:http://960.gs/

All the best.

So it is the Foundation framework that is not IE friendly. A quick google has thrown up a few problems. I'm surprised that my site doesn't work in IE9, most of the issues I've come across are either in IE7 or IE8.

Unfortunately I'm using Foundation 3. There seems to be some IE fixes and support for Foundation 4, so I could migrate.

Please excuse my ignorance but would Respond.js be of any use?

I have seen the 960 grid and am at odds as to wether to rebuild the pages using this framework.

On the other hand I've spent far too long on this community project and might see if I can raid the parish bank account and outsource the problem to someone with more experience.

It's hard to justify starting over on a new css framework when you apparently are so close.

I've not worked with Foundation, so I'm relying on 2nd hand info.

You're likely aware of this comment on Foundation in the C5 forums:http://www.concrete5.org/documentation/how-tos/developers/using-zur... .

And, it looks like V4 might address your issues -- of course mapping the new classes/IDs in the framework to your page types...

All the best...

Yer, I agree, starting over is probably going to be more work than fixing with what you have, personally I would persevere.

... I knew that was going to be the answer!!! I'm so close I may as well persevere.

I did look at that link once upon a time plus a load of related posts on this forum. With regard to the link. I haven't implemented renaming .container and .row, so would renaming these classes to .c5row or .c5container make any difference?

Would the ideal solution be to migrate the site to Foundation 4?

Foundation has been a curse. Its clashed with just about everything including the add ons that I've bought.

I need a drink!!! I have a choice of havana Club, Bison Grass Vodka or Plymouth Gin. Maybe a cocktail of all 3!

This is my guideline.

If I just need to take a beath of fresh air, work on the existing.

If I need a drink, time to migrate to the latest version.
'
Reviewing the CSS of the new version should allow you to map pretty straightforwardly. It may be that there's an ID'd div that the rest is nested in, so, it seems just worthwhile to go in with an open mind.

Well I think the end is in sight (fingers crossed).

I managed to locate a PC at work today and clicked the compatibility icon in IE 9. The website magically displayed as intended. However I can't tell if my site works with or without compatibility view.

I'm looking for ways to fix my site without having to resort to any rebuilding.

Does my site display OK for anyone here using IE? If not any ideas whats happening?

http://www.laxtonvillagehall.com...

Cheers
P

Your site displayed fine for me in IE9, without having to enable compatibility mode. The responsive side of things appeared to work well too. I didn't review everything, and I noticed there was a little wiggle on the menu when you rolled over it. but gee, I'd say you are pretty close in IE9!

I just wanted to add a few tips myself to this thread:

- Sometimes difference between browsers aren't because of bugs us such, but because of different default styling for elements. So there are some 'reset' stylesheets that people include on sites to reset styles back to a common baseline. If you have a look at the Foundation docs, at their HTML Page Markup example, you'll note that they've included 'normalize.css' before linking in foundation.css. On your site I'm not seeing a reset. At this point, you could see what happens if you include one and then adjust the styles that it affects, or as it's late in the game it could be something you just try on your next web project. :-D
(some people are a bit anti reset stylesheets, but I've found that normalize.css has only brought me an easier cross-browser debugging experience)

- The IE9.js script that is being pulled in for old IE browsers, is at the moment outside your head element, you should move it to be inside the head. I can't really comment on that script, as I've never used it myself - but I've got a feeling you don't need it in this case as you are loading a Modernizr script (which includes code to make IE8 recognise HTML5)

- I wouldn't worry about IE7 anymore, it's just not worth it.

The flickering was simply down to conflicting padding in main.css and custom autonav css... not that I spent hours yesterday researching various causes/solutions!

I typically code using Chrome as my main browser of choice. I'd say my sites are about 95% in IE 8+ when doing so.
I'll also use a plugin like ie7jshttps://code.google.com/p/ie7-js/... ... I'd add the js to the head... here's the quick code and what it does...
Upgrade MSIE5.5-8 to be compatible with modern browsers.

You'd be amazed at how many things this fixes (padding issues, png issues etc.)
Note - IE 6,7,8 do not handle media queries correctly, so you likely won't get responsive. I see the most common thing to serve a 960 style sheet to just IE to override any responsive css code.

Hope some of this helps!

A big thanks to everyone for their input.

It work IE9 albeit with a wiggle on the menu when you hover over link. I'm not sure what that is about!!!

Could the flicker be to do with background images used with my nav and menus???

As part of the design the menus have an asymmetric design which is basically a white triangular png overlapping the background image.


No luck with IE 8 yet. Is it worth supporting the 5% of people who still use it?