In this article I will show an example of how to fix the IE 6-7 bug when absolute elements ignore z-index CSS property. In the screenshot above you can see the problem. In the sample below you can see how these styles work in your browser:

HTML:

    <div id="column1">1<div id="absoluteDiv"></div></div>
    <div id="column2">2</div>

CSS:

#column1, #column2 {
    display: block;
    position: relative;
    float: left;
    width: 100px;
    margin: 5px;
    padding: 5px;
    border: 1px solid red;
}
 
#absoluteDiv {
    display: block;
    position: absolute;
    top: 5px;
    left: 20px;
    width: 200px;
    height: 30px;
    background-color: yellow;
    border: 1px solid orange;
    z-index: 10000;
}

To fix the bug you need to add z-index property to all the parents of your absolute element until you reach the siblings that overlap your absolute element. So, here’s a workaround:

FIX:

#column1 {
    z-index: 10000;
}

First let’s declare a table with cellspacing and cellpadding attributes and see how it looks:

<table cellpadding="3" cellspacing="3" border="1">
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>4</td>
    </tr>
</table>

In your browser this table has the following presentation:

Now, let’s override the values of cellspacing and cellpadding attributes with help of CSS style:

table {
    border-collapse: separate;
    border-spacing: 10px;
}
table td, table th {
    padding: 10px;
}

If we apply these styles to our table the cellspacing and cellpadding values of the table will be changed:

These styles work in all the mordern browsers. If you want these attributes get working in IE 6 and IE 7 you still should use HTML attributes. By the way, cellpadding and cellspacing HTML attributes ARE NOT deprecated so you can fearlessly use them.

What if cellspacing is zero?

If you need to set cellspacing to zero with help of CSS you should use these styles:

table {
    border-collapse: collapse;
}
table td, table th {
    padding: 10px;
}

So, applying these styles to the table above we will get:

These styles work OK in IE6+.

Browsers

I’ve just tested this example in different browsers:

Need help on CSS properties? Check these links

border-collapse

border-spacing

padding

element.onselectstart = function() { return false; }

CSS styles:

.unselectable {
    -webkit-user-select: none; /* Safari, Chrome */
    -khtml-user-select: none; /* Konqueror */
    -moz-user-select: none; /* Firefox */
    user-select: none; /* CSS3 */
}

Hope in the nearest future, we will use only CSS3 property for this need

Example of use:

#("#testdiv").bind("mousedown", function (event) {
    $(document.body).addClass("unselectable");
    ...					
});
#(document.body).bind("mousemove", function (event) {
    /* some code */
});
#("#testdiv").bind("mouseup", function (event) {
    $(document.body).removeClass("unselectable");
    ...					
});

<div id="container">
  <div id="absolute-element"></div>
  <div id="relative-element">some content</div>
</div>

#container {
  position: relative; 
  width: 500px; 
  margin: 0;
}
 
#absolute-element {
  position: absolute; 
  width: 100%; 
  height:100px; 
  margin: 0; 
  left: 0; 
  top: 50px;
}
 
#relative-element {
  position: relative; 
  width: 100%; 
  margin-top: 100px; /* THIS MARGIN IS IGNORED! */
}

Workaround

My css hack is in adding a auxiliary DIV that clears floats etc. It helps!

<div id="container">
  <div id="absolute-element"></div>
  <div id="help"></div>
  <div id="relative-element">some content</div>
</div>

#help {
  margin: 0; 
  border: 0; 
  padding: 0; 
  clear: both; 
  float: none; 
  font-size: 1px;
}

• Color (the same as border color)
• Width (the same as border width)
• Style (the same as border style)

Ok, let’s test!

Let’s see at the default style

  <div contentEditable="true">
    <p>Lorem ipsum...</p>
  </div>

Changing all the styles

  [contentEditable=true]:focus {
    outline: 2px dashed #7B68EE;
  }

As you see above, when you change all the styles the rounded corners of the outline are disappeared. More precisely, when you change an outline border style the outline curved corners are disappeared. To save the rounded corners you should change only a color or a size. In the example below, the curved corners are preserved.

Changing only color

  [contentEditable=true]:focus {
    outline-color: #7B68EE;
  }

