XF In a Container

Anthony Parsons

Well-known member
I don't use IE, so I was wondering if anyone could tell me if this works in IE correctly please.

It is just XF standard in a container for those who wish to have their site that way. It took all of about 15 minutes to actually do it... just no idea how IE handles it due to border radius.

I fussed a little with some padding and border adjustments internally so it looked a little better... though it is all standard XF pretty much.

I have included a TMS and non-TMS version. Most of the changes are style properties, and still only a handful at that.

I don't really plan to release it as a supported style, as it is just default XF... more just to help anyone who struggles getting XF into an isolated container.

I know it works in Safari, Firefox and Chrome without issue, logged in as a member, mod / admin or guest. I know IE is a real pain though.

Screen Shot 2012-04-20 at 3.17.44 PM.webp Screen Shot 2012-04-20 at 3.18.06 PM.webp
 

Attachments

I'm not going to install it, but assuming you're using CSS3 commands such as border-radius then it will work fine in IE9+ but completely fail in IE8. If you have it installed on an open test server anywhere I can do a more detailed analysis for you.

And actually, by "completely fail" all I mean is IE8 and below will probably just ignore the border-radius property and any other CSS3 stuff and you'll just end up with squared corners.

I have just found a very clever tool though that you could easily implement (or anyone interested in using this live) called CSS3 PIE: http://css3pie.com/

Looks like by simply uploading the PIE files and adding this CSS: behavior: url(/PIE.htc); you will enable the rounded corners to work as well as several other CSS3 goodies such as gradient, shadows and advanced background images.

EDIT: Looks really nice by they way, from your screenshots :)
 
If you have a live example somewhere I can test it out in IE8, but my guess it will most likely look the same, except square and no shadows...

CSS3 Pie is a nice tool, but I am afraid to use it, cause it could affect performance in IE. I would be very much interested to hear some experiences with it, though. I would also think that applying
Code:
body {
behavior: url(pie.htc) }
will make all child elements of body inherit the behavior.
 
Well PIE is installed and isn't working for some reason! Not sure why, will keep looking.

Yep, there might very well be something within XenForo that stops it from executing and doing what it needs to do.

Something happens, I believe things shrink by 20px but there's certainly no rounding going on.
 
Hmm, it might be due to the quirkiness from behavior:
Of course you will need to adjust the path to match where you uploaded PIE.htc in step 2. Note: this path is relative to the HTML file being viewed, not the CSS file it is called from.
And:
The behavior URL

IE interprets the URL for the behavior property relative to the source HTML document, rather than relative to the CSS file like every other CSS property. This makes invoking the PIE behavior inconvenient, because the URL has to either be:
  1. Absolute from the domain root — this makes the CSS not easily moveable between directories — or,
  2. Relative to the HTML document — this makes the CSS not easily reusable between different HTML files.
I have had this problem before, I think I placed the htc in every conceivable folder, then removed them one by one to identify which would work.
 
I explicitly defined the URLs full path, which should work even better than that, and it still doesn't work.

Something different happens compared to not having it enabled, but just not what you'd expect.
 
Yeah, it does work, you see the CSS3 layor is applied, but it doesn't work on child elements. Seems you have to use it on every css rule.
 
Thanks Yorick... I realist IE8 and below will square things up, which is expected... was just hoping it was ok still and nothing was breaking, which seems to be ok from your images.

The reason why border radius always scares me with IE, as most would know, you often compensate with inner radii due to overflow:hidden failing to hide inner elements, thus IE concerned me a little whether things would all pan out correctly with border changes so everything looked good with radii vs. IE squared.
 
Thanks Yorick... I realist IE8 and below will square things up, which is expected... was just hoping it was ok still and nothing was breaking, which seems to be ok from your images.

The reason why border radius always scares me with IE, as most would know, you often compensate with inner radii due to overflow:hidden failing to hide inner elements, thus IE concerned me a little whether things would all pan out correctly with border changes so everything looked good with radii vs. IE squared.

The way I see it anyone using IE8 or below doesn't care about an optimal web experience anyway, or are so are so untechnical that they wouldn't notice the difference. I think most developers (myself included) support IE8 and up, but for IE8 they only care that it shows without serious errors and don't bother with the fancy stuff.
 
The way I see it anyone using IE8 or below doesn't care about an optimal web experience anyway, or are so are so untechnical that they wouldn't notice the difference. I think most developers (myself included) support IE8 and up, but for IE8 they only care that it shows without serious errors and don't bother with the fancy stuff.
This.

