Is there anyway to even them out? I never really noticed the differences till yesterday when I was trying to hide something with negative margins. When compared to Chrome, Firefox/IE renders my box 2-3 PX larger, and opera 2-3 PX smaller. My solution was to set an estimate of the negative margin, then calculate the actual height in JavaScript and reset it. The 2-3px flash on non-chrome browsers bugs me though, and I'd rather not used fixed measurements. Here's what I'm talking about... Open this is a browser other than chrome: http://sitechop.com/demos/css3-js-slide-toggle-menu/index.html Any better solutions?
Apply transition rule to the .nav ul, and play with its height (from 0em to 15em something), ...perhaps?
I didn't think there was a way of evening out EM values, nope. Since they're based off the user's chosen font size, hence you cannot guarantee that they'll be consistent across all OSes and browsers.
Because EM's are a dynamic multiplier you'll find that sometimes with negative margins they just don't work right, particularly on HEIGHT. This is because in adding things up Firefox rounds all fractions up for display but never actually throws away the fraction overall; IE rounds up but throws the fraction away, and everyone else truncates before rendering. It's a pain in the ass and why sometimes with things like negative margin heights you are FORCED to either find another way of doing things or resorting to inaccessible pixel measurements. THOUGH -- MOST of the time if you stick to multiples of 5% you'll be ok... just don't be surprised if zoom + a different default size screws with your layout. Of course for what you are doing, it's a shame CSS3 implementations are too ***tarded to scale to height:auto -- NOT that when doing what you are attempting I see any reason to even get JS involved -- but as a rule I hate that stupid inaccessible "let's make mobile harder to use in the name of making it easier to use" menu hiding crap... though to be fair MOST of what you have there I wouldn't have there like the HTML 5 bloat for nothing. No joke though, have you tried using :target or the more complex input[checkbox]:checked>sibling methods? Scripting? BAH!