Sometimes there’s a piece of CSS you just have to use for one browser and hide from the rest. In a case like that, you will need a hack or filter. Today, I found an interesting chart that shows various filter hacks and which browsers they target. Take a look: http://centricle.com/ref/css/filters/
October 25th, 2006
Big news in August slipped below my radar. What’s the fuss? There’s now a fix for a small but frustrating problem that has plagued CSS designers ever since the release if Internet Explorer 6.
When a mouse rolls over a link that the designer has styled with a background Image, IE6 shows a flicker as it changes states. Though there were cumbersome fixes, nothing was available that worked simply and elegantly.
Enter Dan Popa’s IE6 Image Flicker solution. A simple Javascript snippet placed in your HTML document’s head element fixes the caching problem completely!
Here’s the code:
javascript:void(document.
execCommand("BackgroundImageCache",false,true))
Thanks Dan!
1 comment September 29th, 2006
Today I decided to start a blog category of CSS Bug Fixes more for myself than for anyone else. I often read about simpler ways of fixing bugs and misplace the facts somewhere in the jumble of thoughts and busyness. Here’s the first installment:
The IE double margin bug shows up in practically every floated layout I create using CSS. Sometimes I use a CSS hack to set margins specifically for IE and others for Firefox and more modern browsers. Now, thanks to CSS Mastery by Andy Budd, and Bulletproof Web Design by Dan Cederholm I am reminded that there is a much more elegant solution than setting alternate margins for IE. If there’s a choice between fixing the problem or managing symptoms, I’ll choose the former every time!
The solution to the IE Double Margin Bug on floated elements is to set the floated element’s display property to inline.
For example:
.column { float:left; margin-right:10px; }
/* For IE */
* html .column { display:inline; }
I hope this helps you. Now this fix is in a place I’ll be able to find when I need it. More coming soon …
2 comments August 17th, 2006
Joseph W. Lowery’s book, CSS Hacks & Filters, makes a great effort towards amassing all the current CSS Hacks available on-line and explaining their appropriate usage. To a great extent this volume succeeds in making order out of chaos and I heartily recommend its use as a supplemental resource for anyone who does not want to bookmark every CSS Hack Web page they might find useful.
While Lowery’s clear explanations of the rationale and appropriate application of each hack adds significant worth to this book, the real distinction between CSS Hacks & Filters and other CSS volumes I own is its focus on implementing CSS design with Dreamweaver’s internal template engine. This can be a real time saver for those new to Dreamweaver’s template engine and/or CSS.
CSS Hacks covers tasks like using Javascript/DOM to serve appropriate style sheets to various browsers, server side solutions for CSS, CSS based navigation systems, and image scaling with CSS. In addition, it includes several example templates that have been broadly tested on current browsers and that can provide a more secure foundation for your cross-browser design project than your own untested layout. Lowery also includes a detailed appendix that lists the various CSS Hacks/Filters and their applications.
This book is an excellent resource for those beginning CSS, especially if they are interested in Dreamweaver and Web development or scripting languages like Javascript, PHP, or ColdFusion.
You can find a bit more information about the author at his Flashbang! Web site.
Wiley books are available at your local bookstore or by calling 1-800-225-5945. In Canada, call 1-800-567-4797.
April 24th, 2006
I have been puzzled by the way IE displays list bullets beside left floated images for some time. Actually, doesn’t display list list bullets, is more accurately put. The list bullets on unordered lists (UL) and numbers on ordered lists (OL) are hidded behind the floated image. My usual response has been to add a massive amount of margin or padding to the floated image, but this is unsightly. Today, I devised a workaround that has its weaknesses, but at least seems to render consistently across browsers.
I begin by setting margin and padding to zero on the lists (UL and OL) to help things render equitably across browsers. Then I declare all margins on the list items (LI). This should even out cross-browser problems. The final rule is a class that can be applied to the list (UL or OL) and the resulting float causes everything to render beautifully in IE. Though the float causes real display problems in other browsers, the IE Only Hack hides it effectively.
ul, ol {margin:0;padding:0;}
ul li, ol li {margin:0 2em 0 2.25em;padding:0;}
* html .byfloatedimage{float: left;} /* IE Only Hack */
If you have any improvements on this method, or one that works more elegantly, please post it below!
1 comment June 17th, 2005
CSS Web design, e-commerce Web design, and internet marketing issues from the desk of Harvey A. Ramer at Design Delineations.
| M | T | W | T | F | S | S |
|---|---|---|---|---|---|---|
| « Apr | ||||||
| 1 | 2 | 3 | 4 | |||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | 30 | 31 | |