I will out of curiosity sometimes check a site in compatibility view. If there's anything completely broken then I might add a conditional stylesheet but pretty much IE7 and below is a no no.

We have to draw a line somewhere we can't let IE hold us back forever.

Google Analytics is invaluable. This helps you gauge a consensus of your browsers software. Do you really want to be working for hours getting stuff like this to work of less than 5% of your traffic is affected?

You could also show a banner to visitors with an older browser telling them it's time to upgrade to Chrome. That's handy too
 
This.

I will out of curiosity sometimes check a site in compatibility view. If there's anything completely broken then I might add a conditional stylesheet but pretty much IE7 and below is a no no.

We have to draw a line somewhere we can't let IE hold us back forever.

Google Analytics is invaluable. This helps you gauge a consensus of your browsers software. Do you really want to be working for hours getting stuff like this to work of less than 5% of your traffic is affected?

You could also show a banner to visitors with an older browser telling them it's time to upgrade to Chrome. That's handy too
I detest compatibility view, it makes it so that you have basically 3 + 2 different browsers only using IE9, plus the "original" old versions. I also heard some rumors that the page is rendered differently based on how compatibility view is enabled as well, but I never saw that claim verified. It is a nice tool to use, but at the same time adds a layer of frustration. If I see a major error in CV, I fix it, otherwise I don't bother. Also not sure if compatibility view might render pages differently depending on your IE version (e.g. CV IE7 in IE8 will render differently than the same settings in IE9), as it only emulates, it does not have the engines available. I also would recommend using the meta tags to enable the most recent IE version, at least that way you can override some quirky user settings.

Personally I think IE8 is a must, mainly because IE9 is not available for XP, and this is still widely used. I don't bother adding in all the fancy stuff though, but I am using browser-update.org to warn users that have old browser, just not for IE8.
 
Are you guys really not seeing IE 6/7 in your tracking any more?

About 10% of our i.e. traffic is still IE7 (so about 3% of our overall traffic according to GA).
 
8% of our traffic is IE. If you drill that down that equates to about 2% of our traffic being IE8, 0.34% being IE7 and 0.05% being IE6.

We have no worries, really :)

But it depends on your audience. Our audience entirely consists of gamers. They are going to be ahead of the game so to speak in terms of software. So ahead of the game in fact that 0.3% of our visitors are from the future and using IE 999.1 (no idea why that's there lol).

But I guess if you're seeing higher figures, the best thing you could do is try to educate them. ESPECIALLY those that are on IE6. IE6 has no place in the modern world. I'd spend more time trying to educate them and entice them away from IE than I would trying to fix the problems it causes.
 
Are you guys really not seeing IE 6/7 in your tracking any more?

About 10% of our i.e. traffic is still IE7 (so about 3% of our overall traffic according to GA).

Yeah of course they still stop by (nowhere near 10% for me though), but those people obviously don't care for an optimal web experience.

Sooner or later you have to start deprecating stuff otherwise you're stuck with it forever.
 
Yeah of course they still stop by (nowhere near 10% for me though), but those people obviously don't care for an optimal web experience.

Sooner or later you have to start deprecating stuff otherwise you're stuck with it forever.

I think it's more a case of we have a lot of office workers who are tied into using IE 6/7 at work (regardless of how much they value their web experience) and I'm surprised this isn't the case for more of you.

I thought IE7 was still pretty standard in a lot of workplaces.
 
I think it's more a case of we have a lot of office workers who are tied into using IE 6/7 at work (regardless of how much they value their web experience) and I'm surprised this isn't the case for more of you.

I thought IE7 was still pretty standard in a lot of workplaces.

For me this again goes back to sooner or later having to deprecate support. It's a shame that there are companies that still us WinXP with IE 6 or 7, but I personally am not going to let their inability to stick with the times be a limiting factor to the work I do.

Anyway, don't mean to hijack Anthony's thread to have a discussion about what IE versions to support, so I'll leave it at that.
 
I thought IE7 was still pretty standard in a lot of workplaces.
Any IT department who still allows IE7 to be used on their desktops is crazy.

I work in an IT department and we immediately upgrade to the latest possible version of Internet Explorer. It does screw up some intranet sites, of course, but where possible we redesign them to work properly or force compatibility view.
 
Top Bottom