The Naked Green

It may be hard to spell, but you don’t have to worry about that as you listen to the enchanted melody. Rhythmic Symphony is a synthpop band and a brand new link on my sidebar. I helped put them on the www map to reach all those online ears with the dark and yet somehow light music. I’m sure you’ll want to check out my latest web and graphic design project to at least be able to write some sort of snide comment here.

If you don’t know what synthpop is or why someone would name a band Rhythmic Symphony or what one is supposed to sound like, there’s no clubs for you to join. No, unfortunately none of the poor souls that can relate to you have organized. Maybe they just found the answers for themselves instead of reading silly propaganda. Maybe you should go find out what Rhythmic Symphony is about…or go start a club.

Yes, there are song samples on the website.

No, I have no idea why you’re still reading my answers to questions you haven’t asked.

No, I don’t really have anything technical to say about the design. It actually went fairly smoothly, especially integrating my design with Wordpress 1.5 That’s nice for me, but doesn’t make great blog posts if you want something with <tags>.

Yes, I’m going to stop writing now and let my wife get on the computer and maybe watch Dodge Ball.

Only in Colorado does a geek ride his mountain bike up and down hills to get to the library only to pick up books on PHP & MySQL, take a drink from his Nalgene, ride back and actually enjoy it.

Soon, I hope to be designing database driven websites that are so simple to maintain, even the client can do it. Why I want to work myself out of a job, I don’t know. My new found knowledge will probably be used on my business website first. There is some serious learning to do before then, though, which explains why I picked up MySQL/PHP Database Applications. I hope to spend enough time with my head in the book to make some headway progress before I get busy again with two prospective jobs in April as well as some flooring.

Side note: Thanks to Simon Wheeler, creator of phpdev, who made it a breeze to get PHP MySQL and Apache running on my Win machine in minutes! I’m excited to get going and the last thing I need is to spend hours trying to configure programs.

Today I realized that I could use PHP includes to make a more modular website design almost like a template. What I realized was that I could use PHP without knowing anything about it! So I went crazy adding <?php include('filename.txt'); ?> all over the place and breaking up my XHTML into smaller bite size pieces. I quickly learned that the file location is from the server root (/home/user/public_html/filename.txt) and not the URL.

A problem that came up (there has to be at least one) was with my <?xml version="1.0" encoding="iso-8859-1"?> line at the top of my document. It was causing my newly made PHP document to break. I figured it was because of it being similar to the way you begin a PHP statement. I didn’t want to get rid of it is part of W3C’s Recommendation for XHTML 1.1. I found out found the answer had to do with the short_open_tag variable….
(more…)

It’s yet another post about long hours trying to trick Internet Exploder into working. I worked on Jamie’s blog or a while today to implement a newish design and learned some tricks, too.

Thanks to LPD, I have found a new solution (if you can call it that) to the lack of PNG transparency support in IE instead of using filter: alpha(opacity=60) which ends up washing out the colors of the PNG image.

This hack uses the horrid looking, non validating filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='75p_honey.png'); to accomplish this simple feat (simple in Firefox, that is). Of course, then you must hide the actual background-image: url(/folderto/sample.png);, so we use #content[id] to hide it from IE. Simple, isn’t it? Well, that lovely hack job makes links all but useless in IE (you see them, but they don’t work). So, for some reason only old Billy knows, you have to add position: relative to all child elements (#content *). Here is a sample:
(more…)

No, I don’t have some mind-boggling, profound idea to share with you. I learned something (that may be mind-boggling) about CSS today.

I was working on some CSS for Stevish.com, I came across some strange code:


margin: 0 !important;
margin: 0 6px 0 1px;


Not knowing what it was, I promptly deleted it with no adverse effects and moved on. Then I thought better of the situation and figured I should find out what this strange “hack” is supposed to do. That was not easily done to to search engines removing the ! in !important. alltheweb was the only one I found that would keep it and even then I got plenty of importants and some hokiness. I did find what I was looking for: 6.4.2 !important rules of w3c’s CSS2 Specification:

