Blog of Zeke Franco—Quasarkitten.net

I just recently found out about the YUI Theater. It is a collection of videos about the web development world. I’m really enjoying them so far. I have already watched Douglas Crockford: “The JavaScript Programming Language—Part 1”. It was very informative about the history of JavaScript. I look forward to watching all four videos.

Also on my list to watch is Shawn Henry’s “ Web Accessibility Guidelines Update” I enjoyed hearing her speak at An Event Apart Seattle 2007. So I’m excited to watch this presentation.

As of today there are 44 videos in the YUI Channel. I can’t wait to watch them all. Here are some of the ones I’m looking forward to watching.

• An Introduction to Screen Magnification Software
• An Introduction to Screen Readers
• Welcome to Firebug 1.0

Yahoo has even posted twenty-three of it’s video on iTunes as a podcast that you can subscribe to.

On a related topic the recent FLOSS Weekly podcast interviewed Nate Koechley, a Yahoo front-end engineer and designer. They talked about The Yahoo User Interface Library, a collection of open source JavaScript utilities and controls with cross-browser, cross-platform support.

So to wrap this up if your a developer pay attention to what Yahoo is doing because they are bringing out a lot of content, services, and code for us developers.

Labels: CSS, HTML, JavaScript, video

Today I was working on a little report for work. So I designed a neat xHTML page that has some stats listed in a pretty little table, and then I realize people at work tend to print things out, so I better make a nice print style sheet. So I add my link tag: <link rel="stylesheet" type="text/css" href="/css/print.css" media="print" /> then started working on my print style sheet. Since I use CSS for all the layout all I really need to do is a few of things.

• Remove the non-relevant section such as the page header
• Adjust the browser defaults:
  • Remove coloring and underlines from links
  • Remove dotted border from abbreviations
  • Set my logo image to display as block
• Restyle the table so that alternate rows are different colors
• Add some Javascript to make the link’s url visible

So after doing all these I’m try to do some test prints. In Firefox and Opera everything is fine. Then in Internet Explorer 6 the background color for the alternate table rows isn’t printing. So I’m thinking it’s some sort of IE bug. After spending some time fiddling with the CSS I noticed that which ever element I applied a background color to it wouldn’t print.

Then it hits me… The browser preferences. If you go to the file menu and choose Tools << Internet Options A window will open. Choose the tab called Advanced. Then scroll down to the printing section and check the option “Print background colors and images”. See Figure 1.

Figure 1

Once you’ve done this your background colors will print.

I also noticed this happens in Safari for Mac. The preference to change this lives in the print dialog. Once your in the print dialog box, expand the dialog by pressing the upside down triangle thing next to the printer you’ve selected. Then check the box that says “Print Backgrounds”. See Figure 3.

Figure 3

As a web designer it reminds me that you can’t depend on anything so make sure that your print style sheets do not depend on background colors. For example what if you wanted to have some light grey text or white text on a background color, well if the user has their background colors unchecked, which by default it is, the white text will be printing on white paper. Not good. I guess the lesson here is to test, test, and then do some more testing to make sure everything is working.

Labels: browsers, CSS, webdesign

Every year (since 2005) 24ways.org brings you a web design/dev article each day for twenty-four days leading up to X-Mas. The articles are written by "thought leaders" in the web design/dev community. Some of last year's article were written by Jeremy Keith, Dan Cederholm, Andy Budd, Shaun Inman and others. Today (Dec. 1) was the launch of 24ways 2007 so check it out.

read more | digg story

Labels: CSS, HTML, webdesign

I am working on finishing up a report for school today. Basically I have to pick one of thirty different types of navigation styles and then describe the function–with relation to the navigation–of every HTML tag and CSS rule. This includes how one rule may relate to another or why one rule that would commonly be used isn’t. So far I’m on page four of the report.

It’s actually fun, because it forces you to think about how each rule affects another. The one thing I’ve learned so far is if you use the CSS background declaration and you don’t specify the background-position in it, then the user agent will use the default of 0 0 (same as top left)—I knew that part. But if you do specify the horizontal position, but not the vertical position the user agent automatically changes the vertical position from top to center. ie.:{ background:inherit url(..images/image.png) repeat-x scroll 20px; }will be the same as{ background:inherit url(..images/image.png) repeat-x scroll 20px center; } even though if you would have done this: { background:inherit url(..images/image.png) repeat-x scroll; } it would be equal to this { background:inherit url(..images/image.png) repeat-x scroll top left; }

I’ve tested this in IE6, Mozilla 2+, Safari 2 (as well as 3beta), Opera 9+ with all of them doing this. If anyone know why please let me know, I’m just curious, as it doesn’t cause any problem for me or my coding.

Labels: CSS, school

Labels: CSS