Blog and Web Design Portfolio of Adrian Pelletier » CSS http://www.adrianpelletier.com Thu, 15 Dec 2011 23:30:59 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 How I Chose to Say Farewell to IE6 http://www.adrianpelletier.com/2009/02/16/how-i-chose-to-say-farewell-to-ie6/ http://www.adrianpelletier.com/2009/02/16/how-i-chose-to-say-farewell-to-ie6/#comments Mon, 16 Feb 2009 16:09:48 +0000 Adrian http://adrianpelletier.com/?p=741 attention_ie6

The web community has been abuzz lately with talk about dropping support for IE6 and rightfully so! I couldn’t agree more for most sites, though I’m sure there will be the occasional client who either requests IE6 to be included in testing or it turns out their audience actually does use IE6 according to the site’s stats. Nonetheless, the majority of mordern websites could certainly do without supporting IE6. I would guess somewhere between 30% of my development time is spent fixing the crippled browser, if not more, and I’m looking forward to an enormous decrease in frustrations! It was always a frightful thing to fire up Windows and find out what horrors IE had done to a perfectly good site. I don’t blame the browser either; the problem was for too long (way too long) IE6 still had a large user group. Thankfully, those numbers are continually decreasing and I’ve decided this is the year I’ll be dropping support for IE6. If a future client requests the browser to be supported, that’s fine, but it will come at additional costs for the extra development and testing time.

As for how I’m going to ignore the outdated browser, I wanted to notify IE6 users of the issue rather than assume they already knew they were using an outdated browser. My solution was to create a warning message that gets inserted after the opening <body> tag via Javascript. Conditional comments ensure this message (as well as the HTML code within the body) will only appear for IE6 or previous versions. The message is styled in a very Microsoft-esque way so even the hardest-core IE6 user will be able to recognize it. :) Where does the link point to? Firefox, of course.

This site is currently using what I’ve dubbed the “Attention IE6″ script so go ahead and open IE6, then visit www.adrianpelletier.com. I’ve configured the script to work in conjunction with jQuery because that is the framework I was already using but I’m sure you could easily adapt it to fit your own needs. I’m posting a download link for anyone who cares to use this approach on their own website. The setup is very simple, just include the following conditional comment in the <head> of your document.

1
2
3
4
5

<!--[if lte IE 6]>
    <link rel="stylesheet" type="text/css" href="css/ie6.css" media="screen" />
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/attention_ie6.js"></script>
<![endif]-->

Next, download the following files and place in the appropriate Javascript, CSS, and images directories:

Download

And so, farewell to IE6. I cannot say that I will miss you.

Update 05/31/2009: I want to emphasize that this experiment is not a fix-it-all solution by any means. As stated above, a large majority of modern websites would have no problems dropping support IE6. For example, this site currently receives around 3% of users on IE6 and that number continues to drop. That’s not a large enough audience to worry about, in my opinion. There are, however, still specific scenario’s where IE6 maintains a much higher user percentage (i.e. corporate businesses that place restrictions on browser updates). In those cases, I do believe IE6 should be included in development testing.

I also do not advocate blocking or punishing IE6 users. My intentions with the above approach were to 1) inform the user that they are using outdated technology and 2) warn that the site may look as it should. However, I have not restricted the user’s access to the site’s content and would never recommend doing so.

I don’t consider this article to be the final answer, not by a long shot. However, I would hope that ideas such as these will at least strike up conversations and thoughts about advancing web development and what the next step should be.

]]> http://www.adrianpelletier.com/2009/02/16/how-i-chose-to-say-farewell-to-ie6/feed/ 18 CSS Type Set Featured on Smashing Magazine http://www.adrianpelletier.com/2008/12/11/css-type-set-featured-on-smashing-magazine/ http://www.adrianpelletier.com/2008/12/11/css-type-set-featured-on-smashing-magazine/#comments Thu, 11 Dec 2008 16:12:19 +0000 Adrian http://shiftingcreations.com/blog/?p=188 Cool!

]]> http://www.adrianpelletier.com/2008/12/11/css-type-set-featured-on-smashing-magazine/feed/ 0 CSS Type Set Goes Live http://www.adrianpelletier.com/2008/02/15/css-type-set-goes-live/ http://www.adrianpelletier.com/2008/02/15/css-type-set-goes-live/#comments Sat, 16 Feb 2008 02:30:51 +0000 Adrian http://s37188.gridserver.com/blog/?p=158 csstypeset_header

CSS Type Set is one of the projects I’ve been working on with friends, Travis and Tristan. The site serves as a hands-on tool for beginning designers and developers to interactively experiment with CSS in a WYSIWYG fashion. While similar concepts have been done before, our main focus was delivering a unique, easy-to-understand interface with instant CSS preview and output. When using the style controls, users are able to visually see how their entered text is affected and what code is used to achieve this specific look.

CSS Type Set went live on Wednesday and while we hope many will find the current version useful, there is already a list of additional features we’ll be implementing in the near future. Questions, comments, and suggestions are, of course, welcome.

]]> http://www.adrianpelletier.com/2008/02/15/css-type-set-goes-live/feed/ 6 SitePoint CSS Reference http://www.adrianpelletier.com/2008/01/28/sitepoint-css-reference/ http://www.adrianpelletier.com/2008/01/28/sitepoint-css-reference/#comments Mon, 28 Jan 2008 15:10:44 +0000 Adrian http://s37188.gridserver.com/blog/?p=154 I often recommend w3schools to anyone interested in learning more about web languages, specifically HTML/CSS. SitePoint now offers a similar resource which is up-to-date and very easy to understand. Both sites are worth the bookmark.

]]> http://www.adrianpelletier.com/2008/01/28/sitepoint-css-reference/feed/ 1 Decoy Fix for IE Duplicate Characters Bug http://www.adrianpelletier.com/2007/11/25/decoy-fix-for-ie-duplicate-characters-bug/ http://www.adrianpelletier.com/2007/11/25/decoy-fix-for-ie-duplicate-characters-bug/#comments Sun, 25 Nov 2007 06:05:21 +0000 Adrian http://s37188.gridserver.com/blog/?p=149 Among the countless IE annoyances, the duplicate character bug is one I’ve ran into more than once. Position Is Everything has a thorough write-up on the puzzling behavior, which seems to be triggered by HTML comments between floats and sometimes hidden elements. There are a couple different workarounds such as a -3px margin on the last float or using conditional comments in place of regular HTML comments. A colleague and I have found another way to fix this issue which has worked on every case so far and is a slightly easier/cleaner option.

If you place an empty element (it can be a p, span, div, anything) directly after the element which is duplicating characters and set the display to none in the CSS, the problem will disappear. What happens is because the last element within the floats is being hidden, there are no characters for IE to duplicate. For future maintenance, I’ve added a comment within the HTML (as shown in example) so that I’ll know why that extra element is there. I would never recommend placing unused elements within your HTML as it isn’t semantically correct but if you’re looking for a quick fix, this will do the trick.

HTML:

   ...
   <div id="footer">
      <p>This element was duplicating characters.</p>
      <span class="ie_fix"><!-- do not delete this,
      it fixes the IE duplicate characters --></span>
   </div><!-- end footer -->
</div><!-- end wrapper -->
</body>
</html>

CSS:

.ie_fix {
   display: none;
}
]]> http://www.adrianpelletier.com/2007/11/25/decoy-fix-for-ie-duplicate-characters-bug/feed/ 18