Alex Blog: Use text-algin:right for table

Alex Blog: Use text-algin:right for table

So what is the solution?
Below is sample of center table alignment.

<STYLE>
#container {text-align:center;}
#area {
 width:600px; border:solid 1px black; text-align:left; 
 margin-left:auto; margin-right:auto;
}
</STYLE>
<DIV id="container">
  <TABLE cellpadding="0" cellspacing="0" border="1" id="area">
    <TR>
      <TD>
      This is a table.
      </TD>
    </TR>
  </TABLE>
</DIV>

People also were talking about the solution in
here.

CSS Comparison Chart

A nice comparison of CSS features in the latest/future browsers.
Summary

Calculation of support of currently displayed feature lists

	Internet Explorer	Firefox	Safari	Chrome	Opera
Past	6.0: 4%	2.0: 35%	3.1: 47%	0.2: 55%	9.0: 38%
Present	7.0: 12%	3.0: 53%	3.2: 69%	1.0: 55%	9.6: 62%
Near Future (2009)	8.0: 31%	3.1: 82%	4.0: 85%	1.*: 55%	10.0: 68%
Future (2010 or later)	9.0: 31%	3.2: 92%	4.*: 87%	2.0: 79%	10.*: 73%

At this point, IE is very behind and lock down all proprietary, like buggy "filter".

acid3 test

Today, Apple just release Safari 4 beta. The interface is much similar its sister Chrome. The top site view is impressed.

The only interface issue is "New tab (+)" is too close the minimized icon.

Try Acid test 3, score 100. Firefox 3.1 beta 2 is 93. IE 8 rc1 is 20. Looks like Apple put a lot of resource on it.

In the javascript canvas line chart test, Safari 4 beta is much smooth.

Got to try grammar test later.

Vertical Text

Firefox 3.1 comes with css transform. I learn IE also has matrix equally.

Previously, I use writing-mode: tb-rl; filter: flipv fliph; for IE vertical text. Unfortunately, the text is very jagged after rotated. I decide to give matrix a try.

For IE, method 1

<style>
.vt {
writing-mode: tb-rl; filter: flipv fliph; 
white-space:nowrap; font-size:12px; font-family:arial; letter-spacing:2px
}
</style>
<div class="vt">Vertical Text</div> 

---

For IE, method 2

<style>
.displayretainer {
width:160px;text-align:right; z-index:25; 
font-family:arial; font-size:12px; letter-spacing:2px
}
</style>

<div id="vt" class="displayretainer" 
style="filter:progid:DXImageTransform.Microsoft.Matrix(M11='1.0', sizingmethod='auto expand');">
Vertical Text
</div>

<SCRIPT>
var deg2rad = Math.PI * 2 / 360;
function setRotation(obj, deg) {
  var rad = deg * deg2rad;
  var costheta = Math.cos(rad);
  var sintheta = Math.sin(rad);
  
  obj.filters.item(0).M11 = costheta;
  obj.filters.item(0).M12 = -sintheta;
  obj.filters.item(0).M21 = sintheta;
  obj.filters.item(0).M22 = costheta;
}

setRotation(document.getElementById("vt"), 270)
</SCRIPT>

Still, the text is very jagged. The matrix filter is quite mathematical. Not sure any other attribute can smooth the font.

style vertical text

Previously, I have a vertical text sample.

Today, I replace the line chart y-axis label with it.
Unfortunately, IE does not come out good render.

I think the issue is in the filter (filter:flipv fliph;).

Insurance Scam

Another number I got was (304) 369 0968.

Many people complaint to it :
http://whocallsme.com/Phone-Number.aspx/3043690968

When I do phone number reversed look up. 3 records found :

Found 3 Results for (304) 369-0968 in WV

Residential Listing R Aldridge Jeffrey Jeffrey, WV 25114 (304) 369-0968 Residential Listing R J Aldridge Address Unlisted Madison, WV 25130 (304) 369-0968 Residential Listing Allen Barker Address Unlisted Jeffrey, WV 25114 (304) 369-0968

