Development Notes
These are notes and short demos of features I use often and solutions to issues I consistently run into in my work. I post them here mostly to provide
myself a future reference so I can remember when I need to 
- and I hope others
might gain a bit of help also. The post date of 11/2008 coincides
with the launch of the site. All others are accurate.
IE Conditional Comments
This should have been here a long time ago...
I'll spare you the 'how they work' details. These little gems are very helpful when it comes to helping IE behave in regard to Web Standards. While it is not a silver bullet, it comes close for me most of the time. If I need to use Microsoft-defined CSS such as expressions (see below), I prefer to isolate all of this in a separate file that I use only when necessary - using IE conditional comments. It is also much better than using old-school hacks which are becoming more and more impractical to use.
These can be used embedded in the HTML, or in the head of the document to include IE specific scripts or CSS files.
<!--[if IE 6]> ...is IE 6 <![endif]--> <!--[if IE 7]> ...is IE 7 <![endif]--> <!--[if lt IE 6]> ...is lower than IE 6 <![endif]--> <!--[if lte IE 6]> ...islower than or equal to IE 6 <![endif]--> <!--[if gt IE 6]> ...is higher than IE 6 <![endif]-->
CSS Sprites
CSS sprites have been around for a while - a few years anyway. I believe they harken back to the bitmapped imagery of two dimensional computer games. The small bitmapped images where combined into a grid. Then all that was needed to paint them on the screen was knowing the coordinates of each image on the grid.
CSS sprites have made use of the image grid to lower the overhead required to bring varying image states and versions into the UI. In the example I present, I have three button states and three backgrounds on a single image grid. Instead of requiring six http requests to bring the images into the UI, it only requires one request. Typically, the file size of a single image grid (sprite) tends to be lower than the sum total of n separate images.
Another benefit of using sprites is the response time of button hover states. Because the different image states are all cached at the same time, there is 'no waiting' to change the image on hover - no http request, no pre-caching required.
Image Replacement
This example allows for the use of an image for visual display while providing semantic markup in the source for search engines and non-visual user agents. I use this method of image replacement in many different ways, notably for tabbed navigation and <h1> logos and site titles.
Below is the annnoted CSS.
The CSS: .parentContainerClass h1 { float: left; /* not always required */ display: block; /* ensure it is a block level element (header elements are by default - just a std practice) */ margin: 0; /* normalize the margins */ padding: 44px 0 0 0; /* top padding = height of the bg image; all other padding is normalized */ width: 274px; /* width of the image - especially required if the image is floated */ overflow: hidden; /* hide the header system text */ background: transparent url(/images/hdr_somePage.gif) 0 0 no-repeat; /* the header image */ height: 0px !important; /* set the height to zero so the overflow does not fall outside the padded area */ height /**/:44px; /* */ /* IE 5 hack - pretty much deprecated, but what the heck */ } The HTML: <div class="parentContainerClass"> <h1> The Company Name </h1> </div>The padding is equal to the height of the image, pushing the text content down below the image. The text content is then hidden using the overflow property. The IE5 hack is only there for any possible legacy issues.
CSS Drop Down Menus
This menu system is 100% CSS and 100% accessible. It uses nested lists for the drop down menus. These are positioned absolute off the page and are repositioned relative to thier parent on hover. Using positioning instead of the display: none property keeps the nested navigation links visible to screen readers.
IE requires a bit of JavaScript to set up onmouseover and onmouseout events on the list items (IE does not support the hover pseudo class on list item elememts) - this is one small caveat. There is a call to an onload handler function wrapped in an IE contitional comment in the head of the page to provide this.
The system is scalable - you can add menus to any or all of the primary navigation elements - but is limited to a single level. For a multi-level drop down system, I strongly recommend the system developed by P.I.E. and is freely available for use.
You can access the CSS of this demo by viewing source.
Rounded Corner Boxes - Using Images
A technique for creating fully flexible, rounded corner boxes - and widely supported. The concept is quite simple - we use a combonation of layering block level elements on top of one another and a little negative positioning as illustrated below.
In the simplest example, a CSS bordered box with four small corner images, a system of three layered block-level elements are used. The first is the parent of the other two and is the bordered box. Within that box is placed another element that has a background of the left corner image and is positioned left negative one pixel. Inside of this box is another element whose width is set to the width of the right corner image and it is positioned right.
Using this technique, just about any type of box can be created as you will see in the examples. For effects such as shadows, etc. things can be adjusted to use background images that contain the shadow horizontally and for vertical shadowing a repeated background image is used.
One other advantage with these boxes is that they can be nested - even to create columns. This is also shown in the examples.
Rounded Corner Boxes - CSS Only
This technique is modeled after the original Spiffy Corners concept.
Though I do not offer a convenient online tool as Greg Johnson does for Spiffy Corners, I have torn apart the CSS required so editing is quick and easy. Though Greg's use of the small '<b>' tag reduces the markup, I prefer more semantic markup, so I use spans instead. I also garnish the great (and free) tool created and offered by Eric Meyer under Creative Commons licensing to generate the colors for the color transition between the box and it's parent. I have preserved a copy on my tools page for use with CRC boxes.
These are 5 pixel radius rounded corner boxes. The blend of colors from the background of the interior of the box to the background color of it's parent container consists of these two endpoint colors and four midpoint colors to create a smooth transition for proper anti-aliasing of the corners.
To change the colors of the box and its parent, generate the midpoint colors with the Color Blend tool and plug the values into the CSS. Below is the editable portion of the CSS for the transitionary colors and an expanded view of the necessary markup.
/* ---------------------------------------------------------------------------- Working from the interior bg color to the parent container bg color. ---------------------------------------------------------------------------- */ /* interior box color -------------------------------- */ .crc * { background: #0066CC; } .crc_content { background: #0066CC; } /* midpoint one color -------------------------------- */ .crc2 { background: #2F81D3; } .crc3 { border-right-color: #2F81D3; border-left-color: #2F81D3; } /* midpoint two color -------------------------------- */ .crc5 { border-right-color: #5F9CD9; border-left-color: #5F9CD9; } .crc1 { background: #5F9CD9; } /* midpoint three color ------------------------------ */ .crc4 { border-right-color: #8EB7E0; border-left-color: #8EB7E0; } .crc1 { border-right-color: #8EB7E0; border-left-color: #8EB7E0; } /* midpoint four color ------------------------------ */ .crc2 { border-right-color: #BED2E6; border-left-color: #BED2E6; } /* exterior box color -------------------------------- */ .crc_parent { background: #EDEDED; } <div class="crc_parent"> <span class="crc"> <span class="crc1"> <span></span> </span> <span class="crc2"> <span></span> </span> <span class="crc3"></span> <span class="crc4"></span> <span class="crc5"></span> </span> <div class="crc_content"> <!-- Content Goes Here --> <!-- start ipsum code --> <p>Praesent in mauris eu tortor porttitor accumsan. </p> <p>Maecenas ipsum velit, consectetuer eu, lobortis ut, dictum at, dui. </p> <!-- end ipsum code --> </div> <span class="crc"> <span class="crc5"></span> <span class="crc4"></span> <span class="crc3"></span> <span class="crc2"> <span></span> </span> <span class="crc1"> <span></span> </span> </span> </div>
Overriding IE6 CSS Declarations Using the Descendent Selector - Not Hacks
If you have some IE bug you desire to adjust for using a IE-specific CSS declaration e.g. margin values. It is best to avoid using hacks by leveraging the various support differences that exist with IE.
A descendant selector selects an element only when it is the direct descendant of another specified element. Place the preferred IE declaration in the 'general' CSS rule. Then, using the descendent selector, set up another rule for only the targeted problem declaration and place the 'correct' declaration there.
/* General Rule for 'All' Browsers - IE(6) Included */ .parentDiv .childContainer { margin: 0 0 -6px 0; height: 4px; background: #EDEDED; border: 1px solid #000; } /* Targeted Rule for the 'Correct' Margin, Which Excludes IE (Feeds Mozilla, etc.) */ .parentDiv > .childContainer { margin: 0 0 2px 0; }
A 100% Width Table Inside A "Sized" Div
In IE a table placed inside an internal div with a 100% width will stretch the external div to the width of the external div plus the padding of the internal div.
To fix this, table width in the 'correct' rule is set at 100% while the 'general' rule has the width set at 99.5%.
.myTable { background: #C7D7E4; width: 99.5%; border-collapse: collapse; } .parentDiv > .myTable { width: 100%; }
Disappearing Background Images
IE likes to make background images (and sometimes even text - particularly if there are floated elements around) disappear. This often happens when you scroll vertically.
To fix this, assign a width or a height to the element with the background image. You may not want to assign a height or width, so a solution is to assign a height of 1% for Internet Explorer (IE interprets height as min-height so this CSS rule won't affect the appearance).
.parentDiv { background: #CC url(/path/images/filename.jpg) 0 0 repeat-y; height: 1%; } html>body .parentDiv { height: auto; }
Centering a Fixed-Width Page in IE
IE(6) does not recognize the 'margin: 0 auto' declaration. Use 'text-align: center' on the body CSS declaration and the margin property on the wrapper.
body { text-align: center; } #pageDiv { margin: 0 auto; width: 940px; text-align: left; }
IE Expression for Setting Mins and Maxs
IE does not honor the min/max property. To fix for this, I prefer to use the proprietary CSS attribute 'expression'. Syntactically this can be tricky.
#divWithMinWidth { width: expression(document.documentElement.offsetWidth < 925? "924px" : "auto" ); /* sets min-width IE */ min-width: 924px; /* For everyone else */ } #divWithMaxWidth { width: expression( document.body.clientWidth > 776 ? "777px" : "auto" ); /* sets max-width for IE */ max-width: 777px; } #divWithMinHeight { height: expression( this.scrollHeight < 334 ? "333px" : "auto" ); /* sets min-height for IE */ min-height: 333px; } #divWithMaxHeight { height: expression( this.scrollHeight > 332 ? "333px" : "auto" ); /* sets max-height for IE */ max-height: 333px; }It is important to note the 1 pixel difference in the expression. This prevents IE from going into and endless loop and hanging while it is trying to calculate the values.
Absolute Positioning Note
If you have an absolutionally positioned element e.g. a div within a parent that has its position set relative (as it should be) and you, say, have only the top property set (and not the left), Mozilla rightly interprets the default of left at zero of the parent container. IE, on the other hand, sets the left edge relative to where the abs element appears in the flow. Simply defining the left position solves this behavior.