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
Monday, December 28, 2009
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:
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.
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.
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
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>
Subscribe to:
Posts (Atom)
