Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Sep 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Unexpected gap between CSS header elements

    Moderators: Please let me know if you have any issues with this post; I am not trying to advertise for the business whose site it is (they only serve customers within a few miles of their office, so they have nothing to gain through this post).

    I'm currently redesigning a website and have run into an issue with some elements in the header. The header contains a logo, some text and a navigation bar. Between the bottom of the logo and the top of the navigation bar there is a relatively thick gap, shown in this screenshot:



    I don't want the gap, I don't know where it's come from and I don't know how to get rid of it

    I can reduce it down to a single pixel by setting the line-height property of the div containing the logo down to 0.0, but it seems hacky and still doesn't fix the issue.

    The work-in-progress version can be viewed live here, if anyone with more HTML/CSS experience can identify any silly mistakes I've made and give me some hints, pointers or solutions
    Thanks in advance.

    EDIT:

    I removed it by adding the following classes:
    Code:
    .logo img
    {
       vertical-align:bottom;
    }
    
    .openingtimes p {
       margin:0;
    }
    Last edited by Rezzie; 09-07-2010 at 05:22 PM. Reason: Resolved.

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Most of the gap can be fixed by setting your image to display:block. Without this the browser is allowing space "below the line" for the tails of g,y etc.

    This still leaves about a one pixel line which is caused by the .opening times div extending a little further down than it needs to. You can fix this by removing the bottom margin on the <p> in that div via:

    Code:
    .openingtimes p{margin-bottom:0}
    The latter is easy to spot in Firebug.


  •  

    Posting Permissions

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