CSS » Vivian Crap

Nov 22

Stack Order

What is z-index?

The z-index property determines the stack level of an HTML element. The stack level refers to the element’s position on the Z axis (as opposed to the X axis or Y axis). A higher z-index value means the element will be closer to the top of the stacking order. This stacking order runs perpendicular ot the display, or viewport.

Graphical Z Index

The Natural Stacking Order

In an HTML page, the natural stacking order (i.e. the order of elements on the Z axis) is determined by a number of factors. Below is a list showing the order that iterms fit into a stacking context, starting with the bottom of the stack. This list assumes none of the items has z-index applied:

Background and borders of the element that establish stacking context.
Elements with negative stacking contexts, in order of appearance.
Non-positioned, non-floated, block-level elements, in order of appearance.
Non-positioned, floated elements, in order of appearances.
Inline elements, in order of appearance.
Positioned elements, in order of appearance.

Red Box

Green Box

Blue Box

The elements above do not have z-index values set; their stacking order is the natural, or default, order. The overlaps that occur are due to the negative margins.

Why Does It Cause Confusion?

Although z-index is not a difficult proerpty to understand, due to false assumptions it can cause confusion for beginning developers. This confusion occurs because z-index will only work on an element whose position property has been explicitly set to absolute, fixed, or relative.

z-index:1000;

z-index:500;

z-index:1;

z-index:500;
position:relative;

z-index:1000;
position:absolute;

z-index:1;
position:relative;

The z-index property can affect the stack order of both block-level and inline elements, and is declared by a positive or negative integer value, or a vluae of auto. A value of auto gives the element the same stack order as its parent.

z-index:500;
position:relative;

z-index:1000;
position:absolute;

z-index:auto;
position:relative;

z-index:500;
position:relative;

z-index:0;
position:relative;

z-index:100;

Related Posts

The Z-Index CSS Property: A Comprehensive Look

Jun 17

Color Picker

CSS, Web Design No Comments »

Color Palette for Web

Below is a chart covering the 216 hexidecimal color values from the web safe palette. Use this chart if you prefer to use colors from the web safe palette.

#FFFFFF
#FFFFCC
#FFFF99
#FFFF66
#FFFF33
#FFFF00
#FFCCFF
#FFCCCC
#FFCC99
#FFCC66
#FFCC33
#FFCC00
#FF99FF
#FF99CC
#FF9999
#FF9966
#FF9933
#FF9900
#FF66FF
#FF66CC
#FF6699
#FF6666
#FF6633
#FF6600
#FF33FF
#FF33CC
#FF3399
#FF3366
#FF3333
#FF3300
#FF00FF
#FF00CC
#FF0099
#FF0066
#FF0033
#FF0000
#CCFFFF
#CCFFCC
#CCFF99
#CCFF66
#CCFF33
#CCFF00
#CCCCFF
#CCCCCC
#CCCC99
#CCCC66
#CCCC33
#CCCC00
#CC99FF
#CC99CC
#CC9999
#CC9966
#CC9933
#CC9900
#CC66FF
#CC66CC
#CC6699
#CC6666
#CC6633
#CC6600
#CC33FF
#CC33CC
#CC3399
#CC3366
#CC3333
#CC3300
#CC00FF
#CC00CC
#CC0099
#CC0066
#CC0033
#CC0000
#99FFFF
#99FFCC
#99FF99
#99FF66
#99FF33
#99FF00
#99CCFF
#99CCCC
#99CC99
#99CC66
#99CC33
#99CC00
#9999FF
#9999CC
#999999
#999966
#999933
#999900
#9966FF
#9966CC
#996699
#996666
#996633
#996600
#9933FF
#9933CC
#993399
#993366
#993333
#993300
#9900FF
#9900CC
#990099
#990066
#990033
#990000
#66FFFF
#66FFCC
#66FF99
#66FF66
#66FF33
#66FF00
#66CCFF
#66CCCC
#66CC99
#66CC66
#66CC33
#66CC00
#6699FF
#6699CC
#669999
#669966
#669933
#669900
#6666FF
#6666CC
#666699
#666666
#666633
#666000
#6633FF
#6633CC
#663399
#663366
#663333
#663300
#6600FF
#6600CC
#660099
#660066
#660033
#660000
#33FFFF
#33FFCC
#33FF99
#33FF66
#33FF33
#33FF00
#33CCFF
#33CCCC
#33CC99
#33CC66
#33CC33
#33CC00
#3399FF
#3399CC
#339999
#339966
#339933
#339900
#3366FF
#3366CC
#336699
#336666
#336633
#336600
#3333FF
#3333CC
#333399
#333366
#333333
#333300
#3300FF
#3300CC
#330099
#330066
#330033
#330000
#00FFFF
#00FFCC
#00FF99
#00FF66
#00FF33
#00FF00
#00CCFF
#00CCCC
#00CC99
#00CC66
#00CC33
#00CC00
#0099FF
#0099CC
#009999
#009966
#009933
#009900
#0066FF
#0066CC
#006699
#006666
#006633
#006600
#0033FF
#0033CC
#003399
#003366
#003333
#003300
#0000FF
#0000CC
#000099
#000066
#000033
#000000

