Tuesday, 31 March 2009

HOWTO: outer DIV can not cover element with FLOAT style

Normally, all the content in the outer DIV will inherit the css styles from it, such as background.
But when the float style is used for inner tag, this part of content may come out of the outer DIV. Also, if you are using Firebug in Firefox, when your mouse is hovering on the outer DIV, the browser then will not cover all the parts inside the DIV.

All are because the FLOAT style.

In this article, Simple Clearing of Floats, 4 methods are intorduced to fix this 'bug', which appears in Firefox, Chrome, while not in IE, this did supprise me. Normally IE is more buggy in my opinion.

My favorite method is to append the outer style with 'overflow:auto'. Then, the floated part will be covered by the outer DIV, no matter the background issue or the selection problem in Firebug.

See also: (other conflicts with some attributes)
text-align for normal div tag ( this will not work 100% in table with align attribute, this will be ignored) and align attribute for table: here

style of marquee in div ( style of div will not work 100%)

Sunday, 29 March 2009

40 Beautiful PSD Slicing Websites

From: http://designmovesme.com/40-beautiful-slicing-websites/

March 27, 2009

Correctly slicing a PSD into XHTML & CSS is an art that takes time to master. If development and coding is not your thing, there are companies that will take your web design file and bring it to life. There are several factors to consider when choosing a PSD slicing company, and one of them is the design of their own site. If their design appears to be low quality, what is their code going to be like? In this article, I’ve listed 40 PSD slicing companies with beautifully designed sites.

40 Beautiful PSD Slicing Websites






HTML Burger

Feather Code

The Designer’s Chop Shop

CSS Rockstars

CSS Ninjas


The Choppr





XHTML Slicer


xHTML Master





We Do Markup

W3 Markup







PSD to WordPress


PSD to Any






Outline to Design

Tuesday, 24 March 2009

Javascipt onload confclits

Normally there are two ways to run javascipt when html page is loaded:

  1. window.onload=INLINE_FUNCTION_NAME, is normally used to make specific javascript runnable when the html document is loaded.
  2. general javascript function, like "function FUNCTION_NAME() {... }; FUNCTION_NAME();"
The problem of method 1) is that one page only can have one onload function. there are always conflicts in Joomla or drupal which use a lot of javascript for functions.

The problem of method 2) is that when the function started, maybe the html document is not fully loaded.

To solve this, 'domready' from mootools helps a lot and improves the loading speed very much. See domready vs load.
Insert mootool.js (optional for Joomla, But required for local html test)
<script type="text/javascript" src="mootools.js">

You should go to mootools.net to download the latest mootools.js.

Monday, 23 March 2009

HOWTO: Joomla CSS drop-down menu (javascript for IE6)


At beginning, I compared the two drop-down menu raw methods:

Both of them are using suckerfish CSS methods to diminish javascript usage from DHTML.
Because IE doesn't support 'hover' status on 'li', only on 'a'. to solve this problem, there is some javascript for IE, using 'onmouseover'.

The difference between the above two javascript methods, one uses 1)'document.THECLASSOFTAG.getElementsByTagName("LI")' to retrieve <li>, while 2) the other uses 'navRoot.childNodes......' with loop to find out all <li> within the range, which defined by 'document.getElementById("THEIDOFTAG")'.

Javascript in method 1) is NOT supported by IE 6 and 7, even Firefox. This only affect IE 6, others don't need javascript to achieve this drop-down menu.

But, the 'hiding method', which uses 'left:-98%' to hide the submenu from screen is very good and secure, compared with the method using 'display: none', which used in method 2).

Method 2) is just traditional way to parse the html document. But it's for pure HTML practice, not exactly for Joomla.

Therefore, I modified above 2 methods, to make it easily setup on Joomla 1.5.

Make Joomla Drop-Down Menu without install anything

1. Create your Menu with the following Hierarchy:

Menu 1( globalnews ).

– Menu 1 Sub Menu 1 (test).

– Menu 1 Sub Menu 2 (test).

Menu 2( uknews ). // this menu have no submenu

2. Make sure the parameters are set to.

• Menu Style is set to List.

• Always show sub-menu Items is set to Yes.

• Menu Class Suffix is set to -nav - you can pick you own, but then make sure you change it in CSS & JS files. So you will get your menu within

