JP Hellemons Building E-commerce web applications

CSS media queries are common these days. So I googled an example which I could modify to my needs for a nice cross browser, cross device compatible web application. I came up with: @import url("/css/desktop.css") only screen; /* Smartphones (portrait and landscape) ----------- */ @import url("/css/smartphone.css") only screen and (min-device-width : 320px) and (max-device-width : 480px); /* Smartphones (landscape) ----------- */ @import url("/css/smartphone-landscape.css") only screen and (min-width : 321px) and (max-width : 800px); /* Smartphones (portrait) ----------- */ @import url("/css/smartphone-portrait.css") only screen and (max-width : 320px); /* iPads (portrait and landscape) ----------- */ @import url("/css/ipad.css") only screen and (min-device-width : 768px) and (max-device-width : 1024px); /* iPads (landscape) ----------- */ @import url("/css/ipad-landscape.css") only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape); /* iPads (portrait) ----------- */ @import url("/css/ipad-portrait.css") only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait); /* iPhone 4 ----------- */ @import url("/css/iphone4.css") only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5); This looks great, but… it didn’t work in IE8. I have spend a long time searching the web, why it didn’t work. I added a body { margin-top: 0px; } as was suggested in this StackOverflow thread. But that didn’t work either.     I verified that the css was linked correctly. I was loaded, only the import wasn’t. There was also a resource online which said that the CSS imports should be first in the document for Internet explorer. But that also did not matter. After browsing for a while, I stumbled upon an MSDN page. http://msdn.microsoft.com/en-us/library/ie/ms530768%28v=vs.85%29.aspx and there it was. –evan— pointed out that according to the w3 organization. So that user agents can avoid retrieving resources for unsupported media types, authors may specify media-dependent @import rules. These conditional imports specify comma-separated media types after the URI. source: http://www.w3.org/TR/CSS2/cascade.html#at-import So this is in CSS 2 which became a recommendation in 1998. it was started in 1997 and Internet explorer 8 was released on 19 March 2009. That is over 10 years later! So removing the ‘only screen’ from the CSS I posted earlier fixed it! Thank god for standards!

Years ago, everybody made a column layout with an Html table. If you do not remember why tables are bad, I recommend reading these nine reasons not to use tables. Today we use (external) cascading style sheets to solve it. Most of the time with the famous ‘faux columns’ trick. <div id="left"> leftside </div> <div id="right"> <div>block one</div> <div>block two</div> <div>block three</div> </div>  More...

I recently stumbled upon a small bug which had to do with a part of C# code that cleans up an HTML string which came from a database. This string is used as output on the web and therefore needs to be w3c and tidy! I always used Tidy.Net for it. Really liked it and decided to check for a new version of that library while I was doing some code maintenance. That library's latest release date is from June 2005! that’s over 6 years old! So I decided to go and look for a better solution. I found the TidyManaged project from June 2010. I wasn’t directly motivated to migrate to this library so my next step was a showdown between the two. More...