Browser bug when position:relative is ignored on table

Absolutely-positioned children of a relatively-positioned table will be positioned relative to the window, not the table.

A relatively positioned table with an absolutely positioned element placed inside of it will not calculate the correct position - relative to it's parent - but instead render the absolutely-positioned element in relation to the browser window itself. This does not reproduce when the same absolutely-positioned element is placed inside other relatively-positioned elements such as DIVs, however. Best suggestion, should this be an issue for your design, is to avoid the case entirely.

This issue originally documented by Peter-Paul Koch at quirksmode.org (Read original article).

The power behind your website

This is a guest blog post from Doan Phong, my buddy, a web developer from Synble.

There might not be as so easy that nowadays everyone on earth with little money can create their own website. But what behind their website does really matter? There might be a website from a group of people working for free as a hobby with the aim to provide the information or to make a community around them. There might be non-profit organizations making a website just to provide the latest news or benefits for their users. There might be firms that want to make profit from the website.There are thousands of reasons that make a website exists, but let think about your website as a business behind.

A bug in WebKit which can not render outline for a table

The bug is simple. I can not apply an outline to a table. Below is the code I used to test in Chrome and Safari:

[sourcecode language="html"]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
table
{
border: thin solid green;
outline: thick dotted red;
}
</style>
</head>
<body>

<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>

</body>
</html>
[/sourcecode]

In Firefox, you can see the outline drawn starting just outside the border edge. But in Chrome/Safari, you can only see the border.

Firefox	Chrome

Wordaround: N/A

Choosing my thesis topic

Working on mahshelf, barisma, recepist, sf-resource projects sure brought me lots of experiences in web developement. I can list below a few of them and I intend to choose one of them as the topic for my thesis

1. I learned to upgrade a web app from symfony 1.0 to symfony 1.2 (mahshelf.com), that may sound simple but it was a pain in the ass due to the incompatibility between those versions. Manual changes have been made in controllers, routings and even the templates.


2. I learned to optimize a web app, both in the frontend with compressing css, js files, moving the static files to the cdn; and backend (PHP, MySQL optimization). I really had fun when doing those tasks


3. I developed a brand new web app (recepist.fi) with symfony 1.2. If I choose this topic, it will be a complete tutorial on how I have created things around this web app. However, I have not finished developing this app which means I will have to do the research and write documents at the same time. The case is not suitable since I am quite hurry and just want to write things I have been clearly aware of.


4. I am a jQuery fan. Spending time writing jQuery portfolios makes me realize that I have written several useful jQuery plugins and I should  write my thesis about it

So far there are 4 to choose from. I myself find 1) really interesting to write about since there are tweaks, hacks and lots of scripts just to get things done. However, it will be boring for the teachers who give reviews since I am pretty sure that they do not know what I am writing about. And 1) is not truly practical since hardly any web company need this topic.

2) was fun when I did the tasks. Not only they mention a lot about high performance website and web optimization on books and blogs, there are also several FF plugins and open source tools for me to finish the benchmark.  I am likely to choose this because (to be continued)

fiksuhuuto, sentti, kakusuu and maybe all other finnish penny auction sites are just scams

Let's make it simple: stay away from those finnish penny auction sites such as fiksuhuuto and sentti... I spent several hours today on those sites and recognized that the admins add a bunch of ass sucking auto-bidding bots sucking the credits away from the real bidders. I lost money though I havent made any purchase, what an ass ! I hate this shitty fucking scam idea, thought it was innovative at the beginning though.

Detecting browsers javascript hacks in a tweet

Hi folks.

I am recently very fond of the term "code in a tweet" which means that a very useful piece of source code can even fit a Twitter post.  Below here is the shortest javascript that can detect IE browser by Andrea (yeah, IE sucks and we have to detect it to eliminate its problems)

[sourcecode language="jscript"]

IE='\v'=='v'

[/sourcecode]

Moreover, Gareth Heyes has come up with other browser detections and gather them together

[sourcecode language="jscript"]

//Firefox detector 2/3 by DoctorDan
FF=/a/[-1]=='a'
[/sourcecode]

[sourcecode language="jscript"]
//Firefox 3
FF3=(function x(){})[-5]=='x'
[/sourcecode]

[sourcecode language="jscript"]
//Firefox 2
FF2=(function x(){})[-6]=='x'
[/sourcecode]

[sourcecode language="jscript"]
//IE detector I posted previously
IE='\v'=='v'
[/sourcecode]

[sourcecode language="jscript"]
//Safari detector
Saf=/a/.__proto__=='//'
[/sourcecode]

[sourcecode language="jscript"]
//Chrome
Chr=/source/.test((/a/.toString+''))
[/sourcecode]

[sourcecode language="jscript"]
//Opera
Op=/^function \(/.test([].sort)
[/sourcecode]

Usage: The variable assignment is the abbreviation of the browser e.g. FF, IE, Op, Saf, Chr which return true or false.

And this is the most interesting part: one-liner to rule them all
[sourcecode language="jscript"]
B=(function x(){})[-5]=='x'?'FF3':(function x(){})[-6]=='x'?'FF2':/a/[-1]=='a'?'FF':'\v'=='v'?'IE':/a/.__proto__=='//'?'Saf':/s/.test(/a/.toString)?'Chr':/^function \(/.test([].sort)?'Op':'Unknown'
[/sourcecode]
Usage: B will return a string of the abbreviation of the browser
Tell me what do you think? And if you find any cool stuff like that let me know.

MooTools the Ajax experience

[Updated] Sorry to be arrogant and simple minded but I always think jQuery rocks and try to inspire as many people as possible to use or move to jQuery because of  one simple reason: the more users and developers use jQuery the better it is and the more plugins will be created.

[Updated] jQuery 1.3 is out and it is super fast ! Read more



I have once used Mootools for one of my projects and it turned out to be running well. The performance was fast and I had no problem implementing its animation effects and plugins. However, I found several complaints about mootools on the Internet that will affect my choice of JS library in the future.

1. Mootools does not have any well organized or responsive forum.


2. It does not even have all of the many useful threads that were written for 1.1 available. What it does have - a Google group - is so undermonitered that John Resig’s profile shows up on the home page (now what does that say about JQuery responsiveness)! I have never, never! gotten a response to any of the requests I have made on the Google group page, despite my not being a noob.


3. No plugins are available unless you already know where to find them, or you write them yourselves. As oppossed to J which makes it easy to get plugins. Yes I know they posted something on the blog.


4. SVN was dumped for GIT. Maybe not bad from a technical standpoint, but I don’t know how to use GIT, and am not about to start learning.


5. I rarely see the core developers on IRC, probably because we have different hours. But it is very difficult to get answers there, and thread is downright insulting to noobs - no matter how much he wants to learn. Worse though, the channel is not be stored. All of the questions and answers that are served are only to individuals - they cannot be accessed by someone who is searching for an answer. And lets face it - IRC is not good for most users. Is it so hard to have a chat box on the screen that allows for normal people to communicate, or at least to be able to see the thread?! I know a good framework that can be used to write such a tool!