none
Unwanted gap between divs when viewed in FF

    Question

  • I created a master page with masthead, top_nav, container and 2 columns. When I view my pages in FF, there's a space of about 10 px between the top_nav and container that isn't there in IE. Can you tell me how to get rid of it? Relevant code and CSS below. Body color is gold, so that's what shows through the unwanted space. Thank you.

    <head runat="server">
    <meta http-equiv="Content-Language" content="en-us" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>master</title>
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
    <link rel="stylesheet" type="text/css" href="styles.css" />
    </head>

    <form id="form1" runat="server">

    <div id="masthead">
    <div id="title" style="top: 42px; left: 179px">
     Wholesale Gift Shop Merchandise</div>
    <img alt="sierra logo" src="Images/sierralogo.jpg" width="120" height="61" class="logo" style="top: 19px; left: 24px" /></div>
    <div id="top_nav">
     <ul>
      <li><a href="http://Home.aspx">Home</a></li>
      <li><a href="wholesale_gift_shop_batteries.aspx">Batteries</a></li>
      <li><a href="wholesale_disposable_cameras.aspx">Cameras</a></li>
      <li><a href="wholesale_sunscreen.aspx">Sun Care</a></li>
      <li><a href="wholesale_personal_fans.aspx">Fans</a></li>
      <li><a href="wholesale_35mm_film.htm">35mm Film</a></li>
      <li><a href="order.htm">Order</a></li>
     </ul>
     </div>
    <div id="container">
    <div id="column-1">
    <div id="column-2" style="top: 35px; left: 579px">
     <img alt="" src="Images/sidebar.jpg" width="150" height="450" class="sidebar" /></div>
     <asp:ContentPlaceHolder runat="server" id="ContentPlaceHolder1">
     </asp:ContentPlaceHolder>
     </div>
     
     </form>

    #masthead {
     margin-top: 8px;
     height: 100px;
     width: 760px;
     background-color: #FFFFFF;
     position: relative;
     margin-right: auto;
     margin-left: auto;

    #top_nav {
     width: 760px;
     margin-right: auto;
     margin-left: auto;
     background-color: #FFFFFF;
     height: 40px;

    #container {
     height: auto;
     width: 760px;
     margin-right: auto;
     margin-left: auto;
     position: relative;
     background-color: #FFFFFF;
     margin-top: 0px;

    #column-2 {
     width: 180px;
     position: absolute;
     margin-top: 10px;
     margin-right: 10px;
     margin-bottom: 10px;
    }
    #column-1 {
     width: 575px;
     padding-left: 5px;

    Thursday, July 09, 2009 3:57 PM

Answers

  • Hi

    This is called margin collapse, it means that you have gaps between the <divs>, margin collapse only happens to block level elements and is not always noticed untill you add your heading <H1> into the page content.

    you need to null out all the borders in the block elements, top_nav borders, set  all to 0, by default it gives it a border but you dont see it so fill in 0 and set same for all, also if you put in a H1 header at the top of the page 0 out the border of that block element also, this is not seen in IE but firefox makes it look yuck

    hope that helped

    grtds
    Stephen


    dancebachata.nl
    Friday, July 10, 2009 11:05 AM

All replies

  • Read the 'Before you Post' thread.

    There is no way to help without a URL.
    --
    Chris Hanscom - Microsoft MVP
    Veign on Facebook | Resource Center | Veign's Blog | Web Development Help

    Get a Complete Website Analysis by Veign
    Thursday, July 09, 2009 4:09 PM
  • Hi

    This is called margin collapse, it means that you have gaps between the <divs>, margin collapse only happens to block level elements and is not always noticed untill you add your heading <H1> into the page content.

    you need to null out all the borders in the block elements, top_nav borders, set  all to 0, by default it gives it a border but you dont see it so fill in 0 and set same for all, also if you put in a H1 header at the top of the page 0 out the border of that block element also, this is not seen in IE but firefox makes it look yuck

    hope that helped

    grtds
    Stephen


    dancebachata.nl
    Friday, July 10, 2009 11:05 AM
  • Hi

    This is called margin collapse, it means that you have gaps between the <divs>, margin collapse
    Thanks! Helped me.
    Tuesday, August 04, 2009 10:01 PM
  • Wrong! Read the code.

    Mart
    Wednesday, August 05, 2009 7:56 AM