workblog » CSS

Z-Index Stacking Contexts

Ian — Tue, 17 Aug 2010 17:36:36 +0000

One important thing to keep in mind while working with z-index is that multiple stacking orders are created based on the markup hierarchy. This means that an element with a z-index of 30 can actually appear below an element with a z-index of 20, if the z-index of the original element’s parent is 10.

Paolo Lombardi explains this well in his article on stacking context, and includes this helpful diagram:

CSS Selector Browser Compatbility

Ian — Mon, 17 May 2010 18:30:20 +0000

kimblim.dk has a chart showing browser support for various CSS selectors, including pseudo selectors. It includes CSS versions 1 through 3 and all of the major browser versions.

Content Above Anchors Disappear

Ian — Thu, 15 Apr 2010 17:22:16 +0000

It turns out there’s a serous problem with the One True Layout method of creating equal height columns. All of the content above an anchor will be shifted up, making it seem like it disappeared. There aren’t any universal or reliable fixes for this, so the Faux Columns method is probably the best choice if it’ll fit the design.

Using overflow to Clear Floated Elements

Ian — Sat, 21 Nov 2009 19:11:32 +0000

If you have an element whose children are all floated, it won’t have any height to it. I’ve always just put an extra

at the bottom of the container to force it to clear, but it looks like there’s been a much better way for a few years now. Alex Walker points out that you can just set overflow:auto on the container.

Placing an Element In Front of an Object

Ian — Fri, 13 Nov 2009 19:04:34 +0000

Here’s how to have a drop-down menu appear on top of a Flash object:

Add a z-index of 0 to the object’s containing div
Add inside the object tag
Add wmode=”transparent” to the embed tag

via Sheriar Designs

The Best Way to Define Font Sizes in CSS

Ian — Wed, 28 Oct 2009 14:15:23 +0000

Often designers will want fixed font sizes so that the text on the actual size will exactly match their mockups, but The Web is Not Print (see also Pixel Perfect Design Does Not Necessarily Equal Good Web Design). A List Apart has a worked out a good method for sizing text consistently across browsers while maintaining the user’s ability to resize the text to fit their needs.

All you need to do is define a baseline size and line height in the body tag, and then use em’s throughout the rest of the site.


body
{
font-size:100%;
line-height:1.125em; /* 16×1.125=18 */
}

.bodytext p
{
font-size:0.875em;
}

.sidenote
{
font-size:0.75em;
}

CSS Drop-Down Menus

Ian — Fri, 23 Oct 2009 21:59:41 +0000

Tomas Bagdanavicius has created a fast, themeable, cross-browser CSS-based Drop-Down Menu Framework that only uses Javascript for IE6.

Preloading Images

Ian — Fri, 29 May 2009 18:10:00 +0000

I’ve been looking for a good way to preload images for rollovers, but it seems like a lot of the common methods have problems.

There are reliability issues using a JavaScript Image object or document.write()
Some browsers won’t load a display:none containing element

So far the best way I’ve found is Perishable Press’ Better Image Preloading without JavaScript method. You can set the hover images as the background on the regular image, and then position it outside of the image, so it doesn’t show up:


#foo1 {background: url(foo1-hover.png) no-repeat -500px -500px ;}
#foo2 {background: url(foo2-hover.png) no-repeat -500px -500px ;}
#foo3 {background: url(foo3-hover.png) no-repeat -500px -500px ;}

The problem I have with this one, though, is that the hover images will be loaded with the rest of the page, making it slower. I don’t think they should be loaded until after the rest of the page has finished loading. So, I used SitePoint’s addLoadEvent() to assign the background images after the page loads:


document.getElementById("foo1").style.background = "url(foo1-hover.png) no-repeat -500px -500px";
document.getElementById("foo2").style.background = "url(foo2-hover.png) no-repeat -500px -500px";
document.getElementById("foo3").style.background = "url(foo3-hover.png) no-repeat -500px -500px";

Clearing a Browser’s default CSS stylesheet

Ian — Thu, 13 Nov 2008 19:04:37 +0000

Clear a browser’s default CSS stylesheet

Update: After working with it for a little while I prefer using Yahoo’s Reset CSS, Base CSS and a few custom values to Meyer’s version. I think he takes it too far (almost to the point of absurdity) with things like stripping the weight from the strong tag.


/* YUI Reset v2.6.0 */
html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}del,ins{text-decoration:none;}
/* YUI Base v2.6.0 */
h1{font-size:138.5%;}h2{font-size:123.1%;}h3{font-size:108%;}h1,h2,h3{margin:1em 0;}h1,h2,h3,h4,h5,h6,strong{font-weight:bold;}abbr,acronym{border-bottom:1px dotted #000;cursor:help;} em{font-style:italic;}blockquote,ul,ol,dl{margin:1em;}ol,ul,dl{margin-left:2em;}ol li{list-style:decimal outside;}ul li{list-style:disc outside;}dl dd{margin-left:1em;}th,td{border:1px solid #000;padding:.5em;}th{font-weight:bold;text-align:center;}caption{margin-bottom:.5em;text-align:center;}p,fieldset,table,pre{margin-bottom:1em;}input[type=text],input[type=password],textarea{width:12.25em;*width:11.9em;}

/* Custom */
table tr td
{
	border: none;
	vertical-align: top;
	text-align: left;
}

ul li ul /* Nested lists */
{
	margin: 0 0 0 40px;
}

Targeting properties to IE6 with Valid CSS

Ian — Mon, 14 Jul 2008 14:15:49 +0000

When I’m translating a design to markup I can usually get it to look the same in all the major browsers without too much trouble, but every once in awhile there’s a problem with IE6 that I can’t figure out, or just don’t have the time/energy to deal with the right way. In the past I’ve used the underscore hack to target a specific property to IE6, but the problem with that is that it isn’t valid CSS. Recently I found a way to avoid CSS hacks and get the same results with valid CSS. Instead of using the underscore, it uses child selectors, which are valid, but IE6 doesn’t support.

For example, I had a design where one element had to line up perfectly with another, and it was working fine in Firefox/Safari/IE7, but in IE6 it was 3 pixels off, so I did this:

test


#childElement /* This is the element I want to position */
{
position: relative;
left: 113px; /* This targets all browsers, including IE6 */
}

#parentElement > #childElement
{
left: 116px; /* This targets only Firefox/Safari/IE7. IE6 doesn't support it, so it uses the value above, but the others will use this one instead */
}