10tico Creations

Forward thinking floats

marcello — Sat, 22 Sep 2007 15:23:26 +0000

The clearfix issue is great to get your divs to behave properly. The one drawback is that you must insert a class=”clearfix” to every element that needs the clearfix attribute applied. This is not forward thinking since if a new method comes along then all of the markup needs to be updated to accommodate the method. This is one extra step that is not necessary and could be fixed in a simpler way.

Agile Ajax has a solution from the Orbitz website that simply applied the the class/div elements to the clearfix declarations.

So instead of the classic clearfix (which is updated to remove IE5 Mac support).

    /* float clearing for IE6 */
    * html .clearfix{
      height: 1%;
      overflow: visible;
    }

    /* float clearing for IE7 */
    *+html .clearfix{
      min-height: 1%;
    }

    /* float clearing for everyone else */
    .clearfix:after{
      clear: both;
      content: ".";
      display: block;
      height: 0;
      visibility: hidden;
    }

You now simply add classes/div elements to the clearfix declarations.

/* float clearing for IE6 */
* html #container,
* html .classThatNeedsToBeCleared,
* html div.anotherClassThatNeedsToBeCleared,
* html #someDiv .someClass .yetAnotherClassThatNeedsToBeCleared{
  height: 1%;
  overflow: visible;
}

/* float clearing for IE7 */
*+html #container,
*+html .classThatNeedsToBeCleared,
*+html div.anotherClassThatNeedsToBeCleared,
*+html #someDiv .someClass .yetAnotherClassThatNeedsToBeCleared{
  min-height: 1%;
}

/* float clearing for everyone else */
#container:after,
.classThatNeedsToBeCleared:after,
div.anotherClassThatNeedsToBeCleared:after,
#someDiv .someClass .yetAnotherClassThatNeedsToBeCleared:after{
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}

This is one of those “Why didn’t I think of that” moments.

Agile Ajax: Developer’s Notebook: Forward-thinking CSS float-clearing

Position is everything

JQuery UI

marcello — Mon, 17 Sep 2007 03:34:04 +0000

I’ve been using JQuery more than any other javascript library. It seems cleaner, the code is much smaller and is easy to extend. jQuery UI is now launched.

This is the wiki overview for jQuery UI, jQuery’s visual controls. jQuery UI features a wide range of core interaction plugins as well as many UI widgets.

http://ui.jquery.com/

Clearfix code

marcello — Sun, 16 Sep 2007 23:41:08 +0000

This is the famous clearfix code that helps you manage float issues.

Add class=”clearfix” to any container element that holds two items that float left and right. The problem is that most browsers will not give a height to the container element since the floated items will not be counted on as giving height. The quick piece of code below will give height to the container element.

Demo of the clearfix issue

.clearfix:after {
content: “.”;
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}

.clearfix {
display: inline-block;
}

html[xmlns] .clearfix {
display: block;
}

* html .clearfix {
height: 1%;
}

About Us

marcello — Sun, 16 Sep 2007 20:27:40 +0000

10tico Creations is a Web Development Company based in Syracuse, NY. 10tico Creations is owned by Marcello Prattico.

10tico Creations can help any sized business in creating custom web sites or applications. Our expertise ranges from very slick front end development using Javascript, XHTML/CSS Layout and Flash.

10tico Creations develops websites with PHP, Coldfusion or anything other language that fits your need.

Database design and development is critical when developing a custom web application or website. We work with MySQL, Postgres, SQL Server and Oracle.