My guess this is cell phone number and those 3 people were prior owned this number.

WinMerge - copy particular line

WinMerge is a great tool to compare.

There is still one feature I am still looking for.
In a block (multiple lines) of difference, I only want to merge a particular line.

Right now, I need to do three clicks
a. Select Line Difference
b. "Copy" it.
b. Go the other side, then "Paste".

I wish it can be done in one click.
I have latest WinMerge (2.10.0.0). I don't find this kind of feature. Not sure any kind of plugins can do that.

Photo Scam

When I picked up my phone, I heard "This is the second warning .....".

I really hate the phone scam. A lot of people get that, too.

Does people really need to do business like that? Got to stop that.

Use style sheet to control SELECT box height

I try to make a SELECT and DIV side by side with outline (style by border) in the same height; unfortunately, IE6 has always few pixels short.

I play it more. This situation only happens on heavy styling -- font is problem.
So, I try to set my SELECT with fixed size font (font-family:monospace,Courier,Courier New;), then both SELECT and DIV are in the same height.


<html>
<head>
<title>Control SELECT height</title>
<STYLE>
BODY, TABLE, TD, TH, P, OL, LI, INPUT, SELECT, BUTTON {font-family: Verdana, sans-serif; color:#343434}
</STYLE>
</head>

<body>

<TABLE width="100%" border="0" cellpading="0" cellspacing="0">
<TR valign="top">
<TD width="50%">
Avialable List <BR>
<SELECT SIZE="7" NAME="available" id="available" STYLE="width:100%; height:96px;">
</SELECT>
</TD>
<TD style="padding-left:1em">
Description<BR>
<DIV NAME="detailPanel" id="detailPanel" STYLE="width:100%; height:96px; border:1px solid blue">
 
</DIV>
</TD>
</TR>
</TABLE>
<BR><BR>

<TABLE width="100%" border="0" cellpading="0" cellspacing="0">
<TR valign="top">
<TD width="50%">
Avialable List <BR>
<SELECT SIZE="7" NAME="available" id="available" STYLE="width:100%; height:96px; font-size:12px; font-family: monospace,Courier,Courier New;">
</SELECT>
</TD>
<TD style="padding-left:1em">
Description<BR>
<DIV NAME="detailPanel" id="detailPanel" STYLE="width:100%; height:96px; border:1px solid blue">
 
</DIV>
</TD>
</TR>
</TABLE>
<BR><BR>

</body>
</html>


You can only see the result correctly in web, not open from file system.

Use text-algin:right for table

Try the following code to align inner table (print) to right.

<TABLE width="100%" cellpadding="0" cellspacing="0" border="1">
<TR>
  <TD><H1>Header</H1></TD>
  <TD style="text-align:right">
    <TABLE><TR><TD>Print</TD></TR></TABLE>
  </TD>
</TR>
</TABLE>

In IE, that is straight forward -- I got "Print" to the right side. But, not Firefox.
According to http://bytes.com/forum/thread100308.html "The text-align property affects, by CSS specifications, the alignment of text lines inside the element. The inner table is a block element, so it is not affected.", that is make sense to me. However, it just give my style sheet more complication.

IE 8 beta 2

Just installed IE 8 beta 2. Before I installed it, I need to go through a whole bunches of windows update -- they were incredible huge.

The most obvious change I noticed is tabs. Better interface is always plus.

The long time most inconvenience feature in IE is open new URL by hitting "Ctrl+l".
In Firefox and Safari, the window focus move to address bar once "Ctrl+l" hit.
However, IE 8 still comes out a small pop up.
The problems are :
1) It covers up some page content.
2) This pop up can be fake by malicious site.
3) It has very short text field.
4) Unfortunately, when new page open, the url don't show in the address bar. Well, it's beta.

UPDATE :
IE 8 is going to have another beta and not going to release this year.

Headache on IE settings

I put a log in to the front page (http), but I put log in to a iframe (https) to make sure user always use https to log in and has less chance to be hacked.
But, I got "allow sub-frames to navigation across different domains".
I have main window and iframe all in the same domain, but just http and https difference. Why IE send up this warning by the default? It's getting annoying.

NetBeans

I heard all good things about NetBeans, but I don't good story so far.

My first complaint is the output window font is very ugly.

I don't know why NetBeans people can't fix 43165.

onmouseout and onmouseleave

onmouseleave is only for IE, but is helpful to suppress the event from the children nodes.

Some introduction in http://www.quirksmode.org/js/events_mouse.html.

Actually, I am looking how to have cascading menu disappear when mouse out.
I hope this example http://bytes.com/forum/thread553630.html is going to help. Got to try it later on.

knol

CNet report :
Google's Wikipedia rival, Knol, goes public

Just created an article and saved, but I did not see where was it.
Click My Knols, but always go to search page. Not quit good experience.

button size

Try to fine tune button size.

IE has long button bug, to work it out try this solution.


FF also has a problem, which can not make it smaller (can't remove padding).
According to http://www.designdetector.com/demos/buttons-padding-demo.html,
3px padding left and right, and 1px padding top and bottom appears to be added even when zero padding is applied. Looking at bugzilla, I found Bug 140562 – button control with 0px padding still displays a frame around its contents. Hope it will be fixed in the 3.1 release.

File upload statistics

The syntax should like

<input type="file"
maxsize="xxx"
progressInitColor="color1"
progressFilledColor="color2"
>

Also, file object should have "progress" properties, which show what is uploading percentage. So, javascript function can read that.

For the UI, once the file is starting to upload, INPUT file area show progressInitColor as background color and progressFilledColor flooding in base on uploading percentage. Also, the upload percentage number show next to file name.

This is what I think.

I saw some of ajax implementations show the file upload status bar. They are all by stage, not really progressive. As browser security, server don't know the file size until fully upload, so there is no way to use ajax to create real progress bar.

Notepad++ - replace a pattern with line break then sort line in the order

There are something new in the Notepad++ 5.0.

I can replace a pattern with line break.
Let's say I have

"AAA" "BBB" "CCC" "ABC"

I enter CTL+F to open Find, then switch to Replace.
In Find What, I enter " " and Replace With \n, then I need to check Search Mode > Extended (\n, \r ...). Then hit "Replace All" button.
I got

"AAA
BBB
CCC
ABC"

I just delete two quotes simply.
Then in the menu > TextFX > Text FX Tools > Sort Line ...

That's all.
Notepad++ is getting better and better,

PHP VS JAVA

1. 
   PHP is easy to develop and deploy.
   


2. 
   Java is programming language, but PHP is only presentation layer for web.
   
   
   
   1. Some feature PHP can't do that.
      
   2. Java is sophisticated. Java has more libraries.
      
   3. Java can do thing more organized. People is arguing PHP code is messy.
      
   4. Ideally, we would like to some layer in the application for better developer collaboration, like presentation layer, logic layer, database layer.
      
   
   


3. 
   PHP is still evolving and some fundamental structure is not well planned. New version of PHP add some lack features. However, when update to new version PHP, backward compatible is big issue.
   


4. 
   More vendors support java. More enterprise certify java. More community force for java.
   


5. 
   PHP use oci to connect database. OCI is considering faster than thin drive, but more depend on system environment. Oracle suggest to use thin driver as server-side internal driver.
   

Notepad++ - Replace a Pattern with Line Break

I can replace a pattern with line break much easy with latest jEdit; however, I found notepad++ is more lightweight and powerful. So, I intend to use notepad++.

Notepad++ has so many options, configurations and tools. I intend to it can do many jobs.
However, it takes me a while for how to replace a pattern with line break. The tricky part is how to put line break into "Replace with". I tried "\n", but not translate to line break. Also, tried "crtl+enter" key. Still no.

After, I look at http://forums.whirlpool.net.au/forum-replies-archive.cfm/911631.html, then it give me some hint.

I need to turn on "End of Line" in the "View" menu, then I copy "LF" into "Replace With".
Then a pattern can be replaced with real line break.

My next goal is to replace HomeSite with Notepad++.