Tuesday, November 30, 2004

Problem fixed

Stupid me fixed the problem. I basically removed the padding at the bottom. Here's the code now.

#mainMenu {
clear: both;
padding: 10px 10px 0px; /* notice the 0px for bottom */
height: 55px;
voice-family: "\"}\"";
height: 35px;
html>body #mainMenu {
height: 35px;

Another thing I thought I should blog to remind me. Differences between "Margin" and "Padding". Your background images fills up the entire box PLUS the padding. Your text fills up only the box. And margin is the white space surrounding the padding, which will not have the background image.

I feel proud of myself.

Another thing I should take note of is that photoshop generates much better gif files than fireworks, though that might mean I might not know how to generate great gifs using fireworks. But I did used the same default profiles on each application. Anyway, the size generated are different too, but what the heck, everyone's on broadband nowadays.


Problem with Box NOT SOLVED!

I just woke up today, loaded up the website, IT STILL SHIFTS DOWNWARDS. THE BOX STILL EXPANDS WHEN I ROLLOVER IT. WHY WHY WHY!?!?! If I removed the Tantek hack, it works for IE, but gives that horrible white line spacing at the top for FireFox. Apparently they read from the cache, hence giving me correct behaviour. When I emptied the cache, the problem came back. I'm SO PISSED.


Box margin/padding solved

Well, not exactly solved, but here's the code anyway.

#mainMenu {
clear: both;
margin: 10px 0px;
height: 55px;
voice-family: "\"}\"";
height: 35px;
padding: 10px 0px; /* these are the changes */
margin: 0px; /* these are the changes */
html>body #mainMenu {
height: 35px;
padding: 10px 0px; /* these are the changes */
margin: 0px; /* these are the changes */

Well, I thought to myself, since Firefox works with padding, and IE works with margin, may as well use Tantek Çelik’s CSS Box Model Hack method to solve that. And it worked! This method should be called "IE and Mozilla Hacks" or something.

Well, anyway I solve the other problem about my images having a border. Apparently images can't inherit from the cascaded "border: 0;" from anywhere, and therefore MUST specify that in the img css. Every day is a new day with weird happenings from the browsers.

So, I've fixed QUITE alot of boxing issues with the website today, and now the entire website looks more or less the same in both Firefox and IE. Tiring, but excellent job there, triplez! I'll be fixing up the css codes later when I wake up. Now my structural layer looks fantastically clean, but my presentation css codes looks like a rubbish dump. Heh.

Ok, today's a short one as I didn't really research anything and just spent most of my time fixing those visual bugs. More next time with the "Review of Designing with Web Standards" book as promised, and a short article on "Creating proper ASP.Net Custom User Controls with <div>". And, not to mention, awaiting the most anticipated sneak preview of the presentation I'm going to do on 9th December, "Generics on the .Net Framework 2.0". Extremely busy week with lots of writing to be done.


Monday, November 29, 2004

Photos of KL @ MIND

They are up! Get your hot pictures over here!


Box margin/padding debugging tip

Just a tip on how I debug those box margin/padding bugs from those 2 famous but irritating web browsers who doesn't follow the same standards and keep giving me different results.

border: 1px solid black;

Basically I added that in any block of box that I need to check what's wrong with it.

A problem I've been trying to solve in vain is a weird boxing thing in IE. I did something like this.

#mainMenu {
border: 1px solid black;
clear: both;
padding: 10px 0px;
height: 55px;
voice-family: "\"}\"";
height: 35px;
html>body #mainMenu {
height: 35px;

Notice the padding. Whenever I hover over a part of the menu, the (invisible) box EXTENDS downwards. How I know? Everything below it shifts downwards. There's something wrong somewhere with my paddings. But here's the weird thing. I changed padding to margin, and it doesn't extend downwards anymore when I hover over it. BUT, Firefox then again shifts the entire box downwards thus leaving a TOP UGLY WHITE LAYER at the top of the browser. I HATE BOXES IN CSS!

I'll upload the website asap, when I get the other components working.

Saturday, November 27, 2004

Busy week / Css Links Galore

