World Wide Web Technology – Page 4

PHP: Checkbox Array in Form Handling – Multiple Checkbox Values in an Array

Checkboxes is probably one of the most frequently used form controls which come handy in dealing with one to many relationships. The multiple selective nature of HTML form checkboxes require a convenient way for PHP to process multiple checkbox values, ideally in a single array. By default, each and every HTML input control including checkboxes …

PHP: Checkbox Array in Form Handling – Multiple Checkbox Values in an Array Read More »

HTML CSS Drop Down Menu Made Easy – SuckerFish Enhanced

2 Comments / CSS & HTML Tips / By Yang Yang / January 19, 2009

There’s a pure css drop down menu named SuckerFish published at ALA. Really straightforwardly clean code and simple drop menu script, however it might be friendlier for developers if it’s combined with the li:hover hack for IE6. The HTML: <ul id=”nav”> <li><a href=”#”>bodycare</a> <ul> <li><a href=”#”>lotions</a></li> <li><a href=”#”>creams</a></li> <li><a href=”#”>balms</a></li> <li><a href=”#”>butters</a></li> </ul> </li> <li><a …

HTML CSS Drop Down Menu Made Easy – SuckerFish Enhanced Read More »

CSS selector:hover Hack for IE6

30 Comments / CSS & HTML Tips / By Yang Yang / January 19, 2009

IE 6 and lower versions of IE only implemented :hover for tag a. As per CSS 2.1 specification, all HTML tags / elements have :hover state so that when mouse pointer hovers over, different styles can be applied to them. li:hover is one of the frequent reasons why you need this hack. First, you have …

CSS selector:hover Hack for IE6 Read More »

HTML Form doesn’t upload the file?

CSS & HTML Tips / By Yang Yang / January 14, 2009

You had the <input type=”file” /> in place, however it just doesn’t seem to be uploading at all at the client side. After choosing a rather big file, the form submission and page reload finish in seconds, what’s wrong? Well, it’s almost certain that you have forgotten something. Try adding property enctype to <form>: <form …

HTML Form doesn’t upload the file? Read More »

Free Online Visual Trace Route Tool

HTTP Tips & Tutorials, Internet Tools / By Yang Yang / January 11, 2009

Trace route (command) is a common network diagnostic tool to debug network problems or check how data is passed through the whole network through all different kinds of computers, routers and such. A visual trace route tool, however, draws the data passage in illustrative diagrams or on a map for visionary perception graphically. You Get …

Free Online Visual Trace Route Tool Read More »

Which is better for AJAX requests, GET or POST?

AJAX Tips and Tricks, HTTP Tips & Tutorials, JavaScript Tips & Tutorials / By Yang Yang / January 9, 2009

As per HTTP protocol specifications, client browsers send http post requests in two-step processes: 1) send the headers, 2) send the data. Therefore, for websites with high volume traffic, it’s definitely preferable to choose GET method for AJAX requests over HTTP, because all it takes for GET to get out is a URL request, which …

Which is better for AJAX requests, GET or POST? Read More »

Extended CSS Sprites for Foreground Images <img>

5 Comments / CSS & HTML Tips / By Yang Yang / January 9, 2009

CSS Sprites is a popular way to reduce image requests to the server and hovering lag to load another background image cased by network latency. Jenny has also devised a technique for foreground image CSS sprinting by Extending CSS Sprites which in essence bears all the merits of the original CSS Sprites method. Basic concept …

Extended CSS Sprites for Foreground Images <img> Read More »

CSS Table Hover Effects for <tr> and <td>

11 Comments / CSS & HTML Tips, JavaScript Tips & Tutorials / By Yang Yang / January 9, 2009

Without using any javascript, this is the simplest way to make css hover works on tr and td in tables across browsers including IE. IE is known for not implementing generic hover effect for HTML tags other than <a>, however by the help of a bit of spice, we can make it to happen on …

CSS Table Hover Effects for <tr> and <td> Read More »

HTML DocType Text: World’s Tiniest and Shortest HTML DocType Declaration

2 Comments / CSS & HTML Tips, XML Tips and FAQ / By Yang Yang / January 9, 2009

Dustin Diaz made an interesting discovery to trigger “standards mode” with just a tiny little declaration instead of the regular lengthy one we see everywhere. As opposed to “standard mode“, there’s this “quirks mode” in IE that accommodates legacy HTML code of no standards at all — rendering them in many different ways compared with …

HTML DocType Text: World’s Tiniest and Shortest HTML DocType Declaration Read More »

2 Tips for Table Layouts

CSS & HTML Tips / By Yang Yang / January 8, 2009

