If you are running Vista try IETester, which is a free WebBrowser that allows you to have the rendering and JavaScript engines of IE8, IE7, IE 6 and IE5.5 on Windows 7, Vista and XP. I’ve been using this on my Vista machine, it crashes now and then, but it’s a great tool.

Both of these tools are free!

A common question in class is “how do I overlap images and still see the background?” The answer, you use some type of transparent image. Traditionally we used a transparent GIF, but the quality isn’t so great. PNG has really become the preferred image format for transparency. PNG 8 gives you a transparent image, but you may see some white pixels around the edges of the image. PNG 24 transparent images are crisp and clean, but sometimes a bit bloated. Still PNG 24 now being widely used.

Unfortunately, it is well documented that transparent PNG 24 images will not display properly in Internet Explorer 6 without applying some type of fix. Instead of getting a truly transparent image you will see a blue background around the image like the image above. I’m not going to go into the technical reasoning for this problem, this is an article for beginners and there are numerous fixes and articles for this issue, Perishable Press has a great write up on the subject.

I’ve prepared a page that shows both of these problems; this page was created from the Six Revisions’ tutorials How to Create a Grunge Web Design Using Photoshop and How to Code a Grunge Web Design from Scratch – great tutorials, but I’ll write about that later. If you open my PNG transparency example page in Internet Explorer 6 you should see that the header image “Get Your Hands Dirty” has a blue background – not good. If you look at the heading “Featured Work”, a PNG 8 image, you should notice, albeit subtle, little white dots around the edges of the image – not good either. If you look at the heading “About this Website”, a transparent GIF, you will also see the little white dots around the edges of the image.

Now if you look at my example with PNG 24 images and a JavaScript fix applied in Internet Explorer 6 you will see that all of the images look great.

So how did I fix this? If you read the article PNG Fix for Internet Explorer from Perishable Press you will see that there is a general method for fixing PNG 24 images in IE 6. You’re going to need to create an IE specific CSS file, this file is linked in the head section of your HTML document after your regular CSS link within conditional comments.

<link href="styles.css" rel="stylesheet" type="text/css" />

<!--[if lt IE 7]> 

<link rel="stylesheet" type="text/css" href="ie-specific.css" /> 

< ![endif]-->

The conditional comment starts with

<!--[if lt IE 7]>

This tells the browser that if the visitor is using a browser version older than IE 7 then use this special CSS file in addition to the styles.css file. It doesn’t replace the styles.css file, it just allows you to send specific CSS rules to IE 6.

In the ie-specific.css file you will need one declaration for the transparency fix.

.png { behavior: url(png.htc); }

You created a class called png. Behavior is a CSS property that allows you to attach a script to an element, class, or id. The png.htc file contains a JavaScript that will fix the PNG 24 display issues in IE 6 and earlier versions. You can learn more about this property and htc files in the SitePoint Reference.

You also need a special JavaScript file, the htc file. You will find this file all over the Internet, but here is a zip of the png.htc file that I used. You will also need a transparent GIF file, this is a 1px x 1px transparent GIF that the HTC file uses.

To make this fix easier to use, the files ie-specific.css, png.htc, and transparent.gif should be placed in the same folder. If you place them in different folders you will need to edit the paths in the CSS file and the HTC file. This isn’t really a big deal, but sometimes it can cause problems for the beginner.

Ok, you have got your CSS file created and linked using conditional comments, your HTC file and transparent GIF files are in the same folder as your CSS and you preview your page in IE 6 and it still looks like crap, oh I mean bad. We’ve got a little more editing to do – remember that class we created in the ie-specific.css file? Ok, in case you forgot, this one

.png { behavior: url(png.htc); }

You now have to apply this class in your HTML file whenever you use a PNG 24 image. For example the “Get Your Hands Dirty” PNG 24 logo was applied as a background image in the main styles.css file with this code

h1 a {
display: block;
background: url(images/title.png) no-repeat left top;
float: left;
height: 92px;
width: 426px;
}

so the png class from the ie-specific.css file needed to be added to the HTML