Related Posts

Apr 15

Disable Text Selection

CSS, Javascript, Web Design, Web Development No Comments »

Disable Text Selection

With CSS

          				<div unselectable="on"></div> /* For IE */

          				.classname {
          					user-select: none;
          					-moz-user-select: none; /* For Firefox */
          					-khtml-user-select: none; /* For Safari */
          					-o-user-select: none; /* For Opera */
          				}

With Javascript

          				var disableTextSelection = function(element) {
          					element.unselectable = "on"; /* For IE */
          					element.style.UserSelect = "none";
          					element.style.MozUserSelect = "none"; /* For Firefox */
          					element.style.KhtmlUserSelect = "none"; /* For Safari */
          					element.style.OUserSelect = "none"; /* For Opera */
          				};

Mar 08

Opacity Setting

CSS, Javascript, Web Design, Web Development No Comments »

Opacity Setting

With CSS

          				.classname {
          					opacity: 0.5; /* For Newer Mozilla Browsers, Safari, and Opera */
          					-moz-opacity: 0.5 /* For Older Mozilla Browsers, like Netscape Navigator */
          					-khtml-opacity: 0.5; /* For Older Safari */
          					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=50)"; /* For IE 8 */
          					filter: alpha(opacity=50); /* For IE 6 and IE 7 */
          				}

With Javascript

          				var setOpacity = function(element, value) {
          					element.style.opacity = value / 100; /* For Newer Mozilla Browsers, Safari, and Opera */
          					element.style.MozOpacity = value / 100; /* For Older Mozilla Browsers, like Netscape Navigator */
          					element.style.KhtmlOpacity = value / 100; /* For Older Safari */
          					element.style.MsFilter = '"progid:DXImageTransform.Microsoft.Alpha(opacity=' + value + ')"'; /* For IE8 */
          					element.style.filter = "alpha(opacity=" + value + ")"; /* For IE 6 and IE7 */
          				};

Related Posts

Mar 08

CSS PNG Transparency

CSS, Web Design No Comments »

Working With Backgrounds in CSS 2

The Background Shorthand Property

          			background: transparent url(images/image.png) left top scroll no-repeat;

One important thing to note is that the background accounts for the contents of the element, including the padding and border. It does not include an element’s margin. This works as it should in Firefox, Safari and Opera, and now in IE8. But in IE7 and IE6 the background does not include the border.

Background Color

The background-color property fills the background with a solid color. There are a number of ways to specify the color.

					background-color: black;
					background-color: rgb(0, 0, 0);
					background-color: #000000;

The background-color property can also be set to transparent, which makes any elements underneath it visible instead.

Background Image

