1
2
3
4
5
6
7
8

<div class="buttons">
  <div class="add button">
    <span class="icon"><img src="add.png" alt="" /></span><span class="text">Add</span>
  </div>
  <div class="delete button">
    <span class="icon"><img src="delete.png" alt="" /></span><span class="text">Delete</span>
  </div>
</div>

Each Button is within a single div. Every button has its icon and a button text. Image and Text are in a span tag. the “add” and “delete” class is added to differentiate the buttons. This is useful if you want to add some behavior in JavaScript.

Next, the CSS styles:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

.buttons .button {
  line-height:16px; /** important **/
  height: 16px;
  padding: 1px;
  padding-right:5px;
  margin:0;
  margin-right:4px;
  background-color:#a1a1a1;
  color: #ffffff;
  border-radius: 2px; /** CSS3 **/
  -moz-border-radius: 2px; /** Mozilla specific **/
  -webkit-border-radius: 2px; /** Make a guess ;-) **/
  float: left;
  cursor: hand;
  cursor: pointer;
}
 
.buttons .button .icon {
  display: inline-block; /** important **/
  vertical-align:middle; /** important **/
  padding:0;
  margin: 0;
  margin-right:2px;
}
 
.buttons .button .text {
  display: inline-block; /** important **/
  vertical-align:middle; /** important **/
  padding:0;
  margin: 0;
}

The important css declarations and attributes are “display: inline-block”, “vertical-align: middle” and “line-height: XXpx”. The line-height tells every .button block the exact height of the inline elements underneath. The inline elements .icon and .text are handled and displayed as an “inline-block”. Firefox 3 and most of the other major browsers supporting it so it is safe to use it. Read more on this.

The result should look like this:
I think the example is simple enough to adapt it to your needs and other use cases. Please keep in mind that in the example i use -moz-border-radius. This declaration is mozilla specific. So if you want rounded corners in IE you have to wait until IE is implementing this. Take a look when this is scheduled and follow my suggestion.

Ähnliche Beiträge:

• CSS Browser Compatiblity (0)
• Zend Framework How-To Teil 1: Projektaufbau, Konventionen und modulare Verzeichnisstruktur (13)
• Setzen eines statischen Netzwerk Device Namen unter Gentoo. (eth0,eth1,…) (0)

Ähnliche Beiträge:

• Super Mario Bros in JavaScript (0)
• Interesting Features for ExtJS on their Roadmap (0)
• HTML Purifier 3.0.0 Released (0)

Die neue Version säubert den HTML Code unter anderem von XSS Code aufgrund einer Whitelist. Ausserdem kann das HTML bevor es ausgegeben wird in valides HTML oder XHTML umgewandelt werden. Um diesen Vorgang, der bei großer Last des Servers schon einige Sekunden dauern kann, zu beschleunigen unterstützt der HTMLPurifier auch Caching. Zusätzlich zu der schon vorhanden PHP Extension HTMLTidy geht der HTML Purifier noch weiter und erleichtert und erweiter die Konfiguration und somit sehr flexibel was die Umwandlung spezieller HTML Tags, den Doctype oder CSS Attribute angeht.

Wo genau der Unterschied zu anderen Librarys oder nativen PHP Befehlen liegt, soll in dieser Vergleichstabelle gezeigt werden.

Ähnliche Beiträge:

• Zend_Layout, Zend_View_Enhanced (0)
• Zend Studio for Eclipse Release steht vor der Tür (0)
• Zend Studio 6.0.0 Eclipse Released (1)