Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Senior Coder
    Join Date
    Jun 2008
    Location
    New Jersey
    Posts
    2,536
    Thanks
    45
    Thanked 259 Times in 256 Posts

    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.

    Top:


    Bottom:
    Last edited by Keleth; 06-28-2013 at 12:09 AM.

  • #2
    Senior Coder
    Join Date
    Jun 2008
    Location
    New Jersey
    Posts
    2,536
    Thanks
    45
    Thanked 259 Times in 256 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •