Home
Username:
Password:
Adobe Dreamweaver CS3 Tutorials

Cascading Style Sheets / Checking for Cross-Browser CSS Problems




Visitors to VTC.com will be able to view all introductory videos for each training course.
Free Trial Members will gain access to first three chapters for each training course.
Full Access Members have full access to VTC.com’s entire library of video tutorials.


Learn More

Subtitles of the Movie

Dreamweaver CS3 new browser compatibility check feature abbreviated BCC in the Dreamweaver documentation helps you locate combinations of HTML and CSS that have problems in certain browsers when you run a browser compatibility check on an open file. Dreamweaver scans the file and then reports any potential CSS rendering issues in a results panel. Here I can access this command on this open document by choosing file, check page and I want to choose browser compatibility. Here is the results pane over on the left and then the browser support issue detailed over on the right. Notice that for these bugs it found Dreamweaver provides a confidence rating indicated by a quarter half, three quarter or completely filled circle. This indicates the likelihood of a bugs occurrence a corner field circle indicating a possible occurrence and a completely filled circle indicating a very likely occurrence for each potential bug that it finds. Dreamweaver also provides a direct link to documentation about the bug on the adobe CSS advisor this is a web page that details commonly known browser rendering bugs and offers solutions for fixing them. I can access this right here, you can't see very well but there is a link here to adobe's website. And clicking on the link will get you to this page here. This is the adobe CSS advisor providing additional information about this bug, this one is an expanding box problem. States the problem and provides solutions as well as detailed descriptions of those solutions. Now by defaults this Dreamweaver browser compatibility check feature checks against the following browsers, firefox 1.5, Internet explorer windows 6.0 and 7.0 Internet explorer Macintosh 5.2, Netscape navigator 8.0, opera 8.0 and 9.0 and safari 2.0 were the browsers that were supported at the time of this recording. This browser compatibility check feature replaces the older target browser check feature but what changes the CSS functionality by testing the code in your documents to see if any of the CSS properties or values are unsupported by your target browsers. Three levels of potential browser support problems may arise in the results pane over here in the check. An error like you see here with the red exclamation indicates that CSS might call a serious visible problem in a particular browser such as causing parts of the page to disappear. Error is the default designation for browser support problems, in some cases code with an unknown affect is also marked as an error. I have also the second level of support and that's a warning here in this file here so we'll do a file, check page, browser compatibility. Here you'll see a warning in yellow. Unsupported value in the middle and warning indicates a piece of CSS code that isn't supported in a particular browser. But that won't cause any serious display problems. In this case I have an unsupported value here that will affect Internet explorer for Macintosh 5.2 the third level of support includes just informational messages indicating that code isn't supported in a particular browser but that has no visible affect in the browser. These browser compatibility checks will not later your document in anyway so go ahead and feel safe to run them. It's a good idea also to run them early in your CSS formatting phase to make sure you are not going to run into any problems later and also you don't want to wait to run these, you get quite a few warnings or errors. You'll notice that most of these documents here, fairly early in the stage of composing them so there is few errors that I really need to deal with or warnings. That will conclude this section of the tutorial on using cascading style sheets in your web pages and web sites in this section you learned why to use CSS some underlying technologies to get a better understanding of CSS. You've learned how to create your first styles as well as how to set CSS properties, you've learned all about the CSS styles panel including the panel when using it in all mode or in current mode. You've learned about the three CSS selector types classes, redefining tags and advance ids and psuedo classes. You've received some tips for applying CSS style formatting as well as how to link your pages to external style sheets and finally you've learned how to check for cross browser CSS problems by using the new Dreamweaver CS3 browser compatibility check feature.

Tutorial Information

Course: Adobe Dreamweaver CS3
Author: James Gonzalez
SKU: 33789
ISBN: 1-934743-04-6
Release Date: 2007-09-06
Duration: 10 hrs / 125 lessons
Work Files: Yes
Captions: For Online University members only
Compatibility: Vista/XP/2000, OS X, Linux
QuickTime 7, Flash 8

VTC Sign up & Benefits

  • Unlimited Access
  • 98,729 Video Tutorials (23,265 free)
  • Video Available as Flash or QuickTime
  • Over 1026 Courses
  • $30 for One Month Access
  • Multi-User Discounts Available