Stefan Sobek Blog

Ever had problems in IE7 with z-index css attribute?

Problem:
The Menu created with superfish plugin for jquery will be shown behind the main content on mouseover.

Solution:
With Jquery dynamically reverse the CSS zindex stacking order of the page element so that higher elements in HTML source have highter z-index number

1
2
3
4
5
6
7

       	$(function() {
		var zIndexNumber = 1000;
		$('div').each(function() {
			$(this).css('zIndex', zIndexNumber);
			zIndexNumber -= 10;
		});
	});

Check this link for more information: http://www.vancelucas.com/blog/fixing-ie7-z-index-issues-with-jquery/

Found an interesting article about Data URIs.
It is possible to embed the image data directly into the document. This can either be the html document or a css-file.

1
2
3
4
5
6
7

li {
  background:
    url(data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7)
    no-repeat
    left center;
  padding: 5px 0 5px 25px;
}

This is cool stuff but will not run in IE<8.

So why should i use this? Normally not, but to save requests.

Great article from http://css-tricks.com/data-uris/

There is no vertical-aligment css-attribute in css 2.0. So how to align elements vertically?

1
2
3
4
5
6
7
8

DIV.container {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle }
...
<DIV class="container">
  <P>This small paragraph...
</DIV>

To align vertically the paragraph P on line 7, you have to use display: table-cell; and vertical-align: middle;

Runs on Mozilla, Safari and IE8 but not IE7

This example is from W3.org. Orginal article can be found here.