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/