<h1><a href="#" class="png">Get Your Hands Dirty</a></h1>

Here is another example of how it was added to the featured work image

<h2 class="featured-work png">Featured Work</h2>

In the above example two classes have been applied – featured-work is from the main styles.css file and png is from the ie-specific.css file.

The ie-specific.css file can also contain other declarations that are for Internet Explorer 6 only; you are not limited to using this file just for fixing transparent PNG files. Anytime you think about putting * html in your regular CSS file to fix an IE 6 issue you can put the declaration in the ie-specific.css file instead.

Again, there are numerous fixes for this issue and this may not be the perfect fix for you. Check out the great article at Perishable Press on the subject or remember that Google is your friend.

As you start to build your own Web sites you will more than likely come across a few CSS browser bugs. You ma y encounter the “float drop bug”, the “3 pixel jog”, or the “IE double margin float bug” to name a few. Before you pull your hair out with frustration, read the articles below which contain many of the common CSS issues and solutions.

If you print any of these articles in the classroom do not print the comments. You can view the article in Print Preview mode by selecting File > Print Preview, scroll down the page until you see the last page of the article and the first page of comments and note the page number. Click the Print button and set the Print Range to Pages and enter the specific ending page. Select the HP LaserJect 2420 PCL 6 as the Printer and click the Properties button. Click the Finishing tab and select Print on both sides. Click OK twice.

Mastering CSS Coding: Getting Started – Great beginners article that covers the following: Padding vs. margin, Floats, Center alignment, Ordered vs. unordered lists, Styling headings, Overflow, Position, Background images, Image enhancement, PSD to XHTML. This article also includes tips on how to fix bugs and how to avoid them all together.

Using CSS to Fix Anything: 20+ Common Bugs and Fixes – Includes IE 6 bugs and fixes, column issues, centering horizontally and vertically, CSS positioning, floats, CSS forms, and CSS tricks.

The Mystery Of The CSS Float Property – An overview of CSS floats, bugs and solutions, sample layouts, and working with lists and form elements.

CSS Float Theory: Things You Should Know – A detailed introduction to using floats. This articles also covers issues, bugs you may encounter when you are working with floats and “fixes”.

All About Floats – Detailed information about floats, common issues, and fixes. There is also a screencast about float concepts at the end of this article.

Liquid three column layout tutorial – If you need a starting point for a three column design this is a good tutorial.

The CSS Overflow Property – Discusses the overflow property and its uses.

Ultimate IE6 Cheatsheet: How To Fix 25+ Internet Explorer 6 Bugs

9 Most Common IE Bugs and How to Fix Them

CSS Differences in Internet Explorer 6, 7 and 8 – – This article describes the differences in CSS support IE6, IE7, and IE8. This article also covers any known bugs. This article may also introduce students to some properties they haven’t used before.

Backgrounds In CSS: Everything You Need To Know -Detailed information on how to use backgrounds in CSS.

Create Sidebars of Equal Height with Faux Columns

Center Absolute Positioned DIV

CSS Box Model: The Foundation For Improving Your CSS

Additional CSS Resource Sites

The Difference Between ID and Class – IDs vs. classes confuse many people who are new to CSS. This is a great article that explains the difference.

SitePoint CSS Reference – A great, searchable CSS reference site.

Max Design – Tutorials for CSS floats, lists, and selectors.

Position is Everything – CSS bugs found in Web browsers and advanced CSS techniques.

CSS-Tricks – CSS Articles, freebies, code snippets, and forums.

quirksmode.org – CSS browser compatibility, information on conditional comments and information on quirks mode and strict mode.

Layout Gala – 40 HTML and CSS Layouts

Google has introduced a new Web browser, called Chrome, aimed at wresting dominance of the browser market from Microsoft’s Internet Explorer. The move takes the Google-Microsoft rivalry to a whole new level. If Google succeeds, it will be a big deal, with major ramifications for the future of the Web.

But just how good is Chrome? How does it differ from IE and from less popular, but still important, browsers like Mozilla’s Firefox and Apple’s Safari?