The background-image property allows you to specify an image to be displayed in the background. This can be used in conjunction with background-color, so if your image is not tiled, then any space that the image does not cover will be set to the background color. The path of the image is relative to the style sheet. So, in the following snippet, the image is in the same directory as the style sheet.

          			background-image: url(image.jpg);

Background Position

The background-position property controls where a background image is located in an element. The trick with background-position is that you are actually specifying where the top-left corner of the image will be positioned, relative to the top-left corner of the element.

In the examples below, we have set a background image and are using the background-position property to control it. We have also set background-repeat to no-repeat. The measurements are all in pixels. The first digit is the x-axis position (horizontal) and the second is the y-axis position (vertical).

The background-position property also works with other values, keywords and percentages, which can be useful, especially when an element’s size is not set in pixels.

The keywords are self-explanatory. For the x-axis: left, center, right. And for the y-axis: top, center, bottom

          			background-position: left top; /* The top-left corner of the image. */
          			background-position: -10px top; /* Move the image to the left. */
          			background-position: 100% top; /* Move the image to the right. */
          			background-position: 0 -46px; /* Move the image up. */

Background Attachment

The background-attachment property determines what happens to an image when the user scrolls the page. The three available properties are scroll, fixed, and inherit.

Inherit simply tells the element to follow the background-attachment property of its parent.

When we set background-attachment: scroll;, we are telling the background that when the element scrolls, the background must scroll with it. In simpler terms, the background sticks to the element. This is the default setting for background-attachment.

When we set the background-attachment to fixed, we are telling the browser that when the user scrolls down the page, the background should stay fixed where it is – i.e. not scroll with the content.

Background Repeat

By default, when you set an image, the image is repeated both horizontally and vertically until the entire elemtn is filled. This may be what you want, but sometimes you want an image to be displayed only once or to be tiled in only one direction. The possible values (and their results) are as follows:

          			background-repeat: repeat; /* The default value. Will tile the image in both dicrections. */
          			background-repeat: no-repeat; /* No tiling. The image will be used only once. */
          			background-repeat: repeat-x; /* Tiles horizontally (i.e. along the x-axis). */
          			background-repeat: repeat-y; /* Tiles vertically (i.e. along the y-axis). */
          			background-repeat: inherit; /* Uses the same background-repeat property of the element's parent. */

ViewDemo

How to fix PNG-24 transparency for IE6?

With CSS

          				/* For IE7 and Modern Browsers */
          				.classname {
          					background: transparent url(images/image.png) left top scroll no-repeat;
          				}
          				/* For IE6 */
          				*html .classname {
          					background-image: none;
          					filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/picture.png", sizingMethod="scale");
          				}

With Javascript

          				/* For IE6 */
          				element.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/picture.png", sizingMethod="scale")';

PNG-24 Pitfalls

Background Images Cannot Be Positioned Or Repeated

The AlphaImageLoader does work for background images, but only for the simplest of cases. If your design requires the image to be tiled (background-repeat) or positioned (background-position), you are out of luck. The AlphaImageLoader allows you to set a sizingMethod to either crop the image or to scale it to fit.

sizingMethod Values

Description

crop

Clips the image to fit the dimensions of the object.

image

Default. Enlarge or reduce the border of the object to fit the dimensions of the image.

scale

Stretch or shrink the image to fill the borders of the object.

Delayed Loading And Resource Use

The AlphaImageLoader can be quite slow to load, and appears to consume more resources than a standard image when applied. Typically, you’d need to add thousands of GIFs or JPEGs to a page before you saw any noticeable impact on the browser, but with the AlphaImageLoader filter applied Internet Explorer can become sluggish after just a handful of alpha channel PNGs.

The other noticeable effect is that as more instances of the AlphaImageLoader are applied, the longer it takes to render the PNGs with their transparency. The user sees the PNG load in its original non-supported state (with black or grey areas where transparency should be) before one by one the filter kicks in and makes them properly transparent.

Links Become Unclickable, Forms Unforcusable

