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.
Ok, while putting up the post, I got a hit of inspiration that seems to have worked. I've given the inner container with the text content an explicit height... its own. I'm no longer getting that height bug it seems.
However, if someone knows why the element's height is changing as I scroll, or knows a better way I can do a trapezoid configuration I didn't think of, please let me know. I might have fixed it, but I don't know what I've fixed, and it feels like a dirty fix, so anyone with information would be appreciated.
|All times are GMT +1. The time now is 07:26 AM.|
Powered by vBulletin®
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.