Well, I've been working on the SgDotNet website, converting everything using <div>, and I must say, I'm a convert. <div> rocks. But I'm still not sure whether I've over-designed it and had a bad case of divisitus, but from the tutorials I've been reading, it looked quite alright, in a "component" level. But as a full page, it looks rather packed with <div>. Everyone who looked at the code says it looks extremely neater, more structural and logical, with <div> ids to describe what those segments are.

So, as promised, I was playing around with this Hello application to put up pictures for bloggers, but apparently it's not THAT quite useful. It served its purpose anyway, so there you go, some photos down there. But what the hell. It's there, and hope you enjoy the pictures. I'll post the gallery link once the pictures are up on the SgDotNet gallery.

Onward to XHTML standards! Here's some useful links, or rather A useful link to a fantastic XHTML coding/tutorial website. http://www.alistapart.com. Fantastic tutorials they have there, on CSS.

A few common things I'd like to point out to web client-side coders. CSS liquid layout. Here's a great article from "A List Apart". From Table Hacks to CSS Layout: A Web Designer’s Journey. Some links that gives you ready layout templates. The Layout Reservoir. Little Boxes. Oh, not to mention "The Noodle Incident", a wonderful website on CSS which the "Little Boxes" link came from. He has some rants and a book on CSS, so I might be checking out sometime soon when I pop over to the library. Another link, Glish.com's CSS is another fantastic website on CSS layouts, and his famous "Look Ma, No Tables".

That's for CSS liquid layout. Another thing I'd like to point out is creating menubars out of <ul> and <li>. Here are a few links. Drop-Down Menus, Horizontal Style and Suckerfish Dropdowns from "A List Apart". I love that website. Lots of tutorials on CSS. I used the Suckerfish Dropdown's javascript and some layout techniques from Drop-Down Menus, Horizontal Style. Basically I had to delete everything, and started from scratch by writing all those <ul> and <li> without any styling, then slowly adding piece by piece. The trick to getting the horizontal working is position: relative; I think, but I can't quite remember it. So yeah, read those articles and you'd be half a guru.

Another thing I needed was how do I create boxes surrounding my text, and how to slice it and display it using CSS. Here's a great article that helped me do it with with the navigation bars at the side. CSS Design: Creating Custom Corners & Borders and CSS Design: Creating Custom Corners & Borders Part II. Again, both articles are from "A List Apart".

A few tips that helped me through the browser problems of "96% of the entire world is using" browser, but yeah. Here's Tantek Çelik’s CSS Box Model Hack to fix some misunderstandings of the standards by that browser. There is another one, but I can't quite recall it now. Anyway you have to use that technique if you ever have any margin or padding. YOU MUST! Another tip is from WaSP which gives you some methods on how to "upgrade" or "degrade" your website on older browsers. Fighting for Standards in Our Browsers.

I was also reading Eric Meyer on CSS: Mastering the Language of Web Design and More Eric Meyer on CSS (Voices That Matter) which in fact are more tutorial/walkthrough books than descriptions. But the latter book helped quite a bit on the menu bars I had to create for the SgDotNet website. I've yet to find any useful tutorial/walkthrough from the former book.

I actually finished reading "Designing with Web Standards" at the beginning of this week, and have been using a few of it's techniques quite often to convert the SgDotNet website over to CSS layout, and I'll do a "Summary" cum "Review" on the book soon enough. It'll be on pdf and I'll post the link here, and there will be a html copy up on the SgDotNet website once I'm done with it, which the schedule states, 1st December 2004. Good luck to me.

Oh yes, as mentioned before, and promised, I'll be writing an article on how <div> and CSS would be beneficial to user custom controls, and it will be up hopefully by next week when I've completed converting the website. That's 2 articles I'm promising. I'll also post up the link on the Generics on .Net Framework 2.0 presentation that I'll be doing for the SgDotNet User Group Meeting on 9th December 2004 soon enough. Wish me luck.

Oh btw, just to clear up some air, this blog is really meant to store all my findings and links and book titles so that I don't forget about it. Some place to archive everything that I've researched on, and hopefully will be beneficial for you guys. I won't be writing much on my life, so sorry about that. Basically my life does revolve around everything that's posted. Such a no-lifer huh.

I guess that ends this session. Will be posting again soon!

Tuesday, November 23, 2004

1st lesson learn in KL.. Breast Feeding. Posted by Hello

Chye Yaw on BizTalk again Posted by Hello