There’s another limitation of the styles, you cannot set the custom radius for the outline rounded corners

Browsers

WebKit is an engine that is used by some popular browsers like Chrome, Safari etc. So, you can use the styles shown above in the browsers that use WebKit engine.

-webkit-border-radius: 20px; /* declaration for WebKit browsers like: Safari, Chrome */ -moz-border-radius: 20px; /* declaration for Mozilla browsers like FireFox */ -khtml-border-radius: 20px; /* Linux browsers */ behavior: url(/my-examples/files/border-radius.htc); /* maybe ALL IE */ } #border-top-right-radius { border-color: green; border-top-right-radius: 20px; /* CSS3 declaration */

-webkit-border-top-right-radius: 20px; /* declaration for WebKit browsers like: Safari, Chrome */ -moz-border-radius-topright: 20px; /* declaration for Mozilla browsers like FireFox */ -khtml-border-top-right-radius: 20px; /* Linux browsers */ } #border-bottom-right-radius { border-color: blue; border-bottom-right-radius: 20px; /* CSS3 declaration */

-webkit-border-bottom-right-radius: 20px; /* declaration for WebKit browsers like: Safari, Chrome */ -moz-border-radius-bottomright: 20px; /* declaration for Mozilla browsers like FireFox */ -khtml-border-bottom-right-radius: 20px; /* Linux browsers */ } #border-bottom-left-radius { border-color: orange; border-bottom-left-radius: 20px; /* CSS3 declaration */

-webkit-border-bottom-left-radius: 20px; /* declaration for WebKit browsers like: Safari, Chrome */ -moz-border-radius-bottomleft: 20px; /* declaration for Mozilla browsers like FireFox */ -khtml-border-bottom-left-radius: 20px; /* Linux browsers */ } #border-top-left-radius { border-color: pink; border-top-left-radius: 20px; /* CSS3 declaration */

-webkit-border-top-left-radius: 20px; /* declaration for WebKit browsers like: Safari, Chrome */ -moz-border-radius-topleft: 20px; /* declaration for Mozilla browsers like FireFox */ -khtml-border-top-left-radius: 20px; /* Linux browsers */ } #border-complex1-radius { border-color: Gold;

border-radius: 30px 0 30px 0; /* CSS3 declaration */

-webkit-border-radius: 30px 0 30px 0; /* declaration for WebKit browsers like: Safari, Chrome */ -moz-border-radius: 30px 0 30px 0; /* declaration for Mozilla browsers like FireFox */ -khtml-border-radius: 30px 0 30px 0; /* Linux browsers */ } #border-complex2-radius { border-color: OrangeRed;

border-radius: 10px 30px 10px 30px ; /* CSS3 declaration */

-webkit-border-radius: 10px 30px 10px 30px; /* declaration for WebKit browsers like: Safari, Chrome */ -moz-border-radius: 10px 30px 10px 30px; /* declaration for Mozilla browsers like FireFox */ -khtml-border-radius: 10px 30px 10px 30px; /* Linux browsers */ } #border-complex3-radius { border-color: violet;

border-radius: 20px 20px 5px 5px / 40px 40px 5px 5px; /* CSS3 declaration */

-webkit-border-radius: 20px 20px 5px 5px / 40px 40px 5px 5px; /* declaration for WebKit browsers like: Safari, Chrome */ -moz-border-radius: 20px 20px 5px 5px / 40px 40px 5px 5px; /* declaration for Mozilla browsers like FireFox */ -khtml-border-radius: 20px 20px 5px 5px / 40px 40px 5px 5px; /* Linux browsers */ } table.css3-rounded-corners-table td { border: 0; padding: 7px; vertical-align: middle; }

In this article, I am going to test CSS 3 rounded corners. I do want to know can I use them in practice in different browsers. Here are some examples of CSS3 rounded corners and if you can see some rounded corners – congratulations your browser supports them!

Browsers

Before CSS3 appeared, web developers had to use some combinations of DIV’s or other container elements with curved corner images to achieve the desired result. Today, when CSS3 is supported by almost all the popular browsers the approach to make rounded corners is very easier, shorter and faster.

The only one little problem has place, is the compatibility with IE.

Here’s the table of browsers I tested on:

IE workaround

border-radius.htc