CSS attempts to create a balance of power between author and user style sheets. By default, rules in an author’s style sheet override those in a user’s style sheet (see cascade rule 3).

However, for balance, an “!important” declaration (the keywords “!” and “important” follow the declaration) takes precedence over a normal declaration. Both author and user style sheets may contain “!important” declarations, and user “!important” rules override author “!important” rules. This CSS feature improves accessibility of documents by giving users with special requirements (large fonts, color combinations, etc.) control over presentation.

So it’s an actual CSS declaration! It didn’t seem to make sense in context, though, because there are two margin selectors in the sample code. So, I figured it was yet another “standards compliant” hack to deal with the infamous Internet Exploder. I decided it would be quicker to mess with the code myself and found that IE will override an !important declaration with a second selector (margin), while a standards compliant browser such as Firefox will not.

Here’s an example:

Using the following CSS:

style="color: green !important; color: red;”


This sentence is green in Firefox and red in IE.

There may be people searching for the “exclamation point important” hack or the “exclamation point important” declaration and with search engines not reading !important right, I thought I would help.

I added downloadable sermons to Life Spring’s website today and polished the site up a bit. One thing I had to ask myself was, “Why are you using HTML?” So, I switched over to XHTML 1.0 Strict which was not all that difficult.

In XHTML, you have to close all tags. So, I went through and replaced <br> with <br /> and did the same (manually) with the image tags.

Remember that all html tags have to be in lowercase when coding in XHTML due to the fact that XML is case sensitive. When I uploaded my pages, all the text was big and when I validated, I found the culprits. For some reason I had two meta tags that were capitalized.

As usual, Thanks to W3Schools for their XHTML tutorial!

I worked today on tweaking Justicca’s new design. The problem was her blog title was hard to see on top of the cute puppy picture. I figured I could easily make an opaque background behind the title to make the words stand out a bit more.

I found Ove Klykken’s excellent explanation of “CSS Transparency” and quickly had it working. All was good until I checked it out in IE. I was greeted there by a ugly white box covering up the cute puppies. I then proceeded to spend way too much time fumbling around for a solution.

I eventually had to download Ove Klykken’s page and start changing things one by one to mirror Jessica’s site. It wasn’t in the structure, so I started deleting CSS properties one by one. This is when I realized that IE must have the width specified to show opacity. [In fact, I remember something else with a width problem, let me go check. Okay, that was the floating problem and the one problem was actually when I added width. So much for a method to IE’s madness.]

Here is a sample: (more…)

Well, I just spent a couple hours (almost exactly two) working on a new design for this blog. It looks much better than my old design, but I’m still not completely happy with it.

I left index.php alone and am working off a highly modified default CSS template. I also threw in some ideas from an Alex King CSS template, Deviant. It’s riddled with overflow: hidden, overflow: auto and other things I don’t quite understand just to make it work right. The problem is, all that overflow stuff makes my max-width do really strange things, so I’m stuck with the “horizontal scrollbar of doom” for large text sizes. I don’t like complexity in code, especially when I don’t understand it!

I do like the look and feel better, though and this will hold me over until I have time and know what I’m doing. Now, on to much bigger things, like implementing a CMS and doing a redesign of our website.

Update 2004.01.27: In all the excitement, I forgot to mention where I got the picture. I downloaded it from stock.xchng along with several other great pictures. It was taken by jefras a.k.a Joao Estevao A. de Freitas with a Nikon D70. Thanks, Joao!

Update 2004.01.27 1.48pm: Well, I found a weird bug with all those overflow statements. When I would make the text bigger and scroll down the page, at a certain point it would freak out and just start looping one small section. Then I noticed that December’s archive page was long enough to have the same problem with the regular sized text. That’s when I knew overflow had to go. I think the only thing it was doing was keeping the menu bar exactly right aligned to the header. Sacrificing that is no problem if it will mean people can actually read my posts.

I was uploading some content to our church website and thought of a great simple idea for the pastors’ bios. The idea was to have a border around each bio and float the header over the border. I’m sure I’ve seen it lot’s of places and it’s so simple, it only took me a couple minutes to implement the necessary CSS. That is, until I tested it in IE. It broke up all over the place! It was late, so I went to bed and didn’t sleep well leaving something unsolved.

