JavaScript Infected » CSS

A classname to save, using negative magin to remove the "first" / "last" class in your list

julian — Wed, 26 Aug 2009 09:06:17 +0000

It is common to create a list with a separator in between like this:
Item 1 | Item 2 | Item 3

One common way of doing this is create a list (ol / ul) then apply the border-left and add a class “first” to the first li setting the border to 0px. This is good, but this can be done in a better way.

Let start with an ordered list, and applying css border-left on it.

Item 1

Item 2

Item 3

With the style:
/* reset the li element */
ol{margin:0px;padding:0px;}
li{margin:0px;padding:0px;list-style:none;}

#sample-list li{border-left:1px solid #ccc;float:left;padding: 2px 5px;}

The result will become:
| Item 1 | Item 2 | Item 3

Which shown an extra border at the left. One simple way to eliminate the first border is adding a classname to the first li and clear our the border, but this will add extra logic in your PHP code. So that will be nice if we can solve in CSS and keep the PHP code a bit cleaner.

By using negative margin, the item list above can be shown nicely without the extra class.

Item 1

Item 2

Item 3

With the style:
/* reset the li element */
ol{margin:0px;padding:0px;}
li{margin:0px;padding:0px;list-style:none;}

#sample-list {overflow:hidden;display:block;}
#sample-list li{border-left:1px solid #ccc;float:left;padding: 2px 5px;margin-left:-1px;}

In the CSS above, by setting li with margin-left:-1px; the first border-left will fall out of the ol. With ol#sample-list set to overflow:hidden, that extra line will be wipe out from screen and leave all the other separators there.

This technique can works in a vertical list with horizontal separator. Just set the border to top and margin-top:-1px then set the container’s overflow to hidden. Done!

Making z-index works

julian — Fri, 19 Jun 2009 07:12:41 +0000

It is common to have element stacking at bottom no matter how large the z-index is. There are 2 things to check when it happens.

The position property in CSS

z-index only affect elements with position property set to “relative”, “absolute”, and “fixed”.The z-index values of the all the parent

Parent elements up the DOM tree

If you want a child element stack on top, all its parent elements must have an z-index that’s large enough to make itself stacking on top. That means if an element(Element A) stack below something, all the child nodes of Element A will stack below it.

Extra favor for IE6

There is a serious bug in IE6, element with position set to “relative”, “absolute”, or “fixed” without explicitly specify a z-index, the z-index of that element will be ZERO. This is 90% of the cause that makes z-index not working on IE6. When you found high z-index does not stack on top in IE6, but works well in firefox, you probably want to check all the parent elements with position set to the above 3 values.

A play with imageless button

julian — Wed, 10 Jun 2009 03:09:12 +0000

The final result

Open in new window

What it does

Just a basic markup and CSS which create an imageless button. It support zooming / changing font-size. But it is true that imageless button is bad in semantic markup compare to / , as the construct of the button is layers of

. If you compare the semantic to buttons using sliding window, it is pretty much the same.

Tested in Firefox 3, IE 6, IE 7, Safari 3.1

The source code







    
        
            
            Label 1
        
    

    
        
            
            Lorem ipsum

I have included the YUI reset-fonts-grids.css in the sample, but the imageless button works without it too. I just used to have YUI with me, so i put it in there to make sure it works with YUI.

Brief explaination

The way i create the imageless button is by stacking 4 div elements. As you can see in the source code above,

is the base container of the 4 div element. Each div element inside create part of the imageless button.

imageless-button-outer is top and bottom border
imageless-button-inner is left and right border, plus the dark grey background which act less a shade
imageless-button-top-shadow create the top shadow with a light background color and a darker border bottom
imageless-button-label is top most layer contain the label of the button

There are two major problem in creating this, so when you adopting the code, you need to pay attention to it.

IE 6/7 inline-block hack

Except the imageless-button-top-shadow, the other 3 layer are all inline-block. IE 6/7 ignore display inline-block which it will still render the div element as block element. To make IE render inline-block, you need to use a block element, setting the display to inline, then use zoom:1 to trigger hasLayout. Then IE will magically create the inline-block

.inlineBlock {display:inline-block; *display:inline; *zoom:1;} /* this must be applied to block element, apply it on  or  will not work */

A mysterious gap

As you can see below, the line highlighted in red is not properly indented. This is intended to not to put a line break there as adding a line break will create a 5px gap between the buttons in Firefox 3.0 and Safari 3.1. I have no idea how and why a line break creates this problem. That will be great is someone can tell me…

            Label 1

