SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    792
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    extraneous space betw elements..

    this happens to me all the time, it drives me nuts, I want to finally get to the bottom of this..

    http://mayacove.com/dev/modal/test.html

    WHY is there extra space betw elements here?

    if I add a border around elements the space disappears
    http://mayacove.com/dev/modal/test2.html

    but of course as you can see, I can't do that here..
    (I added overlfow:auto; to containing element, still no cigar...;-)

    I run into this prob again and again (occurs in all browsers), sometimes I can solve by adding borders around elements, but you can't always do that, as is the case here...

    would appreciate some help..

    thank you..

    PS: edit: just found out only browser it doesn't occur is IE7!!! (&6? I don't have to support IE6..) go figure...

  2. #2
    SitePoint Enthusiast NuttySkunk's Avatar
    Join Date
    Jan 2012
    Location
    United Kingdom
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That specific gap is coming from the margin value of "benefits_inner". Try using padding instead.

    You should look at a CSS reset (Google: Eric Meyer), this will help "normalise" your browsers and will help greatly with cross browser issues.

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You will learn that some elements come with default margins, and different browsers come iwth differnet settings of them set. It's probably not happening in IE7 due to something called collapsing margins. The bottom and top margins of elements are colliding.

    You can read this article for more information on why your issue isn't across every browser. You will need the reset as mentioned above.

    http://reference.sitepoint.com/css/collapsingmargins
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  4. #4
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    792
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    tank you for yr response.. actually I use a reset that has all elements set to margin:0; and padding:0;
    http://mayacove.com/dev/modal/test.html

    what I actually had to do was give all elements overflow:auto; (not the containing element, which is what I had tried..)

    thank you..

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Well to be honest I'd remove that code you just added to make all divs overflow:auto. That will only lead to troubles in the long run.

    You actually only needed it on "#bens_main" but also putting it on "#benefits_inner" would also prevent a margin collapse happening (unrelated issue).
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  6. #6
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    792
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    you're right: need it only in #bens_main div

    (yes under normal circs I wouldn't do something like

    Code:
    #benefits div {overflow:auto; }

    did it here for practical reasons.. but, just like you say, only needed in that middle main div..

    thank you very much..

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Ok I just wanted you to know the... impracticality of using that on all divs.

    You're welcome .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


Bookmarks

Posting Permissions

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