So I was coding something the other day, in which one portion uses an interactive map to display content for your region. So if you’re viewing from Ontario, you’ll see Ontario by default. If you’re viewing from BC, you see BC by default. Simple enough.
Well, simple enough in Chrome, Firefox, and Safari. Internet Explorer 8 was giving some hassle, though. Neither the province nor custom content was showing up by default. If you chose a province it would go there, but custom content still wasn’t there.
After more tracking and debugging than Internet Explorer should ever be worth, I isolated it to the url that was referencing the map itself.
https://www.sourceIwasusingcom/map.html?cov=content®=ON
Specifically, it was the bold part that was the trouble.
To break it down, the first chunk which should look familiar is the url for the website/page itself. The question mark (?) after indicates that parameters are being sent to this site. That’s how it knows to display specific things depending on the user. The first parameter being sent is called cov. Whatever variable I send will indicate what things I want covered, and display accordingly. Following that we have the ampersand(&). This is stating that we have an additional parameter to send. So we’re sending cov, and then something else. Said something else is reg, which indicates the region. In this case it’s Ontario.
So broken down, we’re saying “Load this page, display this coverage, and show it in the region of Ontario”.
That’s exactly what all the browsers do. Except IE. Searching and searching through the source yielded no results. Using the very handy and intuitive developer tools on Chrome and Firefox were no help, since there was no problem for them. Finally after slogging through the very user unfriendly developer tool of IE, I was able to isolate why it was having trouble.
Instead of https://www.sourceIwasusingcom/map.html?cov=content®=ON, IE was calling out https://www.sourceIwasusingcom/map.html?cov=content®=ON
Well that’s not supposed to happen.
For those unfamiliar with HTML Entities, they are ways of safely coding symbols used in… well, coding. As a basic example, back in the days before easy “do it for you” editors and interfaces, if you wanted to hard code a link to something on the web you type <a href=”link”>. Cool, but what if you want to tell someone how to do that? If you type it out, it will just become a link. So you use the code <, which is the HTML entity code for the Less Than symbol. And at the end, you use > for the Greater Than symbol. Every entity follows the same forma. The ampersand(&), the characters or numbers to define the symbol to display, and then the semicolon(;). Simple, stylish, sexy.
So back to the issue. The browsers handle this situation normally, because… well, they should. There is nothing wrong with the code. Sure, ® is close to ® (the HTML entity code for ®), but it’s NOT ®. It’s missing the semicolon. For whatever reason though, IE decides “Oh, you probably meant to put a semicolon there, and wanted ®. I’ll take care of that for you.”
Thanks, jerk. The fix for it mistaking my parameter as an HTML entity was ironically enough, to use an HTML entity. It was processing ®, so if we use the HTML entity for &, it should process that instead. Thus, &reg will output ® after all is said and converted. It was a small and simple fix, but quite a pain in the butt to isolate and figure out. It was nice of Microsoft to have a campaign to getting people off IE6, a few months back, but in all honesty, they should have just bumped it to EI6, 7, and 8. Do they even make money of Internet Explorer? Why do they keep making it, when everyone else does it better?
Also in hindsight, I could have switched the Region parameter to go first, and the Coverage parameter to second, since &cov; isn’t an HTML Entity, but the fact that I had to change anything at all is the problem here.