All the menu strcture will be like this ( this can be found from your scource from IE or Firefox:

<div class="pill_m">
<div id="pillmenu">
<ul class="menu-nav">
<li class="parent item63"><a href="/globalnews"><span>Globalnews</span></a>
<li class="item75"><a href="/uknews"><span>test</span></a></li>
<li class="item76"><a href="/uknews"><span>testtest</span></a></li>

<li class="item61"><a href="/uknews"><span>uknews</span></a></li>


here, the 'div class="pill_m"' and 'div id="pillmenu"' is what I put in the templates/MYTEMPLATE/index.php to help me setup the css style.

3. Insert this piece of JS in your template index.php 'head' tag, or in java script file that’s called from index.php.
<!--[if IE]>
<script type="text/javascript">
window.addEvent('domready', function()
if (document.getElementById) {
//navRoot = document.getElementById("pillmenu");
ulTag = pillmenu.childNodes(0);//navRoot==pillmenu, which is a 'id'.
for (i=0; i<ulTag.childNodes.length; i++) {
node = ulTag.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className=temp_cn.replace(temp_cn, "sfhover")
node.onmouseout=function() {
this.className=this.className.replace("sfhover", temp_cn);
  • Here <!--[if IE]> make this script just work for IE, to improve the performance of Fifrefox,safari, they do need such javascript to make the dorp-down menu.
  • window.onload=INLINE_FUNCTION_NAME, is normally used to make specific javascript runnable when the html document is loaded, BUT, in joomla, there always a lot of javascript block in the pages, and one page only can have one onload function. To solve this, 'domready' from mootools helps a lot and improves the loading speed very much. See domready vs load.
  • Even using general javascript function, like "function FUNCTION_NAME() {... }; FUNCTION_NAME();", will not work properly, because when the function started, maybe the html document is not fully loaded. Still, mootools domready event helps.
4. Insert mootool.js (optional for Joomla, But required for local html test)

<script type="text/javascript" src="mootools.js">


You should go to mootools.net to download the latest mootools.js.

5. Here the corresponding CSS
<style type="text/css">
/*** Copied menu ***/
.pill_m {
text-align: center;
margin: 0 auto;
padding: 0;
background: url(../images/menu.jpg) top center repeat-x;
width: 100%;
height: 41px;
#pillmenu {
margin:0 auto;
#pillmenu ul {
margin: 0;
padding: 0 22px;
list-style: none;
#pillmenu li {
float: left;
margin: 0;
padding: 0;
height: 49px;
background: url(../images/menu_li.jpg) top right no-repeat;
#pillmenu li:hover {
#pillmenu li a#active_menu-nav {
#pillmenu li a {
font-family: Verdana,Helvetica,Arial,sans-serif;
font-size: 13px;
/* float: left;*/
display: block;
line-height: 39px;
padding: 0 24px 0 16px;
color: #111111;/*color: #FFFFFF;*/
text-decoration: none;
font-weight: bold;
#pillmenu li a:hover {
color: #CCCCCC;
.pill_m li ul { /* second-level lists */
position: absolute;
left: -98%; /* using left instead of display to hide menus because display: none isn’t read by screen readers */
.pill_m li:hover ul, .pill_m li.sfhover ul { /* lists nested under hovered list items */
left: auto; /* change is to 10px, 20px, etc for indenting the sub menue */
z-index: 100;
#pillmenu li.parent ul li, #pillmenu li.sfhover ul li{
background: url(../images/menu.jpg) top center repeat-x;
#pillmenu li.parent ul li a, #pillmenu li.sfhover ul li a{
font-size: 10px;
line-height: 20px;
Here the background can be changed as you want, or set it 'none' or other colors.
Have a try, If you got any problems, comment here to let me know.

Wednesday, 18 March 2009

CSS Differences in Internet Explorer and FireFox

1) parentElement

innerText VS elem.firstChild.nodeValue;
This uses W3C DOM compliant properties to retrieve the text value of the first TextNode of the cell. This makes it more likely to work across browsers.

2) Width in IE and Firefox

According to standard (that FireFox follows), content width is set excluding paddings and border(see figure there).
"The size of the box is the sum of the element width (i.e. formatted text or image) and the padding, the border and the margin areas".

But in IE the width of the box is the width of the content plus any border or padding.
In other words:
width(IE)="padding-left"+"border-left"+ width(FF) + "padding-right"+"border--right".

DETAILS: http://geekswithblogs.net/mnf/archive/2008/02/13/differences-in-internet-explorer-and-firefox-css-and-javascript.aspx

More tips can be found in Adrian Anttila's post JavaScript differences in Firefox and Internet Explorer

Tuesday, 17 March 2009

Which CMS? Drupal vs. Joomla vs. Wordpress

Here is a video from 5th Ultra Light Startups. There are 3 people from Drupal, Joomla and Wordpress, who are introducing these 3 CMSes.

A basic idea can be got when you see this video, more details can be found on http://www.packtpub.com/open-source-cms-award-previous-winners.

Monday, 16 March 2009

IE CSS: texts display incompletely

Some texts, huge ones, bigger than 20px, especially link (<a>), will not display completely in IE. Always missing the top part of the characters.

1) This just happens when the texts are embedded in 'table', while no problem with 'div'.

2) Not the problem of the height of 'tr'. No matter how you change it, it will not fix it.

3) The real reason is the 'line-height', which normally declared in 'body' part.

in the specific table, to use class or ID to select the table you want to modify, add 'line-height', make it 10%-15% bigger than that declared in body part.

This variable is just like the line space we always use in OFFICE WORD, normally I set it to 1.5, to make it look comfortable.

Friday, 13 March 2009

Php, Joomla: alphacontent(joomla component) show youtube thumbnail

A very good frontpage component for joomla, AlphaContent, can pick up photos from article as thumbnail on the article list. However, it just pick up thumbnail for articles, which have photos inside, not for those only embed video object.

Modify the 'function findIMG( $contenttext, $showfirstimg)', in /components/com_alphacontent/assets/includes/alphacontent.functions.php, will solve this problem.



$contenttext = <<<youtube
<div><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" width="425" height="350"><param name="width" value="425" /><param name="height" value="350" /><param name="src" value="http://www.youtube.com/v/e_0oqGy0OyY" /><embed type="application/x-shockwave-flash" width="425" height="350"

$showfirstimg = '1';

//<img width="20" src="http://cnfeed.co.uk/images/stories/screenshot.png"></img>

function findIMG( $contenttext, $showfirstimg ) {
$image = "";

// check is there any img tag/images
if (preg_match_all('#<img(.*)>#', $contenttext, $match0) ) {
if ( count($match0) ) {
$n = sizeof($match0[1]);
if ( $showfirstimg=='2' ) {
$contenttext = $match0[1][$n-1];
} else $contenttext = $match0[1][0];
// else $contenttext may just host video 'src'

// for image search
if ( preg_match_all('#src="(.*)"#Uis', $contenttext, $match ) ) {
if ( count($match) ) {
$n = sizeof($match[1]);
if ( $showfirstimg=='2' ) {
$image = $match[1][$n-1];
} else $image = $match[1][0];
return $image;

// for youtube video search, just the first video thumbnail
if ( preg_match('#src="(.*)"#Uis', $contenttext, $match_video ) ) {
if ( count($match_video) ) {
if (preg_match('#youtube#i', $match_video[0], $match_temp) ) {
$youtube_src = $match_video[1];
if (preg_match('/v[\=\/][a-zA-Z0-9_]{1,}&/',$youtube_src, $image_0)) {
preg_match('/v[\=\/](.*)&/',$image_0[0], $image_1);
} else {
preg_match('/v[\=\/](.*)/',$youtube_src, $image_1);

$vid = ( $image_0 === null ) ? Vj9ChXA9y8I : $image_1[1];
$image = "http://img.youtube.com/vi/".$vid."/0.jpg";

// for other video search, static image to inform others: othervideo.png
else {
$image = "http://cnfeed.co.uk/images/othervideo.png";

if ($image == ''){
$image = "http://cnfeed.co.uk/images/noimage.png";

return $image;

echo findIMG( $contenttext, $showfirstimg );

Thursday, 12 March 2009

Regular expression and Possible modifiers in regex patterns in Php

Regular expression tool - regex.larsolavtorvik.com: "Help PHP PCRE

Any character
Start of subject (or line in multiline mode)
End of subject (or line in multiline mode)
Start character class definition
End character class definition
Alternates (OR)
Start subpattern
End subpattern
Escape character
Newline (hex 0A)
Carriage return (hex 0D)
Tab (hex 09)
Decimal digit
Charchater that is not a decimal digit
Horizontal whitespace character
Character that is not a horizontal whitespace character
Whitespace character
Character that is not a whitespace character
Vertical whitespace character
Character that is not a vertical whitespace character
'Word' character
'Non-word' character
Word boundary
Not a word boundary
Start of subject (independent of multiline mode)
End of subject or newline at end (independent of multiline mode)
End of subject (independent of multiline mode)
First matching position in subject
Zero or more of n
One or more of n
Zero or one occurrences of n
n occurrences
At least n occurrences
At the most m occurrences
Between n and m occurrences"

Possible modifiers in regex patterns
If this modifier is set, letters in the pattern match both upper and lower case letters.

If this modifier is set, a dot metacharacter in the pattern matches all characters, including newlines. Without it, newlines are excluded. This modifier is equivalent to Perl's /s modifier. A negative class such as [^a] always matches a newline character, independent of the setting of this modifier.

This modifier inverts the "greediness" of the quantifiers so that they are not greedy by default, but become greedy if followed by "?". It is not compatible with Perl. It can also be set by a (?U) modifier setting within the pattern or by a question mark behind a quantifier (e.g. .*?).

#, in php regular expression

In PHP's patterns, you always start with a delimiter (the first character in the pattern) and end with the same. Then follow it with any modifiers. These all work the same:


Eclipse hangs on exit in Ubuntu 8.10

Since installing Intrepid, my Eclipse session hangs on exit. All windows close normally but the process doesn't die.

A bug that describe the problem and a workaround


"I confirm that switching off the "Assistive Technologies" ((GNOME) Menu ->
System -> Preferences -> Assistive Technologies -> checkbox "Enable Assistive
Technologies") is a good workaround for this problem."

php long string assign

$contenttext = <<<youtube

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" width="480" height="295"><param name="width" value="480" /><param name="height" value="295" /><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://www.youtube.com/v/KcAnhjr2R5w&hl=en&fs=1" /><embed type="application/x-shockwave-flash" width="480" height="295" allowfullscreen="true" allowscriptaccess="always" src="http://www.youtube.com/v/KcAnhjr2R5w&hl=en&fs=1"></embed></object>



Tuesday, 10 March 2009

HOWTO: joomla template

What's in joomla template directory?

  • /css:(requied)  all kinds of css files.
  • /images:(requied) all the images will be used by the template.
  • /html: (optional) for component/module override. details: http://developer.joomla.org/tutorials/165-understanding-output-overrides-in-joomla.html

  • index.php(requied): template html+php file
  • index.html(requied): blank files
  • params.ini(requied): joomla need this file as writeable, to save configuration about his template.
  • template_thumbnail.png(requied): joomla need this file for preview
  • templateDetails.xml(requied): joomla need this file for template installation.
  • favicon.ico: (optional) favicon file.
  • component.php : (optional) for article printable layout, only display selected parts.

Saturday, 7 March 2009

Profiler for Eclipse Java Development Tool

TPTP, as java profiler for eclipse, so far version 4.5.2, still relies on very old gcc, libstdc++2.10-glibc2.2.
To solve this, compat-libstdc++ should be installed for the compatibility.

To get more statistics result, besides TPTP project, try to install more modules, such as trace, logging tools etc.

1) For Ubuntu, the above gcc binary is not available in the repository any more. But google it will find some downloads: http://packages.ubuntu.com/gutsy/i386/libstdc++2.10-glibc2.2/download

2) For Ubuntu, Tptp also using java 1.5 to capture the jvm information. If got error message like : "ERROR: JVMPI, an experimental interface, is no longer supported.". The fix is:
Go to eclipse/plugins/org.eclipse.tptp.platform.ac.linux_ia32_4.4.1.v200808290100/agent_controller/bin, and edit the files ACStart.sh, ACStop.sh. In first line, when it says #!/bin/sh, it should say #!/bin/bash.
Otherwise, just use 'netbeans' to profile your java programs :)

Friday, 6 March 2009

&, in Joomla api, return reference to existing object

Most of joomla api return reference, such as:

In this example, the current date and time is retrieved and output in the current default locale format.

$date =& JFactory::getDate();
echo 'Current date and time is: ' . $date->toFormat() . "\n";
If the current language is English then this will output something like
Current date and time is: 2008-11-22 18:14:08

This is because the returned object will update the existing one, while not creating new global one, except the object not created yet.
As explained here, in api.joomla.org:

getApplication (line 34)
Get a application object
Returns a reference to the global JApplication object, only creating it if it doesn't already exist.

My photo
London, United Kingdom

Facebook & Twitter