Grow your CSS skills. Land your dream job.

[Solved] Extra space below DIV

  • evf
    # July 14, 2009 at 2:19 pm

    Hello,

    I am having issues with the top navigation at this site:
    http://voicesforchildrenstl.org.previewdns.com/

    In Firefox and Safari (Mac), there is about a 15px space between the bottom of the navigation and the divs below it. The dropdown menu also shows up 15px below. In Internet Explorer, there is a 1px gap, but there should be none. Any ideas what may be causing this? I’ve tried setting the padding on the navigation to 0 and plugging in different things using Firebug, but I am having no luck.

    Any help on this would great!

    # July 14, 2009 at 3:10 pm

    The huge amount of space is being caused by:

    Code:
    #content {
    line-height:1.7;
    }

    The 1px has something to do with the <a on mouse over>, but I can’t quite put my finger on it.

    evf
    # July 14, 2009 at 3:31 pm

    That made the space a lot smaller! Thanks. There is still a gap there of a couple of pixels. I will continue to play with it.

    evf
    # July 15, 2009 at 11:27 am

    Wow. There is something definitely wrong with my code, as it shows up perfectly in IE now. I still have no clue what it is.

    evf
    # July 15, 2009 at 11:43 am

    Alright. After much searching, I’ve solved my problem. I added:

    Code:
    #topNavigation img{
    vertical-align:bottom;
    }

    If anyone out there has similar issues, here is a great resource https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".