Archive for the 'css' Category

Internet Explorer 8 and Future Proofing your Website

Monday, March 3rd, 2008

Previously I wrote Internet Explorer 7 and Future Proofing your Website which was a primer for preparing the imminent release of Internet Explorer 7. Now we will soon see Internet Explorer 8 which will stir things up again. A couple of months back Microsoft floated the idea of creating multiple standards modes, with the more modern implementation being an opt-in mode that required pages to include a meta value that IE8 would use to switch over to the new modern standards mode. The proposed solution was widely rejected.

Today the IE team announced through the IEBlog, in post a entitled Microsoft's Interoperability Principles and IE8, that Microsoft is withdrawing that idea. There will be only two modes in IE8, quirks mode and standards mode. Initially Microsoft did not want to break all of the pages that were expecting the IE7 standards mode, much like pages were expecting IE6 standards mode when IE7 was released. Now after significant feedback from the community Microsoft will bite the bullet and happily move forward with web standards even if it means breaking many sites that should be updated anyway.

All in all this should not be a big problem. Given that Best Practices for CSS encourage developers/designers build their pages and sites with the most standards compliant browser first and then adapt lesser compliant browsers these cross-browser issues should not be much of a concern. Yet many sites were not built with techniques that are safe across browser versions. Techniques like the box model hack enable support across multiple browser versions that support different levels of web standards. Leveraging how CSS works in this way is how you can future proof your web site.

(more...)

Making Your Blog Printable

Monday, July 16th, 2007

I read several great blogs regularly and when I find something is really worthwhile, especially when it is long, I like to print it out and find a good chair to read it. It is just easier to read off paper than staring at a screen. But not many blogs are print-friendly. Now you could offer a print icon that sends your readers to a special page that just gives them the content that should be printed, but all of that work really is not necessary.

What you can do instead is add an additional stylesheet to your blog with the media attribute set to print instead of screen. For my blog I call this special stylesheet print.css and I have it hide the sections of my blog which are only useful when viewed on the computer, such as the header, footer and navigation.

For the blogs I read that do not have print-friendly pages I use jQuery and Firebug to trim the unwanted portions of the page that I do not want printed by setting the display property to none for each element I want hidden. It works some of the time but nearly as well as using a print stylesheet. By making this print stylesheet available on your blog you can do this extra work for your readers.

Using Overflow for Inline Frames

Saturday, July 14th, 2007

I have always wanted to know how some of the fancy layouts that Google uses actually work. The mail and reader applications both have sections within the page which I always assumed where just inline frames with the iframe tag which I personally avoid. But I recently discovered that you can achieve the same affect using div tags with the CSS value for overflow set to auto or scroll while the height is also set.

(more...)

The Near Future of ASP.NET

Saturday, May 5th, 2007

It won't be long before we can get our hands on the final release of Visual Studio "Orcas" and .NET 3.5. For those of us who did not attend MIX '07 you can still get a sneak peak. I watched Web Development Using Visual Studio "Orcas" by Omar Khan and I am quite impressed with the changes they are going to include.

(more...)

Web Development Tools for the Power Developer (Revised)

Monday, April 2nd, 2007

Six months ago I wrote Web Development Tools for the Power Developer which covered the progress that has been made with tools for web development. It got picked up by a few popular websites and through the various comments I learned about a few additional tools I did not know about previously. The two most useful bits that I found were Firebug and jQuery.

You can see the power of Firebug and jQuery in a demo by John Resig which I have leveraged heavily since I have seen the video. I used his example to pick apart some effects used by the ASP.NET AJAX Toolkit as shown in my own video. And now my newest website, LinkMindr.com, is using jQuery as the main engine for the key functionality. Look at the source and you will be surprised that the Javascript running the website is under 40 lines of my own hand written Javascript especially for what it does.

(more...)

Modern Web Development

Monday, January 8th, 2007

There has been some IE7 bashing on Digg.com lately. Sure it can be fun, but the recent rants were just inaccurate. They were uninformed of the history or IE5, IE5.5, IE6 and the corrections which went into IE7. Some context is necessary here. Just consider that Netscape 4 was dominant when IE6 was released. The Javascript and CSS support in Netscape 4 was horrendous when you compare it to IE6, which stood still for 5 years. Given what we have managed to do with IE6 you have to give the IE6 developers some credit. Understanding the history and the recent changes will help you cope with the changes over the coming years.

(more...)

Colorizing Code in Wordpress

Sunday, October 1st, 2006

Last week I had an exchange with Geoff over code formatting in a blog and suggested it could be done with Javascript. We both happen to run Wordpress for our blogs and I have also been looking for a way to insert stylized code into blog entries, so I helped him to put together a solution. Pretty soon we had a solution. Initially I suggested that it could be done with a bit of Javascript. He considered creating his own new script, but like any pragmatic developer, he looked and found an existing solution called dp.SyntaxHighlighter instead of starting from scratch.

To get the dp.SyntaxHighlighter working with Wordpress you have to handle a couple of details. First, assuming you have turned off the WYSIWYG edit mode, Wordpress adjusts your text by encoding certain characters (such as &, < and >) before sending it to the web browser. Second, Wordpress places break tags (<br />) at the end of each line. But Wordpress does have support to get around these details.

(more...)

Web Development Tools for the Power Developer

Sunday, September 10th, 2006

[ See Revised List ]

Firefox Extensions Over the past few years the available tools for web development have become quite powerful. As Firefox became more popular the number of useful extensions grew quickly. And many of those extensions are targetted at web development. Improvements have not been limited to Firefox. Since the release of ASP.NET 2.0 and the renewed energy in the development of Internet Explorer there have been significant improvements to the Microsoft offerings.

And this all comes down to exposing the internals of the web browser to the web developer to essentially allow us to debug how the web page is being rendered. A couple of years ago when a designer set a rule in CSS and expected it to be applied to a specific element there was no way to confirm that it worked except for viewing it in the web browser. And sometimes a rule would work in one browser but not in another. To correct it the designer had to place blatantly obvious markers in the CSS rules, like a red background, and continue to guess at changes which may get the style to be applied to the web page.

The same has been true for Javascript. With Firefox you could use the console to view errors, but few people went beyond that. With Internet Explorer it was possible to start the Visual Studio debugger and walk the code step by step, but you had to have a licensed copy of Visual Studio to do so. Here is another area where things have changed for the better.

(more...)

The Wait for IE7, Good or Bad?

Tuesday, September 5th, 2006

Internet Explorer 6 was released in 2001. Now 5 years later we are finally getting a new release with corrections for rendering bugs among other changes. I believe the fact that we have waited so long for a fresh release has been both good and bad.

It has been good since we have not had to continually adapt to a new release while attempting to cope with bugs in older versions. IE6 has become the devil we know. Those of us who have developed websites the past 5 years are intimately familiar with the quirks of IE6. You can even view a list of known bugs with suggested workarounds to help you resolve those difficult problems. This content has been collected over time based on experiments done by independent web developers. Occasionally Microsoft has helped develop workarounds with organizations like WaSP.

(more...)

IT Future Proofing, and Ajax

Friday, September 16th, 2005

My interest in certain technologies is fundamentally driven by my need to "Future Proof" my career. Will investing my time and money in "X" technology or "Y" language benefit my career in the long run? And will I be drawn into defending "X" and "Y" when the next big thing comes along simply because I am not prepared to write off my investment? My recent observations is showing this is happening with Java and also .NET...
(more...)