Working with z-index

julian — Tue, 20 Jan 2009 14:34:24 +0000

What is z-index

When we talk about 3D, we have the x,y,z dimension. z-index is the third dimension on a web page which determine how element stack. It works like Photoshop’s layer. In general, larger z-index stack on top of smaller z-index. But there still other factors that will affect the layer stacking, which are the position property in CSS and the html structure.

How z-index works

It is often to find that z-index doesn’t work as expected. Sometimes it work on Firefox but failed in IE 6. The first thing to make z-index work is you need to position that element. You can set the position property to absolute, fixed, or relative (but not static). Below is series of samples to test on how z-index stacking works.

Samples

Sample 1-1 is a very simple case. Element #item_1, #item_2, and #item_3 are immediate child of document.body and has a distinct z-index with position set to absolute. The element with higher z-index stack on top of element with smaller z-index. Sweet!

This is Group1 z-index = 10

This is group1_item1 z-index = 40

This is group1_item2 z-index = 50

This is Group2 z-index = 20

This is group2_item1 z-index = 30

This is group2_item2 z-index = -1

sample 1-2

demo 1-2

Inside sample 1-2, I set the z-index of #group1 to 10 and z-index of #group2 to 20. Each group got 2 child element with different z-index value. Sample 1-2 might confuse some people that why the stacking order is not z-index = 50 stack on top of 40 then 30, 20, 10, and -1. The reason is HTML structure is taking into account when browser determine the display stacking.

Simply speaking:

Child element will stack on top of parent element no matter what z-index value you got, even negative.
When #group1 is stack behide #group2, all the child element in #group1 will stack behide #group2 (even one of #group2′s child has z-index = -1)

Till now, everything should work exactly the same in Firefox and IE 6. The sample below will show a IE 6 bug in z-index. Taking the previous sample and just remove the z-index setting for #group1.

This is Group1 z-index = 10

This is group1_item1 z-index = 40

This is group1_item2 z-index = 50

This is Group2 z-index = 20

This is group2_item1 z-index = 30

This is group2_item2 z-index = -1

sample 1-3

demo 1-3

When you open sample 1-2 and sample 1-3 in Firefox, you should found #group1_item1 and #group1_item2 is stack on top in sample 1-3 but not sample 1-2. While, if you open both sample in IE, there are no different. But which browser is correct in this? To explain this bug, here will need to introduce the concept on how z-index work.

The Concept

The way that browser determine which element stack on top is base on a tree like structure, i call it “z-index tree”. Sample 1-1 can be represented in the following “z-index tree”:

fig. 1-1

item3, with z-index:15, stack on top of item2, with z-index:10, and item2 stack on top of item1, with z-index:5. All three item stack on top of document body and other elements without position / z-index being set. Pretty simple.

For sample 1-2, the browser found that #group1, with z-index:10, should stack below #group2, with z-index:20. But #group1_item1, with z-index:30, will not stack on top of #group2. The reason is z-index stack with hierarchy.

fig. 1-2

As you can see in the fig. 1-2, the implication of #group1 stack below #group2 means all child nodes of #group1 will stack below #group2. If you know photoshop, z-index works somewhat like the layer folder.

For sample 1-3, Firefox and IE 6 will generate a different “z-index tree”. First take a look at figure 1-3-1, which is the “z-index tree” for Firefox.

fig. 1-3-1

In sample 1-3, #group1 does not have any z-index value, so it is in the same layer as document body. This is different from DOM tree, elements have no z-index and a correct position value will stack on the same layer as their parent element. So #group1 will not create a node there and affect its child nodes stacking. As #group1 is gone, #group1_item1 and #group1_item2 will be compared directly to #group2. This result in a stacking order with #group1_item2 on top then #group1_item1, then #group2.

But for IE 6, the “z-index tree” will look like figure 1-3-2.

fig. 1-3-2

When IE 6 encounter an element with position set to absolute / relative without a specified z-index, IE will set its z-index to zero. So #group1 become having z-index = 0 and stack below #group2. The resulting “z-index tree” of sample 1-3 will result in the same stacking as sample 1-2.

Some Tips

Element stacking does not just relaying on the value of z-index, element position, html structure and browser will affect the way how element stack.
When an element with higher z-index stacking below a smaller z-index element, there must be some parent element up stream having an z-index that’s too small.
When dealing with IE 6, be very careful on the use of position property in CSS, and try to give it a z-index to make things clear.