The Naked Green

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!