The Main page

Ok, while I'm inspecting the HTML formatting of the front design, here is the immediate #1 suggestion: lose the chunky ViewState for the controls - it dropped from 54KB to 48KB after I cut it off.

I don't think there is any application facilities within the page itself, right?

done. EnableViewState="false"

Heck it's too complicated to manually modify the HTML by hand - too many levels of <table> and <tr><td> without any comments makes it hard for me to identify what is controlling where.

Have a look at unconstrainted page that adjusts dynamically to desktop resolution
http://research.icelava.net/Sgdotnet/SgDotNet%20_%20for%20COOL%20Developers.htm

Just don't ask me where that stray "<" near the logic is coming from.... I can't find it.

Also, the HTML and CSS are actually just fine, therefore IE does render them correctly. I still cannot determine why FF is not shrinking the <td>s with images in the first row of tables. Just to make sure it's not an isolated software fault, checking on my desktop's FF renders the same problem. This is what i hate about pasting images to table cells.

Icelava, once triplez finish the programming, let me clean up the html codes. I'm very used to that liao... been doing that for my church proj, cos my designer uses dreamweaver, which mess up all the codes, and i can't improve it until i clean it up...

Someone from Mozillazine has revealed the phenomenon: baseline gaps
http://devedge.netscape.com/viewsource/2002/img-table/

I've only read it half way, so I'll see later how to get a solution or workaround.

thanks alot.

pls take a look at the main site... I think the font i used is different. So let's standardise the fonts for the website...
1. Arial,
2. Times new romans,
3. Verdana
4. Tahoma
Pls vote

Wow after spending so much time mucking around in Remote Assistance and SVN repo i still haven't checked out the DOCTYPE behaviour of browsers....

Anyway, have a look at the source of my modified example and
1. remove the top level table that's gripping the 3 other tables.
2. give the 3 main tables width="100%"
3. release the width="440" restriction in one of the tables in the central column table.

it is not that easy... i have to resplice the images...
somebody using super high res, the layout don't look nice...

can't remove the any table either...
Cos the main table has three rows, first is the logo,
then the body,
then the footer.
the body is divided in to three columns...

The splicing has already been done, there's no adjustment in graphics images at all. Look at my hi-res capture from my 1280x960 desktop. You just need to "release" those tables and they are free to scale as illustrated.

UPDATE: I've cleaned out the formatting. Check out my public page now. As mentioned in the article, what must be done for those <td> cells is to lace them up with an ImageCell class and have the following rule

.ImageCell img
{
   display: block;
}

then those cells will "shrinkwrap" the image and fit nicely. I have also identified redundant tables and extracted them out to give me less headaches.

There... overcome the spacing by placing all images as background images.. firefox looks ok too, except for the white border around the whole page.

Yeh... All done!
I installed firefox and see... looks ok.
Those who have other browsers, if got problem, let me know... tks!

thanks mr kit kai.

kitkai wrote:

except for the white border around the whole page.

Try the following rules 

body, form { margin: 0px; padding: 0px; }