Mar 04

We often use Descendant selectors to select elements that are descendants of another element in the document tree. For example we can use the following css to give a border to all div’s inside any div of class panels.

div.panels div {
   border: 1px solid silver;
}

But what if we have nested div’s inside our panels div and we only want a border aroun the top level div’s, ie. the direct descendant of our panels div.

We can use Child selectors to achieve this. They work similarly to Descendant selectors and select an element that is a direct child of another element (parent). Child selectors will not select all descendants, only direct children.

Changing our css to now use a Child selector, and only give borders to direct descendants of divs with a class of panel, results in the following.

div.panels>div {
   border: 1px solid silver;
}

written by objects \\ tags: , ,

Jan 27

Some times you need to tell the browser not to cache some pages in your web application.

To achieve this we can use META tags that instruct the browser how you would like the page cached. As is too often the case the meta tags required can vary between browsers. The “Pragma” meta seems the most widely supported at the moment:

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">

Using the following though will give you better browser coverage:

<META HTTP-EQUIV="Cache-Control" CONTENT="max-age=0">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
<META http-equiv="expires" content="0">
<META HTTP-EQUIV="Expires" CONTENT="Tue, 01 Jan 1980 1:00:00 GMT">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">

written by objects \\ tags: , ,

Oct 24

Recently added a Facebook Fan/Like box widget to one of our sites. We used the following code and it worked great in our development environment when we tested it on Firefox and Safari.

<fb:fan href="http://www.facebook.com/obiweb"
   profileID="115185598512736"
   width="210" height="600" connections="0"></fb:fan>

But as is all too often the case when we tested it on IE it failed. No errors just a big blank space.

After some investigation it turns out that IE needs the Facebook namespace defined in the html tag. Adding the namespace as shown below fixed the problem.

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">

The end result can be found on the Obiweb blog.

written by objects \\ tags: , , , , ,