Monday, December 28, 2009

IE5.5, IE6, IE7, IE8 CSS Compatibility Check

Checking the CSS compatibility between browsers is a hassle. Especially when you have to check for different flavors of the same browser. I was using VPC images to test various IE versions which is a real pain. I ran across this while trying to find a website that did compatibility checking.

IETester. This is an alpha release of a browser that can test your CSS in IE5.5 up to IE8. It was pretty accurate too. I did have a couple times that the browser tabs crashed. I am not sure what caused it but that was a minimal issue compared to trying to test with VPC images.

Check it out here: http://www.my-debugbar.com/wiki/IETester/HomePage

Wednesday, December 16, 2009

"Q" and "A" Formatting with CSS

When I was coding my Q and A page, I had started using an unordered list to organize the question and answer detail. At first I wanted to have the letters Q and A to signify the difference between the lines. I also thought different text styles and indentation would help distinguish the difference too.

It looked like I was going to have to use two classes to define the CSS presentation side and alternate those throughout the unordered list. Nothing wrong with it, but I felt like it was starting to make the code look messy.

After a bit of searching in Google I found several people talking about using this little gem, Definition Lists.

Definition Lists consist of three elements:
  • DL - A container element for the DT and DD elements.
  • DT - Element for the term being defined
  • DD - Element for the definition of the term.

This is perfect. I have a container to surround each Q and A segment, and I have built in elements to separate the CSS presentation for each question and answer.


You can go here to see how I used this method.

http://www.webdebris.com/qanda.htm

Saturday, December 12, 2009

CSS: The Missing Manual

I would say that 75% of the time I have bought a technical book it has turned out to be a disappointment. They are either to basic or way to advanced. So I was really dreading spending money on a CSS book.

I knew the basics of CSS but needed to learn the next step of what to do with it, and personally I hate reading digitized text. I prefer to have physical media in hand. After taking a look at what Amazon had to offer I bought CSS: The Missing Manual by David Sawyer. It had a 4.5 star rating so I took a chance.

What a pleasant surprise this book turned out to be. It had the basics, but the book did an excellent job of teaching what you can do with CSS. There were a lot of exercises that you can see on the fly how your CSS code affected the page.

If I had a complaint, it would be the lack of a complete CSS command reference with a brief explanation of what they do. Still have to rely on The Ultimate CSS Reference for that one.

If you are learning CSS I would suggest taking a look.

Thursday, December 10, 2009

Flash and W3C Validation without JavaScript

For those of you who are familiar with my site know that I am trying to create it using only strict XHMTL and CSS. This presented a bit of a problem when I wanted to use one of my Flash projects for the holidays.


I scoured through several articles on the Internet but I could not find anything that fit exactly what I wanted. SATAY was a good approach but to be honest my Flash creations are not designed properly, and some of them I do not have the original code to fix them the way they should be. Other approaches did not allow for an alternate image for all browsers or required JavaScript.


I had come to the conclusion that I was just going to have to publish my page without an alternate image when I decided to search one last time. I ran across a site with a solution using the IE comment hack that also allowed alternate content for non IE browsers. I wish I had written down the link for you to reference as they had written 95 percent of the following code. The only thing I could not get it to do was to validate as strict XHTML.


I reworked their code and came up with a solution that would validate. Of course this is not the holy grail of Flash validation code. But it works well with simple movies. I have tested it in IE6, IE7, IE8, Firefox 3.5.5, and Safari 4.0.4 for windows. (Personally, I do not care about compatibility for obscure or older browsers.) All browsers showed the alternate image when the plugin was not installed and displayed the Flash animation when it was. I do not have access to an actual Mac so no idea on the compatibility. For the alternate image I used a jpg that was the same size as the movie.


(I do not have a handle on blogging yet so the code formatting is not the greatest.)


The actual source code can be seen here: www.webdebris.com/test/flashtest.htm

<div class="cFlashMovie">

<!--[if !IE]> <-->

<object type="application/x-shockwave-flash"

data="assets/moviename.swf" width="580" height="435">


<!--> <![endif]-->

<!--[if IE]>

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"

codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"

width="580" height="435">

<param name="movie" value="assets/moviename.swf" />

<param name="quality" value="high" />

<!-->

<img src="assets/flashrequired.jpg" alt="This animation requires Flash."/>

</object>

<!--> <![endif] -->

</div>