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)

If you are searching for a list of CSS Attributes and their compatibility in the major browsers with examples, demos, hacks or workarounds to get it working Cross Browser wide take a look at http://www.quirksmode.org/css/contents.html and http://de.selfhtml.org/navigation/syntax.htm#css (only in german language at the moment).

Ähnliche Beiträge:

• How to vertically align text and block elements (2)
• Charts of when we can use features of HTML, SVG and CSS3 (2)

So, what does this mean? PLEASE, do not support IE anymore! Develop your web-sites/applications that they degrade gracefully to IE, if you want so, but do not create them to work and look the same way with the same functionality. Use the features most other browser supports (CSS3, …) and tell users of IE that they have to use a modern browser!

Tell the people about other browsers. Tell them how easy it is to migrate to another browser and what the benefits are FOR THEM!

WE DO NOT WANT AND NEED ANOTHER “NEW” IE. The last ones were enough.

Ähnliche Beiträge:

• Bespin – an extensible Web Editor build using HTML 5 Specification (0)
• Super Mario Bros in JavaScript (0)
• Is Microsoft going to use WebKit as their Rendering Engine for IE? (0)