Coredump

Thank God for CSS!

I’m fixing the CSS on the portal because the existing one just doesn’t validate.

I’ve trimmed down the DOCTYPE to XHTML 1.0 Transitional because one thing keeps nagging me: the
without a block-level element. It’s just not valid with XHTML 1.0 Strict, and a div creates a gaping space between two div containers. Mozilla doesn’t allow for empty divs, so that’s out of the question. Well, Transitional is still XHTML, anyway.

Also, I’ve managed to solve the problem with form. Before, I had to add the inline unordered list inside the form tag for them to align, but a simple CSS attribute did the trick:

#topnav form { display: inline; }

Short and sweet. Now, my only problem is that IE and Mozilla renders this differntly. IE aligns the form element (in this case, a select drop-down box) with the baseline; while Mozilla does it in the middle. Guess which is better looking.

The previous code in the prototype had me specifying the vertical nav bar elements in the wrong order. The culprit was the float element. I had to use float instead of display: inline for the unordered list of tabs because backgrounds behave differently across browsers using the display attribute. Of course, float is also a bit of a headache to implement, but with a few tweaks (and great help from ALA), it can be tamed to do my bidding.

I’m of two minds whether the right-sided vertical nav bar is intuitive enough for first-time users, or it’s just plain confusing. My take on this is that these vertical tabs resemble paper folder tabs, and they happen to represent the four major sections that divide the portal. I think I’ll just have to provide enough hints to make it work, maybe even add another color scheme or icon theme for each section.

The design is faring well. By next week, I’ll have real CSS- and XHTML-valid markup that can be used in templating the site. I’d still have to convert it to Smarty syntax, though, in preparation for the CMS. Lots of work ahead.

And oh, here’s a current screenshot of the template, barebones sans the color scheme:

Am trying to fix the CSS and XHTML in the portal design. The current markup just doesn’t validate, even in XHTML 1.0 Transitional. Anyway, it’s just a few minor changes in the code — mostly regarding case consistencies for keywords and variables, and a few deprecated tags for form.

By tomorrow, I’ll have it fixed. I’d still have to hurdle the cross-browser-compatibility issue, though. My current layout breaks in IE5.0 browsers, specially in narrow displays. I’ve confirmed that it renders well in Opera, though. (Way to go, Opera!) And, of course, it should fare nicely in Mozilla.

Whew! It was. I was tasked to come up with a prototype design for a portal. I thought, hey, four days for a portal? Got my work cut out for me.

Turns out I was in for a very interesting (Chinese connotation) week. Making the site structure was okay, since the Boss had an inkling of what to place on the site. Problem was actually composing a site that is usable, friendly and not intimidating to beginners, which would comprise the end-users of the sites.

Layouting in CSS can be a bummer. I had to take care not to break the layout across different browsers. Again, MS refuses to cooperate. IE does its own rendering and interpretation of well-established web standards (read: non-standard). It took a horribly long time just getting the look right. IE is specially fragged when it comes to interpreting padding and margin tags in CSS. The box layout is also buggered.

But all’s well that ends well. I finally came up with a decent-looking site by the end of office time on Friday.

Lessons: think of cross-browser compatibility issues at the onset of the design phase. It will save you a lot of headache later on. When your pages don’t behave the way you expect them to, just stick to standards. Minimize the hacks and workarounds, they tend to break. And, make pages that degrade beautifully for non-standard browsers. If users of these browsers can’t see the extra functionality that standard browsers offer, they wouldn’t know what they’re missing (at least, they couldn’t care less so long as the site remains usable). In the end, it would be best to recommend a better browser.