Results 1 to 9 of 9
  1. #1
    Join Date
    Mar 2005
    Location
    Ontario, Canada
    Posts
    1,750

    Exclamation Help, my CSS is broken

    I asked for some help previously to centre blocks on the screen as shown in this thread http://www.3dbuzz.com/vbforum/showth...-centre-blocks

    I went ahead to implement this but I've run into a major problem that I can't figure out how to fix. See my demo file here for the broken behaviour: http://www.marek-knows.com/Misc/3dbuzz/demo.html

    Notice that if I use the green blocks (div.regular), everything lines up nicely just as I want.

    Same is true if I use the pink blocks (div.long).

    However when I mix the green with the pink together, the blocks don't align vertically anymore.

    For some reason the overflow attribute in the pink block is breaking the desired behaviour. Does anyone know how to fix this?
    C++, 3D OpenGL and Game Programming video tutorials:
    www.MarekKnows.com
    Play my free games: Ghost Toast, Zing, Jewel Thief

  2. #2
    Join Date
    Jul 2008
    Location
    Portsmouth, England
    Posts
    436
    Can't tell for sure just looking at it with Firebug, but the first thing I'd try is setting a margin on div.regular and div.long. Second thing I'd try is setting position:relative on div.long and div.regular and then playing with the top property, not necessarilly to adjust for the height difference, but sometimes setting position to something other than static fixes weird layout issues.

  3. #3
    Join Date
    Mar 2005
    Location
    Ontario, Canada
    Posts
    1,750
    Hey I think I just fixed it! If I set overflow to auto for div.item, I think it now works!
    C++, 3D OpenGL and Game Programming video tutorials:
    www.MarekKnows.com
    Play my free games: Ghost Toast, Zing, Jewel Thief

  4. #4
    Join Date
    Jul 2008
    Location
    Portsmouth, England
    Posts
    436
    Oh yes, that's another go-to fix for layout weirdness Known in the context of IE as the "has-layout" fix. Are you checking this in other browsers than IE btw?

  5. #5
    Join Date
    Mar 2005
    Location
    Ontario, Canada
    Posts
    1,750
    Hmmm, I tested this fix on IE, firefox, opera and it works well. On Chrome and Safari I still get strange vertical shifting
    C++, 3D OpenGL and Game Programming video tutorials:
    www.MarekKnows.com
    Play my free games: Ghost Toast, Zing, Jewel Thief

  6. #6
    Join Date
    Feb 2007
    Location
    Atlanta, GA
    Posts
    79
    I can't test this on my PC against safari or Opera right now, but instead of using overflow:auto try using

    vertical-align:top;

    in the item class. This should work in those browsers too.

    In a number of cases vertical-align usually won't provide the look you're aiming for but in this specific case it should do the job fine (again because the funny way inline-block works). by default the vertical align is using "baseline" which is telling this element to match its baseline with the baseline of the parent element. the regular and long class don't share the same baseline which is why this is happening.

    using "top" tells the element to align the top of itself with the top of the tallest element on the same line (in your example all the elements have the same height so whats really happening is a little hidden). If you later decide to mix elements that have different heights all the elements will align their top borders to the other elements on the same row.

    EDIT: Sorry, I meant "Chrome or Safari".

  7. #7
    Join Date
    Mar 2005
    Location
    Ontario, Canada
    Posts
    1,750
    Thanks for the suggestion, I ended up switching everthing over to table cells to get it working the way that I want across all browsers.
    C++, 3D OpenGL and Game Programming video tutorials:
    www.MarekKnows.com
    Play my free games: Ghost Toast, Zing, Jewel Thief

  8. #8
    Join Date
    May 2005
    Location
    Netherlands
    Posts
    269
    Be aware that what you are doing, with including a div inside a span, is a big no no.

    A span is a inline element and a div is a block element. And with HTML you can only include inline elements in block elements and not the other way around (which you are doing in your example). This could also be a part of the problem. Because when you include block elements inside inline elements funky things can happen.

  9. #9
    Join Date
    Feb 2007
    Location
    Atlanta, GA
    Posts
    79
    @teamDutch, you right in the sense that sticking block level elements inside an inline element is a no-no. however the spans that he is using in that demo are using "display: inline-block", not the default "display:inline". He chose to use spans instead of divs due to a finicky way a certain version of IE messes with block-level elements that go with inline-block. This was actually brought up and discussed in the thread he linked in the first post.

Tags for this Thread

Posting Permissions

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