There is a bug/weirdness with AlphaImageLoader that sometimes prevents interaction with links and forms when a PNG background image is used. This is sometimes reported as a z-index issue.

Often this can be solved by giving the links or forms elements hasLayout using position: relative; where possible.

Related Posts

Mar 08

CSS Float Theory

CSS, Web Design No Comments »

Specifics On Floated Elements

A left-floated box will shit to the left until its leftmost margin edge (or border edge if margins are absent) touches either the edge of the containing block, or the edge of another floated box.
If the size of the floated box exceeds the available horizontal space, the floated box will be shifted down.
Non-positioned, non-floated, block-level elements act as if the floated element is not there, since the floated element is out of document flow.
Margins of floated boxes do not collapse with margins of adjacent boxes.
The root element (<html>) cannot be floated.
An inline element that is floated is converted to a block-level element.

Clear The Floats

The container div itself has no height and no float, since it only contains floating elements. Therefore the background color and border stubbornly stays at the top of the floating columns.

Clear Tthe Floats Bug

Soultion One: Float The Container

					<div>
						<div style="float:left;width:30%;"><p>Some content</p></div>
						<p>Text not inside the float</p>
						<div style="clear:both;"></div>
					</div>

Soultion Two: Add Extra Markup

					<div>
						<div style="float:left;width:30%;"><p>Some content</p></div>
						<p>Text not inside the float</p>
						<div class="clearfix"></div>
					</div>

					.clearfix {
						clear: both;
					}

You could also do this with by means of a <br /> tag with an inline style. In any case, you will have the desired result: the parent container will expand to enclose all of its children. But this method is not recommended since it adds nonsemantic code to your markup.

Soultion Three: The :after Pseudo-Element

The CSS class clearfix is applied to any container that has floating children and does not expand to enclose them.

					.clearfix:after {
						content: ".";
						display: block;
						height: 0;
						clear: both;
						visibility: hidden;
					}

But this method does not work in Internet Explorer up to version 7, so an IE-only style needs to be set with one of the following rules:

					.clearfix {
						display: inline-block;
					}
					.clearfix {
						zoom: 1;
					}

Depending on the type of issue you are dealing with, one of the above two solutions will resolve the issue in Internet Explorer. It should be noted that the zoom property is a non-standard Microsoft proprietary property, and will case your CSS to become invalid.

Soultion Four: The Overflow Property

By far the best, and easiest solution to reslove the collapsing parent issue is to add overflow: hidden or overflow: auto to the parent element. However, this does not work in IE6. But, in many cases, the parent container will have a set width, which fixes the issue in IE6. If the parent container does not have a width, you can add an IE6-only style with the following code:

					This fix is for IE6 only
					*html .clearfix {
						height: 1%;
						overflow: visible;
					}

In IE6, the height property is incorrectly treated as min-height, so this forces the container to enclose its children. The overflow property is then set back to visible, to ensure the content is not hidden or scrolled.

The only drawback to using the overflow method (in any browser) is the possibility that the containing element will have scrollbars or hide content. If there are any elements with negative margins or absolute positioning inside the parent, the will be obscured if they go beyond the parent’s borders, so this method should be used carefully. It should also be noted that if the containing element has to have a specified height or min-height, then you would definitely not be able to use the overflow method.

ViewDemo

Related Posts

Mar 07

CSS Hacks

CSS, Web Design No Comments »

Conditional Comments

Syntax

          				<!--[if condition]> HTML <![endif]-->

Condition

          				<!-- Any Version of IE (typically 5, 5.5, 6, or 7) -->
          				<!--[if IE]> HTML <![endif]-->

          				<!-- Versions Less Than Version -->
          				<!--[if lt IE version]> HTML <![endif]-->

          				<!-- Versions Less Than or Equal To Version -->
          				<!--[if lte IE version]> HTML <![endif]-->

          				<!-- Only Version -->
          				<!--[if IE version]> HTML <![endif]-->

          				<!-- Versions Greater Than or Equal To Version -->
          				<!--[if gte IE version]> HTML <![endif]-->

          				<!-- Versions Greater Than Version -->
          				<!--[if gt IE version]> HTML <![endif]-->