Continue reading First Test of Chrome Google’s New Browser

MOUNTAIN VIEW, Calif. — The new web browser that Google Inc. released Tuesday is designed to expand its huge lead in the Internet search market and reduce Microsoft Corp.’s imprint on personal computers.

The free browser, called Chrome, is being promoted as a sleeker, faster and more secure alternative to Microsoft’s Internet Explorer, which has been the leading vehicle for surfing the Web for the past decade. Despite recent inroads by Mozilla Foundation’s Firefox, Internet Explorer is still used by roughly three-fourths of the world’s Web surfers.

“What we want is a diverse and vibrant ecosystem,” Google co-founder Sergey Brin told reporters Tuesday during Chrome’s unveiling. “We want several browsers that are viable and substantial choices.”

Continue reading Google unveils new browser

Google Chrome Beta Information and Download

I have to say that this is an outstanding book on CSS. It is an excellent introduction to CSS and also a great read for those who are experienced with CSS. The techniques discussed are very current and it even discusses issues with Internet Explorer 7. One of the things that I really like about the book is that as it demonstrates techniques it also discusses the pitfalls and solutions in different browsers, especially Internet Explorer 6 and earlier versions. The book is also filled with hands-on tutorials for practical experience.

I have started to develop the assignment sheet for this book; it’s available at http://www.jobskillsnow.com/webdes/cssmissing.htm

We will be selling the book in class, meanwhile you can order CSS: The Missing Manual via Amazon for $23.09.

Also, many students have asked about Flash/USB drives for storing class work. Flash/USB drives are available at any store that sells electronics and you can also find them at Amazon. These are very portable devices that allow you to store and transfer small and large files from one workstation to another. They’re quite handy and very easy to use; much easier than having to burn CDs of your classroom work. Some students even use these drives to store and run software programs that they like to use in class.

I mentioned how useful cheat sheets were yesterday. Here are a few cheat sheets that you may want to print and add to your class resources.

CSS

Jack Daniels’ CSS Cheat Sheet
CSS Shorthand Properties
CSS Properties Table
CSS2 Reference
Efficient CSS with shorthand properties

HTML/XHTML

Jack Daniels’ XHTML Cheat Sheet (PDF)
XHTML cheat sheet

More Cheat Sheets

Lorelle on WordPress, one of my favorite web development blogs, has a great round-up of web development cheat sheets. Bookmark, bookmark, bookmark. Did I mention you should bookmark this resource?

Other Resources

David posted a link to Selecttutorial: CSS Selectors tutorial over on the forum. This is another tutorial that I would suggest that all of you read.

css, xhtml, cheat sheets, resources, development, coding

It’s the day we’ve all been waiting for! After five years without changes to the rendering engine that defines (and limits) what the Web can do, Microsoft has released IE7 Beta 2 Preview for download by developers everywhere.

If you have anything to do with the design and layout of a web site, you need to download this and get started on correcting any obvious compatibility issues.

Why the hurry, you ask? Well sure, there’s the fact that every Windows XP user in the world will be offered this browser as a free upgrade when it’s ready later this year. But more importantly in my mind is the fact that we have been clamouring for a less buggy, more standards-compliant browser from Microsoft for years. Now that Microsoft has finally responded, it’s up to us to show them they were right to do so.

Quoted from the SitePoint Times Email Newsletter. You can subscribe to these great newsletters @ SitePoint.

You can download (at home) and learn more about the beta release @ the Internet Explorer Beta 2 Preview Release Site. The IE Blog also has information on what is new with the release and other important notes about Internet Explorer improvements. Remember that this is a “beta” release, so there may be bugs, install with caution. I found a few issues when I went to install the beta version on my laptop:

1. After downloading the software and running the exe file your operating system installation needs to be validated before you can install. So information has to be sent to Microsoft.
2. I found that I couldn’t validate easily with Firefox. I ended up resetting my default browser to IE to validate.
3. I had to install an Active X control in order to validate and even then I got a validation error in IE.
4. I ignored the validation error in the browser and clicked Validate again in the install screen and it finally let me install the software.
5. Internet Explorer 6 will be replaced by this beta version, so only install if you’re ready to make the switch.