Triplez again, Ever wonder how I get my nick Triplez Posted by Hello

Paladin meeting 03 Posted by Hello

Tallest building, Twin Tower Posted by Hello

Paladin meeting 01 Posted by Hello

How to breast feed? Educational lesson!!! Posted by Hello

Initial Crowd Posted by Hello

Chye Yaw on BizTalk Posted by Hello

After break.. Is Terk Sean yawning? Posted by Hello

Look at that amount of people.. More than our Nov UG.. Posted by Hello

Triplez again. Posted by Hello

Fook Hwei on SQL Server CE Posted by Hello

Paladin meeting 02 Posted by Hello

Don't you think this look like a circuit board Posted by Hello

Sony Robot  Posted by Hello

Me and Serena with our SGDN Shirts Posted by Hello

Sunday, November 21, 2004

Back in Singapore

I would like to sincerely thank everyone from MIND for being such a wonderful host, especially Sue Ching for allowing us to crash at her place, and Ramin and Terk Sean for bringing us around KL and bringing us to KLCC Twin Towers, and Sin Min for treating us to dinner, and naturally Serena for just being there to support me all the way when she wore our own SgDotNet shirt. Not to mention Fook Hwei for just being there and talking to me. :)

I hope this trip down would start a new beginning in our relationship with MIND and other user groups. I felt that this trip was quite successful, and I learnt quite a lot from the you guys.

Thank you all, and once again, thank you.

The pictures I took will be posted soon. I just woke up.

Saturday, November 20, 2004

Safe in KL

Well, I survived the 6 hours trip here. Apparently it was 6 hours and not 5, *groans*. But I survived and still alive and kicking. Thanks to the people at MIND for being such a great host and offering me a place to crash.

The first few pictures I took in KL were my host's dog, and her puppies. They're so cute! I'll post the pictures later when I've got time. Had a fun time playing with the puppies. I can't remember the name of the breed though. Oh well.

I did quite alot of reading during the bus ride, occasionally taking breaks off the book "Designing with Web Standards" to avoid puking all over the coach. I'm almost half way through. I'll write a review on it when I'm done. If you notice, what I'm typing here is almost a review already. I'll just copy and paste and add and brush up on the sentence structure to create a proper review.

It's quite an interesting book that approaches web standards in a lenient way, coaxing everyone to eventually follow what XHTML and CSS were intended for.

I've completely finished the first part of the book, which is "Houston, We Have A Problem", which talks about why XHTML and CSS is good, why customers should change their mindsets on legacy browsers, and so on. It's more for the business side of web development, trying to convince the management that following the web standards are good, and that web standards are matured enough. Not my cup of tea, but I browsed through anyway, and learnt quite a few things about the history of the web, and how it evolved from a "snatching the pie" to a "sharing the pie". I too think that it's time we embraced the new standards and follow closely and strictly to it, but of course, the wonderful thing is they also provide a less strict version called the XHTML transitional, for people who are too used to the old style HTML. For me, I like to keep my code strict.

The second part of the book is more technical, and much suited for people like me. There's a few things I'll like to point out, that I find it very useful.

