IkimashoZ --| Matt Buscemi's Personal Webspace |--

Serving Up CSS Mayhem

January 14th, 2010 by IkimashoZ

My current job has me working with the lighttpd webserver instead of Apache, which I'm much more familiar with. Today I ran into an interesting quirk that I thought I'd take the time to share since it had me scratching my head for quite awhile.

I discovered, to my dismay, that adding a doctype to my index.php file caused my CSS files not to load in Google Chrome, Mozilla Firefox and Apple Safari. Opera and Internet Explorer 8 would load the CSS files appropriately regardless of the doctype, but much to my dismay, IE would display the site correctly only with the doctype included. Without it, it would subject my site to the absolutely horrendous Microsoft-developed box model, obliterating my beautiful design.

Eventually, I discovered, the problem lay with the server, not my code. Specifically, lighttpd was serving up my CSS files with the wrong mime type.

A mime type is a bit of metadata that gets carried along with information that travels over the internet that tells what kind of information is being sent. The problem was that lighttpd did not have an entry in its configuration file for CSS files. What type of information was it defaulting to, you ask? "text/html". Apparently, Internet Explorer and Opera don't care if your CSS files come through with the wrong mime type, but Chrome, Firefox and Safari do.

Fixing the problem was as simple as finding a file on the server at etc/mime.types.conf and adding this line:

".css" => "text/css",

I restarted the server, and problem solved! I've never had this problem with Apache. Likely, Apache comes preconfigured with a mime type for CSS files. Now don't get me wrong. This isn't a rant against lighttpd. I'm glad I got experience with this server. It's very, very lightweight, and hence very useful on certain kinds of hardware.

It was not, however, easy to locate the source of this problem. Google search, which normally turns up a solution to my questions right away, was not so helpful this time around. The big tip-off actually came from when I tried to expand my CSS file under the HTML tab in Firebug. Hopefully, this post will be able to find its way to someone with a similar issue.

Posted in Web Design | No Comments »

Opacity with jQuery

December 30th, 2009 by IkimashoZ

Microsoft Internet Explorer is a constant thorn in my side as a web developer. Although it's come along way in terms of being standards compliant, IE is still woefully lagging behind other browsers, even two and three year-old versions of, say, Mozilla Firefox.

The css "opacity" option is a common sticking point for me. It's part of CSS3, which technically hasn't been released yet. All browsers except IE implement it just fine. The idea is that you can set the transparency of an object by giving it a decimal number from 0 to 1, where 0 is completely transparent and 1 is completely opaque. The vertical and horizontal bars used in the design of this site demonstrate this effect. If they were opaque, the intersection of colors would not create the kind of style I tried to achieve.

Internet Explorer does not do opacity. Whereas all other browsers will accept

{ opacity: 0.5; }

for example, Microsoft wants us to use the horribly inelegant

{ filter: alpha(opacity=50); }

where the value varies from 0 to 100 instead of 0 to 1.

When creating this site, I discovered something interesting. Microsoft's filter has never validated at W3School's CSS validation tool. I've known that for awhile. But, what I didn't know was, neither does opacity! CSS3, being technically unreleased, though in progress for many years already, will not validate, since the current validation engine assumes CSS2.

jQuery came to my rescue of course. I decided that, if I couldn't put opacity in my stylesheet, I'd put it in my Javascript. Can't affect standards compliance there, and I still get my effect, right? Well, lo and behold, opening this site in Internet Explorer will reveal that telling jQuery to change "opacity" also achieves the correct implementation in Internet Explorer!

//set the opacity of main layout items

$("#horiz-stripe, #vert-stripe").css({ opacity: 0.4 });

$("#titletext-dropshadow").css({ opacity: 0.85 });

$("#horiz-stripe2").css({ opacity: 0.2 });

I'm continually amazed at jQuery. It's truly a remarkable piece of technology and it's no wonder that so many different professional websites have picked it up, which you can see on the jQuery homepage.

Posted in Web Design, jQuery | No Comments »