Stefan Sobek Blog » CSS

Z-Index Problems in IE7 and superfish menu plugin

admin — Mon, 10 Jan 2011 15:19:32 +0000

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

^?View Code JAVA

       	$(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/

Data URIs in CSS

admin — Tue, 30 Mar 2010 12:04:39 +0000

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.

^?View Code HTML

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/

Vertical alignment of html-elements with css

admin — Mon, 28 Dec 2009 09:40:18 +0000

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

^?View Code HTML

DIV.container {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle }
...

  This small paragraph...

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.