9 Rules of XHTML (from Designing with Web Standards)

  • Start your html file with a proper DOCTYPE and namespace
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    (Who actually memorises these stuff anyway!? Here is the link to these templates - http://www.webstandards.org/learn/templates/index.html)

  • Use META Content element to declare your content type
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

  • All elements and attribute names are in lowercase
    <body> instead of <BODY>

  • Put quotes to all attributes
    <table width="75%"> instead of <table width=75%>

  • Assign values to all attributes
    <td nowrap="nowrap"> instead of <td nowrap>

  • Close all tags
    <p>Text</p> instead of <p>Text

  • Close empty tags with a space and a slash
    <br /> instead of <br>

  • Comments should not consist of any dashes between it
    <!-- Test --> instead of <!---------- Test --------->

  • Use Markup symbols instead of the symbols themselves
    &lt; instead of <

Those are all about it. Surprisingly simple, don't you think? Follow those closely and you will almost have a valid XHTML page. I'm still reading more stuff about how to code the entire page in pure Presentation and Structure seperately. I'll post more when I'm through with it.

Here are some great links from the book.

Learn how to code css in the most experimental way ever.

Web Standards Project - Learn more about the standards in layman's term

W3C Validation Service - Check if your webpage is valid

Tidy - convert your current HTML to a neat and almost proper XHTML

Well, I've got a presentation to do in the afternoon, and I've got to wake up in 3 hours. I'll write more later today and post some pictures I took of the cute puppies.


Thursday, November 18, 2004

More on web development

Just saw an interesting book at Clementi Bookstore today.

Open Source .NET Development : Programming with NAnt, NUnit, NDoc, and More by Brian Nantz

Looks like a good book that I'll pick up next time, or borrow it from the library. Reasonally priced too.

More about my life:
Today's quite a tiring day. I'm sick again. Down with the big bug flu. I went to meet SIG^2 guys today to discuss some collaborations with them and SGDN. I guess the meeting went well. Hope everything works out fine.

I hope I recover from this flu soon. The medicine's making me drowsy and tired so I can't really blog anything today.

Web Development:
Read 1/4 of "Designing with Web Standards" today, still reading the 1st part of the book where they talk about the benefits and revolution of web standards, in the more business sense. That part is more for managers and such, but I guess I'll just breeze through it to get a rough idea on the Web and its legacy.

Quite interesting discussions on how horrible web browsers were back in the early days. That's actually one of the reasons why I didn't hop on to the web development at that time, because it was just simply too tedious and too many code versions to write for different browsers.

But after reading a few chapters from the book, I'm starting to think that web development is really ready for me to take on, with it's strict coding, and the trinity of web standards and development, plainly put, Structure(data), Presentation(layout) and Behaviour(scripting). I think it's quite matured enough to start picking up web development seriously.

A first impression review on the book is that it really gives you the lee-way to choose what and how you want to code your html, and does not enforce you to only 1 strict possible way of doing it, but gives you a variety of options to choose from. It also has a quite open view on web standards, and it isn't really an evangelist book that non-sensically press down dogmas and crazed purist thoughts on CSS and XHTML seperations. I like it's open approach that allows you freedom of choice, but provides you with alternatives too. I'll most probably stick to the strictness, coming from a C++ background.

Previously in 1996 when I wanted to go into web development, it was the hottest thing back then, I had alot of trouble understanding the loosely structured tags and inconsistencies of codes between browsers, and lots of browser checking codes, which basically pissed me off, so much that I threw a HTML book out of the window, literally. But with the XHTML standards that's out now, and every browser is almost standardized to follow the web standards, I feel it's finally time to come out my shell and plunge into the web development.

I'm still currently using tables to style my layout for my website, but after I'm finished with this book, trust me, I'll start recoding everything from scratch to support the wonderful strictness of XHTML. Furthermore, I'll write more about control development with XHTML STRICT DOM. Look forward to it.


Wednesday, November 17, 2004

Designing with Web Standards

I just borrowed this book, "Designing with Web Standards" by Jeffrey Zeldman, from the library today (just 2.5 hours ago actually). It was recommended by the guy who wrote "Creating Websites by Hand" in the previous post, "Some Website Tips". Here's his website. http://www.zeldman.com/dwws/

I've just started reading it, and it looks quite interesting, in terms of that it's no ordinary "tutorial" book which teaches you everything, but more on coding design. It feels much like "Design Patterns" for websites.

So far, benefits of using CSS layout instead of table layout reduces your html code by more than half (wow... impressive), and because of that it improves the loading speed. The rest of the other benefits doesn't really seem that much of a biggy thing to me, but I'm really more interested in how this way of coding will actually help in my creation of custom controls for ASP.Net.

A few things I must clarify with my previous post on "Some Website Tips", for those who doesn't know, those codes are actually for custom controls. Just to add on to what I mentioned earlier, if you write your own custom controls, you'll end up having problems with your html close tags as it might have to exist in another file if you use the normal table layout concept. But if you use the CSS layout concept, meaning using <div> to style your layout, basically you can close your tags within the same file. So your entire custom control can exist within a <div> tag.

Now that's what I call proper coding. For web development.

Upcoming events:
I'll be going KL during this weekend (Saturday, 1 day) to attend the MIND meeting at the Twin Towers, so I might not be able to post on that day, but I'll post some pictures on Sunday. I hope I survive the coach trip, 5 hours there and 5 hours back. *Groans*

Anyway, I've got to sleep soon, but I'll leave you guys with a quote from Jeffrey Zeldman.

"Web Standards are a continuum, not a set of inflexible rules." - by Jeffrey Zeldman

Tuesday, November 16, 2004

Regular Expressions Library

Just a link I'd like to share with everyone.

Regular Expressions Library

A friend of mine was asking me on how to formulate a regular expression for his particular string, well, being the lazy me, I couldn't think of anything. Writing regular expressions is an art, that I don't think I'll ever get to that. So I recommended that link to him. It's quite a useful place to search for already formulated and thought up regular expression for all the common expressions for your strings.

Another great tool to use when creating regular expressions is The Regulator. But apparently the site is down at this moment of writing. I'm not too sure what happened to it.

Anyway this is just meant to be a short post.


Some Website Coding Tips

Creating Websites by Hand

I feel stupid after reading this article, because I've always been coding websites and writing the layout using <tables> and <tr> and <td>, but this article (yes, I'm kind of outdated) teaches you how to use the modern XHTML way to do it. It teaches you the basic stuff of dividing your code into layout and data (or text, whatever way you want to see it). Layout being the CSS file, and data being your text you wanna show.

