Anne Kowalski

Friday, June 22, 2007

CSS in Academia

Out of curiosity I went to the website of Jina Bolton, one of the authors of The Art & Science of CSS.  (One of the things that surprised me the most was how young she is - only 23!) I looked at some of her blog postings, and one that caught my attention was the post on why she still wants to teach CSS.

Do people really not realize that every day there are people just discovering HTML, let alone CSS?  There’s still tons of web designers out there that don’t seem to know CSS, considering how many websites still use a table-based layout.

I would have loved to take a CSS course in college, but the web design classes seem to be limited to basic web authoring (HTML/XHTML), web graphics/layout (from a strictly visual point of view), and how to use Dreamweaver’s WYSIWYG editor.  Maybe some Flash, Javascript, and ASP.NET.  Fortunately my web authoring class covered standards-compliant XHTML.  But nothing whatsoever about using CSS for layout presentation.  (Just for setting typography and background colors.)

CSS is clearly here to stay, at least for a while...so why is it ignored in the university setting?

Monday, June 18, 2007

Logo Replacement for IE6

I’m in the midst of working out the little bugs on my other website, BunnyOne Design, and one of the things that I was having trouble with was IE6’s support for PNGs with a transparent background.  I formatted my logo as a transparent background PNG inserted directly within the page, with a PNG reflection of the logo shown using CSS.  (This way I could have the logo be “clickable”.) IE7 has support for PNGs with transparent backgrounds, but IE6 and below botches them horribly.

So, instead of looking like this:

it was looking like this:

Unfortunately there’s still a significant amount of people using IE6, so I needed to find out a way of making the logo blend in for this beast of a browser. I wanted a smooth look to my logo so using a GIF was out of the question.

My solution was to use conditional comments and a different style sheet for IE6.  Conditional comments only work when directly referenced within the web page, which is why a separate IE6 style sheet is necessary.  I copied over what I had for my IE7 style sheet, renamed it to screen_ie6.css, and referenced it in my header using conditional comments:

<!--[if lte IE 6]><link href="../CSS/screen_ie6.css" rel="stylesheet" type="text/css" media="screen" /><![endif]-->

This overrides the default style sheet for people using IE6.  (The “lte” part of the conditional comment means “lower than or equal to”.)

I have the logo inserted as an image within the page, which is positioned absolutely and styled using CSS.

<a href="../index.html" name="top"><img src="../images/logo.png" width="152" height="144" alt="BunnyOne Design logo” id="logo" /></a>

I went into Fireworks, which I used to create my design mock-up, and exported the logo this time as a non-transparent PNG, with the blue gradient/silver bar visible as the background.  (I did the same for the reflected image.) I went into my code and right below the normal logo image inserted the IE6 logo into the page, using conditional comments to ensure it showed up only in IE6:

<!--[if lte IE 6]><a href="../index.html" name="top"><img src="../images/logo_ie6.png" width="152" height="144" align="BunnyOne Design logo” id="logoie6" /></a><![endif]-->

In my IE6 style sheet I changed the CSS for the normal logo styling from:

#logo {
padding-left:1px;
position:absolute;
border:none;
}

to:

#logo {
padding-left:1px;
position:absolute;
border:none;
visibility:hidden;
}

This hides the original logo.  Next, I created some formatting for the “logoie6” div.  It required a few tries before I got the background to line up correctly:

#logoie6 {
padding-left:1px;
top:6px;
position:absolute;
border:none;
}

For the reflection CSS I switched the background image to the IE6 version I exported from Fireworks.  So this meant I didn’t have to change the reflection div reference within the page, only the properties within the IE6 style sheet.  Again, it took a few tries before I got the background to line up correctly.

Next was making sure the new image didn’t show up if the page was printed.  I like having a very simple print version for websites, so my print style sheet is very content-intensive, with one of the few images being the plain logo at the top.  Cancelling out the IE6 logo was simple, and just required the following code in the printer style sheet:

#logoie6 {
visibility:hidden;
position:relative;
width:1px;
height:1px;
}

