Jump to Navigation

Blogs

Why CSS can be utterly evil

Dr. EvilI like CSS - I've been using it ever since I was first introduced to CSS by blogger.com when I decided I wanted to create my own blogger themes.  However, there are things about CSS that are ... to be desired.

For a quick example - the title of this website, "Fated to End Sometime" has a nifty drop-shadow effect that is visible in Chrome and Firefox, but not Internet Explorer (if you use Safari or Opera I'm curious about how it renders for you - feel free to take advantage of the "Feedback" link up at the top-right).  The reason for this is that CSS does not have a defined standard that is adopted by all web browsers.

In short, what works great in one web browser may look terrible in another, or simply not work at all.  Yay for not adopting standards (sarcasm alert)!

For those of you not in the know, I am using Drupal again for Fated to End Sometime after a brief foray into the world of Wordpress.  Wordpress is great for most bloggers who don't want to get weighed down with the nitty-grittys of CMS maintenance - a lot of the functions that can be a pain for new users in Drupal have been significantly simplified for Wordpress and there is a lot less work involved in getting a site up and running (and ready to rock).

However, when it comes to theming, Wordpress is a pain.  It's a bit more of a pain for other things - such as adding on the fly functionality that hasn't been developed yet.  I also felt like I was installing nagware when I added in certain functionality to the Wordpress site - a lot of these add-ons have a built-in Donate button at the top, which on the one hand means the developer is more likely to see a return on his/her investment in time, but at the same time I felt like I was being dishonest by using their product without donating.

I hate being manipulated, especially into paying for something.  So I dropped Wordpress and reverted back to the Drupal version of Fated to End, after importing content posted on the Wordpress site.

I've been using basically the same theme for Drupal for the past four years or so, and since it's a stock theme (minus the logo and colors) I had grown rather tired of it.  Creating a new theme for Drupal is not a simple task, however - it's not like you can just create a CSS template file and be done.  There are a number of different sections of a drupal site, even on just one page, that are each handled separately in individual CSS files.

To make things significantly easier one can use the Zen theme to create what is called a Subtheme - Zen provides the core files necessary to create your own theme without having to write everything from scratch, and allows for multiple subthemes to be created (which comes in handy when hosting multiple websites on one Drupal installation).

The issue I ran into (which was not immediately evident) was the Search box at the top-right of the page could not be accessed in Firefox or Google Chrome.  It worked just fine in Internet Explorer, however, which added to the dilemma.  Typically it's the other way around - something that works in Google or Firefox does NOT work in IE.  So I had to do some thinking.

After digging around a bit I remembered that CSS allows for positioning elements on top of one another (similar to cutting shapes in construction paper and gluing them on top of one another), and so I started looking at the way I had moved the Search box to the right side of the page and how I had pushed the title down from the top to make it easier to read.  I had used a position: relative; statement to move the title, which had the undesired effect of placing the entire title field over the search box.  It could not be clicked because it was UNDER the title, even though it did not appear to be so.  To fix this, I had to change the title to a position: absolute; and provide coordinates from the top and left side of the page to place it in the same spot.  This also made the Search box jump to the top of the page, so it also needed a position: relative; statement to be placed back to its current spot.

So....like I said, while CSS is rather cool...when it comes to stuff like this it's a bit of a pain in my butt.  If anyone is familiar with a tool one could use to view the layers in CSS and how they interact with each other inside a browser, please do me a favor and let me know.

Syndicate content