If you are using tables entirely for page layout, I just have 2 tips for you. The first one is that: Don’t rely on rowspan or colspan. Especially on pages with potential to get rather long or wide by the help of some elongated table cell with rowspan or colspan. Things might very possibly go …

2 Tips for Table Layouts Read More »

Correct (CSS) way to center a page element in HTML

CSS & HTML Tips / By Yang Yang / January 6, 2009

<center></center> as well as the property align=”center” used to be the tag that centers everything inside. However, it’s not the right way to do the centering in HTML at all. Let me show you the correct way in CSS to center something on the page. Let’s say you have a page wrapper that wraps a …

Correct (CSS) way to center a page element in HTML Read More »

Elements with display:block and height gains 100% width and don’t float in IE6

7 Comments / CSS & HTML Tips / By Yang Yang / January 6, 2009

As we all know that with a style rule of width or height, an element gains hasLayout in Internet Explorer and it triggers the IE proprietary rendering algorithm. Though this trick solves many weird problems in IE, especially IE6, it does come with a few issues as well. For example, when you need a top …

Elements with display:block and height gains 100% width and don’t float in IE6 Read More »

What are the Mandarin Chinese web safe fonts?

43 Comments / CSS & HTML Tips, Fonts & Typography, Web Design Tips and Insights / By Yang Yang / January 5, 2009

As I’m a mainlander Chinese, I can only speak for those computers and browsers who live in central P.R.China. If you are making a design for or in Mandarin Chinese, especially Simplified Chinese, beside those common English web safe fonts such as Arial and Verdana shipped in MS Windows by default that 95% mainlander Chinese …

What are the Mandarin Chinese web safe fonts? Read More »

Check for file size with JavaScript before uploading

35 Comments / CSS & HTML Tips, JavaScript Tips & Tutorials / By Yang Yang / January 1, 2009

File uploading is a rather common feature of interactive sites. As all servers come with a limit on the size of the file being uploaded, it would be a usability blessing for users if web developers can implement a logic to check for the file size before uploading, informing the user if the size of …

Check for file size with JavaScript before uploading Read More »

CSS z-index doesn’t work?

11 Comments / CSS & HTML Tips / By Yang Yang / December 27, 2008

CSS style property z-index determines the stack order of an element overlapping with others. There might be times when you find it not working for you and element with a bigger z-index falls behind one who has a smaller one. Frustrating but why? First, make sure the elements who has z-index property also has position:relative …

CSS z-index doesn’t work? Read More »

Make scaled images in IE smooth

CSS & HTML Tips, Web Design Tips and Insights / By Yang Yang / December 26, 2008

As ugly as it can get, an image displayed in IE in dimensions other than its original physical sizes would look rugged. So how to smoothen scaled images in IE? An engineer at flickr revealed the secret: img { -ms-interpolation-mode:bicubic; } That’s it! Just add the rule to your stylesheet!

8 Golden Rules of Writing CSS

2 Comments / CSS & HTML Tips / By Yang Yang / December 25, 2008

Update: added 1 more rule. CSS is not hard to learn yet tricky to master. What differentiates a veteran from a bunch of rookies is scale. The C language isn’t that sophisticated to crack — though still need quite a few months to get through the core and be properly trained — but there’s apparently …

8 Golden Rules of Writing CSS Read More »

Let’s use Lucida Grande for a change – 13 web safe fonts revisited

8 Comments / CSS & HTML Tips, Fonts & Typography, Web Design Tips and Insights / By Yang Yang / December 23, 2008

The 10 web safe fonts, Arial, Impact, Georgia, Times New Roman, Trebuchet MS, Comic Sans MS, Verdana, Tahoma — ahhh, wait a minute, I can’t remember the last 2. Let me take a look at the 9 web safe fonts, ok, it’s Courier New and Arial Black. Tahoma isn’t included in the 9 browser safe …

Let’s use Lucida Grande for a change – 13 web safe fonts revisited Read More »

How to delete / remove nodes in SimpleXML

14 Comments / PHP Tips & Tutorials, XML Tips and FAQ / By Yang Yang / December 2, 2008

The other day I was testing and playing with SimpleXML to process some XML documents when I came to a problem — I realized that I needed to delete a node before dumping the XML object to text. However if you are familiar with SimpleXML, it doesn’t come with a down right way to remove …

How to delete / remove nodes in SimpleXML Read More »

ID as HTML named anchors

CSS & HTML Tips / By Yang Yang / April 10, 2008

Well, recently I have come across quite some tricks that will help web developers to spin out better web pages and one of them is this: actually, you don’t have to use <a name=”xxx”>xxx</a> for named anchors, in the example of <h2 id=”cottage”> <a name=”cottage”>grandpa’s warm cottage</a> </h2> you can merely rely on the ID …

ID as HTML named anchors Read More »