I’m sure there’s more elegant ways of going about it, but this solution worked.  The website logo no longer looks broken in IE6, and the page can be printed without the IE6 logo showing.

On a side note: I tested in IE5.5 and the logo background shows. I wonder if it is because IE 5.5 doesn’t understand the conditional comment?  Since IE7 has been out for over six months and there is such a tiny market share for IE5.5 and below now, I’ve decided to not worry about it too much.

Monday, June 11, 2007

Safari for Windows

Apple is offering a public beta of Safari for Windows.  Of course I downloaded it as soon as I found out about it, since I’ve been depending on my Mac user friend to test out designs for me.  So far I love the UI but don’t like how thick the fonts look (which I guess is Apple’s font-smoothing technology they included with this release).

Of course, within five minutes of installing it I went to Slashdot and saw an article about Safari vulnerabilites discovered within the first day of release.  Is this supposed to be shocking?  It is a beta version…

Friday, June 08, 2007

Multiple Monitor Setup

Today I hooked up an old 17” Trinitron CRT monitor I had laying around to my laptop.  Wow!  The difference made by having two screens is amazing.  I can’t believe how much easier it is to work in Adobe programs with all of the palettes and toolbars. It took me a minute to get used to dragging windows across different displays, but now I’m hooked.

The only problem I had was that my ATI graphics card only allowed for cloning rather than an extended desktop.  After doing some research I found UltraMon, which is a program that gives you lots of control over your multiple monitor display settings.  So if your graphics card isn’t allowing you to set up your displays the way you want, give this program a shot.  You can try it for free for 30 days, then after that it is $40.

Thursday, June 07, 2007

Best WordPress Plugins

If you’ve ever had a look at the Plugins page at WordPress Codex you’ve probably have been overwhelmed by the amount of downloads available.  Searching through the downloads available can take quite a bit of time, and trying them out takes even longer.

Here’s the list:

1. Dagon Design Mailer Form - Helps you create contact and feedback forms for your WordPress site, as well as more general forms.  It is very easy to set up and highly customizable.


2. Firestats - This is a full-featured statistics plugin that records site visits, referrer URLs, and popular pages as well as information about your visitors such as country, operating system, and browser.  You have the option of turning off the Firestats logo that automatically shows up in the footer of your blog.


3. Maintenance Mode - A very easy way of temporarily preventing your visitors from accessing your site while you are installing updates, doing maintenance, etc.  It is very similar to Drupal’s default site maintenance feature. Default languages are English and German.


4. Now Reading - If you like to occasionally review books, or would like to have a digital library on your blog, then you’ll probably like this plugin.  When you add new books the cover images and purchase links are automatically added if they are available on Amazon.com, or you can add them yourself if they aren’t. There’s an option to add your Amazon affiliate ID (if you have one).

   Note: When you are adding books using this plugin, use the ISBN if at all possible - it gives far more accurate results than searching by title.



5. Our ToDo List - Shows a todo list in your WordPress Dashboard.  Helpful for keeping track of post ideas.

   Note: When I installed this I had to go to Manage>Our ToDo then click the link to run the script (under the Install heading) before it would work, despite having version 2.1.



6. Subscribe to Comments - Lets commenters on your blog check a box if they want to be notified by email of new post comments.


7. Lightbox 2 - Ever go to those blogs where when you click on a photo, it enlarges the photo, layers it on top of the current page, and dims the background? That’s probably Lightbox 2 (or one of its many variants) at work. All that’s required to use it after activation is inserting “rel=lightbox” into the anchor tag.


8. WordPress Gallery2 - This is a much more fluid way of adding pictures to your posts than using WordPress’ Upload option if you want to include a photo album on your site.  You will need to already have an installation of Gallery2 before activating this plugin.


9. Akismet - This one is automatically included in the default install of WordPress.  It greatly helps reduce the amount of spam postings on your blog.  Rather than having the spam postings show up in the comments for everyone to see, you can instead filter them out through the admin panel. Anything not manually deleted by an admin gets deleted after 15 days.

   In order to use Akismet you first need a free WordPress.com API key.