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 5 of 5
  1. #1
    Regular Coder stevenmw's Avatar
    Join Date
    Jun 2007
    Location
    OK
    Posts
    497
    Thanks
    27
    Thanked 31 Times in 31 Posts

    Div Gaining 6 Pixels In Height

    I'm working on a silly little project, and in this project I have a div with a background image that repeats horizontally. I do not have any paddings or margins specified, but I do have borders specified. However, I am using box sizing so the borders should be mathed in. Here is my CSS. Can anyone see why 6 pixels might be added to the height of #head_nav_wrap The DIV is supposed to be 39px in height, but it always ends up 45px. This has got to be something stupid.

    Code:
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
        border: 0;
        margin: 0;
        padding: 0;
        vertical-align: baseline;
    }
    
    div
    {
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
    } 
    
    body {
        line-height: 1;
        background: #FFFFFF;
    }
    h1, h2, h3, h4, h5, h6 {
        clear: both;
        font-weight: normal;
    }
    ol, ul {
        list-style: none;
    }
    
    /* head */
    #head_main_contain {
    min-width: 100%;
    background: #000000;
    border-top: #333333 1px solid;
    }
    
    #head_nav_wrap {
    background-image:url('images/nav_back.png');
    background-repeat:repeat-x;
    height: 39px;
    min-width: 100%;
    border-top: #FFFFFF 1px solid;
    border-bottom: #FFFFFF 1px solid;
    }
    Last edited by stevenmw; 11-10-2012 at 10:35 AM.

  • #2
    Regular Coder Custard7A's Avatar
    Join Date
    Jul 2010
    Location
    Australia
    Posts
    286
    Thanks
    32
    Thanked 33 Times in 33 Posts
    I was just doing some debugging of my own in a blank page, so I threw your CSS in there to test it. A div "head_nav_wrap" both inside a "head_main_contain" and alone was 39px high. It seems to be something environmental to your page. Is there something else to it, like what goes IN "head_nav_wrap"?

  • #3
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,699
    Thanks
    0
    Thanked 233 Times in 228 Posts
    Hi there stevenmw,

    like Custard7A, I was unable to replicate your problem.

    coothead

  • #4
    Regular Coder stevenmw's Avatar
    Join Date
    Jun 2007
    Location
    OK
    Posts
    497
    Thanks
    27
    Thanked 31 Times in 31 Posts
    It is supposed to be in this order.

    Code:
    <div id="head_main_contain">
    <div id="head_nav_wrap">
    
    </div>
    </div>
    Edit:
    Thanks, guys. I guess I had hit ctrl + and zoomed the page. It's at 39 now. Appreciate the quick replies.
    Last edited by stevenmw; 11-10-2012 at 11:29 AM.

  • #5
    Regular Coder Custard7A's Avatar
    Join Date
    Jul 2010
    Location
    Australia
    Posts
    286
    Thanks
    32
    Thanked 33 Times in 33 Posts
    Quote Originally Posted by stevenmw View Post
    Thanks, guys. I guess I had hit ctrl + and zoomed the page. It's at 39 now.
    Hah, those moments..

    Thought I'd tack on here, development tools like FireBug in Firefox, or Dragonfly in Opera are great for catching CSS problems, especially the simple ones. Gives a great visual model of your element boundaries in the working environment, and the values don't change when you're zoomed or not!

    Cheers.


  •  

    Posting Permissions

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