To make curved corners in IE the behavior htc file should be used. You can download the file from here http://code.google.com/p/curved-corner/.

border-radius: 10px; /* CSS3 declaration */
...
behavior: url(border-radius.htc);

There’re some limitations, for example, this behaviour htc file can round only all the corners of the container, but it cannot round only one, two or three specific corners. So, the CSS3 allows to round only right corner, for example, but the behavior htc file doesn’t. Other issues you can find at the page of this htc file.

PIE library

Another usefull library is PIE. With PIE you can round corners and reach other CSS3 features to work. Let’s see an example that is using PIE:

border-radius: 10px; /* CSS3 declaration */
...
behavior: url(PIE.htc);

CSS rules for all browsers

/* CSS3 declaration */
border-radius: 10px; 
 
/* declaration for WebKit browsers like: Safari, Chrome */
-webkit-border-radius: 10px; 
 
/* declaration for Mozilla browsers like FireFox */
-moz-border-radius: 10px; 
 
 /* Linux browsers */
-khtml-border-radius: 10px;
 
 /* maybe ALL IE */
behavior: url(border-radius.htc);

Understanding syntax

The curved corner is a quarter of the ellipse that defines the shape of the corner. To understand that see the image from the W3C:

So, to define the rounded corner the horizontal and vertical radii should be set, but the vertical radius parameter is optional. If you define only one parameter it will be applied to the horizontal and vertical radii.

Now, let’s see the syntax:

border-radius: [<length> | <percentage>]{1,4} [ / [<length> | <percentage>]{1,4} ]?

The first parameter defines the horizontal radius and if the second parameter is missed the vertical radius.

The second parameter defines the vertical radius of the ellipse that defines the shape of the corner.

The ‘border-radius’ sets values for all the four corners.

Examples:

/* all the corners have an equal curved corner */
border-radius: 10px; 
 
 /* works as in the picture above */
border-radius: 55pt / 25pt;

border-top-right-radius,
border-bottom-right-radius,
border-bottom-left-radius,
border-top-left-radius: [<length> | <percentage>] [<length> | <percentage>]?

The first parameter defines the horizontal radius and if the second parameter is missed the vertical radius.

The second parameter defines the vertical radius of the ellipse that defines the shape of the corner.

All of these properties set the only one specific corner.

Examples:

/* sets the top left corner */
border-top-left-radius: 10px;
 
 /* sets the top right corner as in the picture above */
border-top-right-radius: 55pt 25pt;

More info on syntax you can find at W3C site: http://www.w3.org/TR/2010/WD-css3-background-20100612/#the-border-radius.

Practice

Let’s create a div the corners of which we will curve.

<div id="curved-corners"></div>

To curve all the corners we should write these styles:

#curved-corners {
	width: 100px;
	height: 50px;
	border: 2px solid red;
 
        /* CSS3 declaration */
	border-radius: 20px; 
 
        /* declaration for WebKit browsers like: Safari, Chrome */
	-webkit-border-radius: 20px; 
 
        /* declaration for Mozilla browsers like FireFox */
	-moz-border-radius: 20px; 
 
        /* Linux browsers */
	-khtml-border-radius: 20px;
 
        /* maybe ALL IE  */
	behavior: url(border-radius.htc);
}

By the way, you should download border-radius.htc from Google Code and copy it to the location you need, and then specify the correct path to border-radius.htc. So, let’s look at the example above in work:

Now, let’s curve only top left and bottom right borders. We are still using the same DIV but define another styles.

#curved-corners {
	width: 100px;
	height: 50px;
	border: 2px solid blue;
 
        /* CSS3 declaration */
	border-top-left-radius: 20px; 
	border-bottom-right-radius: 20px; 
 
        /* declaration for WebKit browsers like: Safari, Chrome */
	-webkit-border-top-left-radius: 20px; 
	-webkit-border-bottom-right-radius: 20px; 
 
        /* declaration for Mozilla browsers like FireFox */
	-moz-border-radius-topleft: 20px;
	-moz-border-radius-bottomright: 20px;
 
        /* Linux browsers */
	-khtml-border-top-left-radius: 20px;
	-khtml-border-bottom-right-radius: 20px;
}

