Gap that appears in all browsers but chrome... How to fix?

Discussion in 'CSS' started by Xitanto, Sep 2, 2010.

0
  1. #1
    Hi guys,

    I'm doing this website for a friend's business; I'm still learning my thing, so it's still template based. However, somehow I've brought a weird gap into the mix, visible between the title image and the menu.

    http://www.wordmasseuse.com.au/

    Anyone got any idea how to fix this?

    Thanks!
     
    Xitanto, Sep 2, 2010 IP
  2. radiant_luv

    radiant_luv Peon

    Messages:
    1,327
    Likes Received:
    34
    Best Answers:
    1
    Trophy Points:
    0
    #2
    The stylesheet has a margin-bottom inherited from .block on the wrapper div primary-menu. Remove the margin-bottom.

     
    radiant_luv, Sep 2, 2010 IP
  3. Cash Nebula

    Cash Nebula Peon

    Messages:
    1,197
    Likes Received:
    67
    Best Answers:
    0
    Trophy Points:
    0
    #3
    That will certainly fix the gap but it also causes elements further down the page to bunch up.
    I suggest zeroing the bottom margin in #primary-menu.block (fusion-acquia-marina-style.css)
    
#primary-menu.block {
  margin-bottom: 0;
  overflow: visible;
  position: relative;
  z-index: 101;
}
    Code (markup):
     
    Cash Nebula, Sep 3, 2010 IP