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, May 28, 2007
WordPress Tiger Administration
Steve Smith has a great plugin for WordPress users looking for a different admin interface. I personally saw nothing wrong with the WordPress UI, but after trying this plugin I found out that I'm navigating the interface a lot more quickly.
The only downside is that it doesn't show up in IE7 due to IE's non-compliance to CSS2 standards. (If this is even an issue I have two words for you: Get Firefox!)
Download WordPress Tiger Administration
Update: One problem I'm noticing is that Tiger Administration squishes the code view into a smallish square instead of filling the entire editing window. This doesn't seem to be affecting the WYSIWYG editor.