Easy Selectors

IE6 and below

          				*html .hackname { property: value; }

IE7 and below

          				*:first-child+html .hackname { property: value; }

          				*html .hackname { property: value; }

IE7 only

          				*:first-child+html .hackname { property: value; }

IE7, Firefox, Safari, and Opera

          				html>body .hackname { property: value; }

IE8, Firefox, Safari, and Opera (Everything but IE6 and IE7)

          				html>/**/body .hackname { property: value; }

Firefox 2 only

          				.hackname, x:-moz-any-link { property: value; }

Firefox 3.0 and newer

          				.hackname, x:-moz-any-link, x-default { property: value; }

Safari only

          				.hackname empty { property: value !important; }

Safari 2 – 3.1

          				html[xmlns*=""]:root .hackname { property: value; }

Safari 2 – 3

          				html[xmlns*=""] body:last-child .hackname { property: value; }

Opera 9.27 and below, Safari 2

          				html:first-child .hackname { property: value; }

Safari 2 – 3.1, and Opera 9.25

          				*|html[xmlns*=""] .hackname { property: value; }

Firefox 3.5+, Safari 3+, Chrome 1+, and Opera 9+

          				body:first-of-type .hackname { property: value; }

Safari 3+, and Chrome 1+

          				@media screen and (-webkit-min-device-pixel-ratio:0) {
          					.hackname { property: value; }
          				}

iPhone/Mobile Webkit

          				@media screen and (max-device-width: 480px) {
          					.hackname { property: value; }
          				}

Everything but IE6 – 8

          				:root *> .hackname { property: value; }

Unrecommended Hacks

!important

          				.hackname {
          					property: value !important; /* IE7 and Modern Browsers */
          					property: value; /* IE6 and below */
          				}

_property: value and -property: value

          				.hackname {
          					_property: value; /* IE6 and below */
          				}

*property: value

          				.hackname {
          					*property: value; /* IE7 and below */
          				}

property/*\**/: value\9

          				.hackname {
          					property/*\**/: value\9; /* IE7 and IE8 */
          				}

property: value\9

          				.hackname {
          					property: value\9; /* IE6, IE7, and IE8 */
          				}

Everything but IE6

          				.hackname { property/**/: value; }

Related Posts

Vivian Crap

Categories

Archives

Meta

Liquid Round Corners

HTML

Stylesheet

HTML

Stylesheet

Stylesheet For IE 6

Stack Order

Color Picker

Disable Text Selection

Opacity Setting

CSS PNG Transparency

The Background Shorthand Property

Background Color

Background Image

Background Position

Background Attachment

Background Repeat

CSS Float Theory

Soultion One: Float The Container

`<div>` `<div style="float:left;width:30%;"><p>Some content</p></div>` `<p>Text not inside the float</p>` `<div style="clear:both;"></div>` `</div>`

Soultion Two: Add Extra Markup

Soultion Three: The :after Pseudo-Element

Soultion Four: The Overflow Property

CSS Hacks

Links

Categories

Archives

Meta

HTML

Stylesheet

HTML

Stylesheet

Stylesheet For IE 6

The Background Shorthand Property

Background Color

Background Image

Background Position

Background Attachment

Background Repeat

Soultion One: Float The Container

<div> <div style="float:left;width:30%;"><p>Some content</p></div> <p>Text not inside the float</p> <div style="clear:both;"></div> </div>

Soultion Two: Add Extra Markup

Soultion Three: The :after Pseudo-Element

Soultion Four: The Overflow Property

Links

`<div>` `<div style="float:left;width:30%;"><p>Some content</p></div>` `<p>Text not inside the float</p>` `<div style="clear:both;"></div>` `</div>`