SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2005
    Location
    UK
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Unexplained border gaps

    Having looked, I think, but obviously not, at all possible solutions, I have a border gap problem. Can someone tell me why the content area of the site, which is still a work in progress

    http://1ontheweb.net/preview/index.html

    has gaps at the top and bottom of the content border.

    Also look at this page:

    http://1ontheweb.net/preview/thankyou.html

    As part of trying to resolve the problem, I added a specific height using inline style, to the maintextarea div. This has the effect of closing the gaps in IE, leaves a gap at the top but not at the bottom in Firefox, and Opera is another story. It places a huge gap at the bottom.

    Thanks in advance.

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's probably because you have margin-top:5px for the heading and margin-bottom:10px for the P element.
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2005
    Location
    UK
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the input.

    Sometimes just needs a fresh pair of eyes. You look at the problem to long and can't see the wood for the trees. However, this fixes the problem in Firefox and Opera but only closes the bottom gap in IE.

  4. #4
    SitePoint Enthusiast
    Join Date
    Oct 2004
    Location
    Mexico City
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, css is a bit... tricky
    Add a border statement to your #maintextarea and the layout will work great, at least in Netscape7, Opera7.5, IE6 & IE5.5
    The bottom gap will still be present in IE5.0
    #maintextarea {
    left: 0px;
    position: relative;
    top: 0px;
    margin: 0px 150px 0px 150px;
    background-color: #FFF;
    color: #000;
    border: 1px solid #FFF;
    border-left: 1px solid #F19D22;
    border-right: 1px solid #F19D22;
    /* min-height: 300px; */
    }
    The thing is that block elements behave differently if you have defined a border than if you don't. Unfortunately a border set to hidden is not rendered, so that don't help to solve the problem. That's why I used a border of white color.
    Hábitat Web - Soluciones para espacios virtuales

  5. #5
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This sounds like you are encountering collapsing margins.
    Birnam wood is come to Dunsinane


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
  •