Strange height behavior with CSS? Or dynamic content?
So I'm trying to make a style that looks a little different, as a trapezoid (see orange bar in image below). So I wrote some JS that takes any tag with particular class, puts its content in a div and adds two other divs, one for the left slanted edge, the other for the right. The h1 is given a relative position, and the div containing the content is given a margin based on some calculations. Then the two other divs are given borders to give them the slanted look, and absolute positions for top left and top right. As you can see in the first image, it looks fine.
However, if you look at the second red button (Create a New Game), you can see the left edge is raised slightly, for no real reason. Then if I scroll down, it fixes, while the top header bar (the orange one) malforms. This happens on other pages as well, whether there is one or more bars, but I can't figure out why. The height of the elements is all the same, and the CSS seems sound. In fact, its strange that the element actually looks different based where on the page I'm scrolled to.
More confusing, I only get this behavior in Firefox, not in Chrome (I'm currently only testing in FF and Chrome as I develop the site, I'll go back for IE fixes after, if at all, given I'm using some advanced HTML5 stuff IE doesn't like...). Its also worth noting, it happens on the left, and not the right.