We aren’t using htc file for IE because it cannot curve specific corners. It can curve all the four corners only. So, let’s see the example above at work:

Conclusion

After testing how CSS3 can round borders, I can say that it’s cool. Even if you want to curve borders in IE6+ there’s a workaround but it’s a bit limited. I hope that some issues for this IE htc file will be fixed soon. Microsoft promised that IE9 will support CCS3 technique to curve corners. By the way, there’re a lot of popular web sites that have already begun to use CSS3 technique to round corners.

Links

W3C CSS3 Border Radius

W3C CSS3 Border Radius newer doc

Rounded corner HTML elements using CSS3 in IE (Download at Google Code)

PIE library

By the way, if You have a fixed width block then You have to set its left and right margins to auto and You get the block centered.

In this article I’m going to explain the method I use to center a fluid block element. Here is the Demo.

With help of this method You can center:

• CodeCharge Studio’s Menu (CCS Menu)
• Horizontal CSS Menu
• Any block elements (DIV, SPAN, IMG, UL, etc.)

HTML

<!-- BEGIN Menu Menu1 -->
<div class="MenuStyle" id="Menu1Container">
  <ul class="adxm {Menu1:MenuType} level1">
  ...
  </ul>
</div>
<!-- END Menu Menu1 -->

CSS

#Menu1Container {
        position: relative;
        float: right;
        right: 50%;
}
#Menu1Container ul {
        position: relative;
        float: left;
        left: 50%;
}

Links

CodeCharge Studio’s web site

So, problems i had to solve for my needs:

• an outer container is a DIV so INPUT always goes on the next line
• inline-block for DIV doesn’t work in IE6/7
• an outer container has width of 100%
• INPUT is absolutely positioned so an outer DIV is collapsed
• width of 100% makes INPUT 6px larger then outer DIV in IE6
• using inline-block, INPUT aligns vertically on the bottom in IE6

YUI files to include

Let’s begin with files to include:

<!--CSS file (default YUI Sam Skin) -->
<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.8.0r4/build/autocomplete/assets/skins/sam/autocomplete.css">
 
<!-- Dependencies -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/datasource/datasource-min.js"></script>
 
<!-- Source file -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/autocomplete/autocomplete-min.js"></script>

Well, i’m explaining below how i’ve achieved an inline YUI AutoComplete layout. The code is well-commented to understand what is happening

HTML

<!-- 
Let's use SPAN becase it has "display: inline" by default.
IE6/7 can apply "display: inline-block" only for elements
that have "display: inline" by default.
Read more: http://www.quirksmode.org/css/display.html.
-->
<label for="input">YUI AutoComplete</label>
<span id="autocomplete">
    <input id="input" type="text">
    <div id="results"></div>
</span>
 
<script type="text/javascript">
/* creating a data source out of js array */
var ds = new YAHOO.util.LocalDataSource(["apples", "apricots", "bananas"]);
 
/* creating a yui autocomplete */
var ac = new YAHOO.widget.AutoComplete("input", "results", ds);
</script>

CSS

/* outer container */
#autocomplete {
    /* behaving like an inline element */
    display: -moz-inline-box; /* for FF less then 3.0 */
    display: inline-block !important;
 
    position: relative;
    /* standard width of a textbox */
    width: 145px;
 
    /* align vertically on the center */
    vertical-align: middle; 
}
 
/* input */
#autocomplete input {
    /* preventing an outer container DIV collapsing */ 
    position: relative;
    /* tweaking to traditional box model
     * width = border + padding + content
     */
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box; /* ie8 */
 
    /* CSS Expression to calculate width for the input.
     * 2px border + 1px padding + 1px padding + 2px border = 6px.
     * Only for IE6/7 because traditional box model cannot
     * be tweaked by any css property.
     * currentStyle object - IE css styles as specified by 
     * global style sheets, inline styles, and HTML attributes.
     */
    *width: expression(parseInt(this.parentNode.currentStyle.width)-6+'px');
}

I’ve tested this soluting in FireFox 3.5, Opera 10, IE 6/7/8. YUI version i’m using is 2.8.

Further reading:

• YUI 2 Autocomplete
• CSS Box Models
• Display declarations
• inline-block in IE
• IE runtimeStyle Object
• IE currentStyle Object
• IE style Object