I'm not much of a web developer, but I've recently learnt quite alot about web development, especially using CSS (Cascading Style Sheet) extensively. But this article brings it to an entirely whole new level for me. I'm quite excited to try it out.

Anyway I've been working on the SgDotNet website for some time, from time to time updating it, and improving it. But using <div> and CSS to completely disect your layout/style and data would be interesting to do, and I would love to try it out on the SgDotNet website.

Another thing I see this different way of coding your webpages would be dividing your webpage into sections, e.g. header, sidebar, menu, content. The thing about this, why I'm touching on, is because each section are enclosed in a <div> and the styles are controlled by your css file. Furthermore, creating your templates would be much easier using ASP.Net, i.e. Masterpages, because currently I'm using tables and it's quite the mess. Using <div> tag to seperate it into different sections would be excellent in this case.

Oh btw, perfect masterpages framework to use. Grab it from MetaBuilders - MasterPages Templating Framework. It beats waiting for ASP.Net 2.0's Masterpages.

Anyway, back to code.

in the header.ascx file

<% @ Control Language="C#" %>
<!-- add your inline code -->
<div id="header">
 <!-- add your content header -->

instead of doing something like this (which is what i'm currently doing)

<% @ Control Language="C#" %>
<!-- add your inline code -->
  <!-- add your content header -->

Ok. Did I mention my html sucks? Did you know HOW freaking difficult it was to type those code? Can anyone tell me how to write html code in blogger?! Life would be SO much easier because I'll be writing LOTS of code here! Dang.

Anyway back to that example. Notice how bad the tables method was? Basically there wasn't a close table tag, i.e. </table> which totally sucks because you'll have to close it somewhere. And it screws up everything if you don't know where to close it. Bad coding. In my sense at least. Using <div> looks alot much better, well formatted, well structured, and it closes within the same control page. Perfect. Nothing to worry about closing tags.

Enough of my chattering. That was something I'd like to share with everyone. Hope you guys found it interesting. For those who are still stuck to tables, and do server-side web development, PLEASE take a look at this method. It's much better and cleaner, and guarantees proper html structure, instead of putting your close tags in another file. And of course, the other benefit is that layout is seperated from data. Not quite an exciting feature for a developer like me.

As you can see, I diverge and converge quite alot on my thought process, branching out to various other sub-topics and sometimes never coming back to the original topic, but bear with me, I'll try to do better as I write more.

First day blogging

Finally, I got my own blog. Do you guys know the hassle of actually thinking up a name, a nickname AND a sub-domain name for your blog when practically every possible name has been taken up? Anyway, just some introduction to this blog. It's my own personal blog which I intend to put up anything I want, from quotes I find funny, to my own thoughts, to some interesting links I'd like to archive. Great place to share links and information. I'll also be writing some commentary on the technology scene, if I have some quirks I'd like to bring up. Maybe some tutorials or even my up-coming presentations. I'll also be customising my blog as time goes by, and put up some of my favourite links I go to, and more things to let you guys know more about me. So, I hope you'd enjoy my blog and my eccentricity.