For the first time in my career of CSS-based design, I've run in to a problem whereby Firefox differs in its rendering from that of Safari in MacOS X.
Here's the relevant XHTML: <div class="menu"> <h2>Menu Title</h2> <ul> <li><a href="#">Menu Link</a></li> <li><a href="#">Menu Link</a></li> </ul> </div> And the relevant CSS: #sidebar .menu ul { list-style: none; width: 181px; } #sidebar .menu ul:after { display: block; width: 181px; height: 10px; content: ""; position: relative; top: -8px; background: #ffffff url(images/sidebar_bottom.gif) no-repeat center bottom; } In Safari, the end-cap (ul:after) is correctly budges up 8px. In Firefox 1.5, it exists but is not budged up 8px. HTML validates and CSS validates except for the usual "line-height" problem[1]. I have not yet wasted my time adding in an IE 6-specific stylesheet. I can only imagine what it looks like in IE 6. If you're adventurous, you can send me a screencap because my PC is down for a while. XHTML: <http://ohgoditburns.net/TEST/lib_commons/> CSS: <http://ohgoditburns.net/TEST/lib_commons/css/default.css> Thanks in advance! -Tyson [1] <http://www.meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/> ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/