The next day, I made up a simple html page with the same basic CSS and had the same problem. The borders from the bottom bios were mostly gone and the top bio had some of the remnants littering its content. There was also a problem when I implemented width, which caused the header to jump up over the border in IE. Take a look at the CSS floating header problem and my workaround (You’ll have to view them in IE to get the “special effect").

What I want to know is why IE has a problem removing the bottom margin on a floating header. Actually, I really want to know why it can’t handle simple CSS. Am I doing something wrong? If anyone can take a look at the code and let me know what’s happening, I would be grateful.

I would like to thank God (yes, God) for the workaround on this one. The night before, after cell group, I prayed and realized that God wants to design websites along with me. He cares about that area of my life too and if it’s really ministry, then of course He’s involved. I had no internet connection at work in the morning and turned to God for help. I think He likes when we involve Him in what we’re doing and give Him credit for accomplishments. He made the mind after all!

Lately I have been spending time researching Content Management Software (CMS) that will help automate our website, thinking of the impending redesign, brainstorming on domain names and preparing for the content on our church’s website. I’m hesitant to to use a CMS, but think if I can find the right one, it will really enhance what I’m able to do with it and hopefully alleviate some of the need for software and having a laptop handy. There may be some big changes soon! So far, it’s just ideas and some minor hacking on the back-end, but real work should begin in earnest soon.

I was going to try to use WordPress for the whole site, but it will take much more hacking than I’m prepared for to extend it to be what I need. Etomite is a light CMS that I’m looking at now in conjunction with WordPress. It’s exciting because as one user said, “…it’s really a CONTENT management system not COMMUNITY management system"*! I was about to give up the search and just go old school because I didn’t want some “hax0r community” site (as good as those can be). We’ll see if it works out after some testing.

* Posted by Mikko, on December 27, 2004 at 5:21 at opensourcecms.com

This is newsworthy seeing as I just posted a thanks to Dan Cederholm and his website, SimpleBits. He just implemented some great new design elements. He changed one thing I was so impressed with and made it better: The style switching icons on the right of the navigation bar:

Gone are the (rather pointless) color theme switcher buttons, replaced by a new default frosty blue. Instead of changing header colors, you can now toggle between a centered, fixed-width layout and a widescreen, fluid-width version. This was a bit tricky, in order to keep design elements in the header and sidebar consistent. I’ve used the “Sliding Faux Columns” approach (1, 2, 3) in achieving a flexible, yet full-length sidebar.

This is a very interesting update as it accomplishes exactly what I spent most of yesterday trying to do for the church website design. If you click on the “Liquid” button, you will see what I accomplished (I will be leaving that page static for viewing). I look forward to learning more from Dan’s design and the articles he referenced (in the quote above). In fact, his article on Faux Columns (which I forget to mention in my earlier post) was what got this whole design started and got me to his site in the first place.

Thanks for your timely update, Dan! [I just hope he doesn’t think I stole his idea.]

I’ve been spending most of my free time working on the re-design of our church website. It has been an interesting adventure and I have learned a lot about CSS and cross-browser hacking. I have finally fished a prototype of the website design (the page was mainly used to show the church leadership).

I would like to thank all these websites and the people involved in them for all their great resources and help without which, I would still be playing in boxes:

• My wife, Jamie for her support, inspiration and design tips.
• A List Apart for great ideas and tutorials.
• Simple Bits for an awesome design to learn from.
• W3Schools’ CSS Tutorial for their wealth of information.
• CSS Forum for their help on a margin problem.
• Complex Spiral Consulting for their good article
• Jak Psat Web for his help with “vertical centering“.
• Jakob Nielsen’s Alertbox for his advice
• Google

I will be polishing up the design and making the site conform to it hopefully by the end of this week. There is still a lot of content to get up and things to work out. I said re-design and that all the old site had…a design (a bad one at that) that I made some time back. Now we’re actually going to put up a website!