If you have already developed “live” web sites may want to download this preview release. Since the IE team has promised that they have fixed many of Internet Explorer bugs, you need to check your sites to see how they look in this new browser. If you have used CSS hacks on your site you may need to consider removing these hacks and using alternative methods to get your layout to display properly. I will install the preview release on the instructor workstation so that you will be able to check your sites here if you do not want to install the beta release at home.

I checked my blog and other sites in Internet Explorer 7 and the fonts were beyond tiny! Everything laid out well (thank heaven for small miracles), but I couldn’t read the text. Yikes! I discovered the the default text size for Internet Explorer 7 is set to smallest. You can change this in View > Text Size. I set mine to medium which is the default for IE 6.

Internet Explorer 7 now offers tabbed browsing just like Firefox. It also offers built in RSS support with a nice RSS feed reader built in. You can access your feeds by selecting View > Explorer Bar > Feeds. The interface is sleaker, a nice improvement over Internet Explorer 6. There are also some other nice new tools like a pop-up blocker and support for add-on programs, similar to Firefox extensions (it’s looking a lot like Firefox, IMHO).

Of course the biggest issue being discussed about the new beta release among developers is the “improved” CSS support. Since I just downloaded the software today I will wait a bit to comment on CSS and IE 7. Again, you can read more about the Internet Explorer 7 CSS support improvements at the IE blog. This resource blog also includes information on uninstalling the beta preview if necessary.

I will post more notes about this release as I have an opportunity to explore it. I will install the release on the instructor station this afternoon so that we can take a look at Internet Explorer 7 together.

Technorati tags: internet explorer, browsers, support, css, beta

Once you digest Views of a Web Page, take some time to explore the rest of Lorelle and Brent’s site, Taking Your Camera on the Road (you may want to grab a cup of coffee, you may be there for hours as the information is so diverse). Lorelle and Brent have spent 10 years on the road photographing and documenting their journey; the photographs are exquisite and the stories are inspirational, educational, and gut wrenching. For those of you who love photography, don’t miss the learning section!

One of the really tough parts of web development is getting your site layout consistent in multiple browsers on multiple platforms (Windows (98, 2000, XP), Macintosh, Linux, etc.), with different resolutions when you’re using CSS. You must ensure that your site looks good in various versions of Internet Explorer, Firefox, Opera, Netscape, Mozilla, Safari, and Konqueror on multiple platforms at different resolutions (800×600, 1024×768, etc.). The instructor workstation, at the front of the classroom, has IE, Firefox, Netscape, Opera, and various other PC based browsers. The classroom Macintosh has Safari, Opera, Internet Explorer, Camino and various other browsers.

Checking your site for consistency is a time consuming process and requires access to different computers and operating systems. Access to multiple computer systems may not be an option for new web developers, as equipment costs can be high. BrowserCam’s Screen Capture Service lets you submit multiple URL’s, choose the browsers and operating systems you want to see, and in about a minute returns screen captures of your webpage loaded in the different browsers and operating systems you selected. BrowserCam has been kind enough to offer this service to students in our class for free. I will announce the username and password in class this afternoon; if you miss class, be sure to ask me for the access information.

Once you start to check your sites in different browsers you are going to find a lot of inconsistencies. Lorelle on WordPress has written an article on Fixing Browsers: Bugs and Hacks and pulled together some excellent resources on the subject. Over the weekend, students who have completed at least the CSS unit of the XHTML book should review this article, the accompanying sites and the handouts that I will provide you with today in class. I would also recommend that you spend time at CSS-Discuss for more information on browser inconsistencies. Google’s blog search is an excellent tool for finding CSS help. Try searching for “conditional comments css” or “css hacks”.

Validating Sites

All of your projects should validate as XHTML Transitional. I would recommend that you read Making Documents XHTML Compliant before you begin the validation process.