SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Red face Extra vertical space in IE

    We have a website under development. The layout has extra vertical space between the logo and main navigation when viewed in IE.
    The usual has layout type fixes don't seem to be working.

    Staging URL:
    http://mimr.dfine.com.au/

    Any advice appreciated.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Hi t-min. Welcome to the forums.

    Hm, that layout is a bit contorted and needs some tidying up . For some reason the whole top section is contained in a form that's leaving a lot of empty space in IE, as are these styles too:

    Code:
    .sbq_header_wrapper {
      display: block;
      height: 90px;
      margin-bottom: 35px;
      position: relative;
      width: 100%;
    }
    
    .sbq_header {
      background-color: #FFFFFF;
      clear: both;
      display: block;
      position: relative;
      width: 100%;
      height: 65px;
    }
    This layout could be much neater and simpler, though, as it's not complex.

  3. #3
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking

    It worked!

    I removed the height on the items you indicated and it now lays out as required. (changes made on local dev not loaded to staging yet)

    Thanks for the welcome and the feedback. Working on a small team it is good to get feedback from places like this. We though that tweaking a layout from an older project would make it easier on this one but it has probably made things messier then they needed to be. :P

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Great, glad that helped. Please come back again if you have more questions.

  5. #5
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Back again, me on this forum and the extra vertical whitespace in IE.

    I have just added some CSS to give the site a sticky footer (adapted from http://www.cssstickyfooter.com/using...oter-code.html)
    and it works everywhere, but in IE it gives heaps more vertical space in the header.
    See the staging site:
    http://mimr.dfine.com.au/

    Any advice or tips appreciated.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Which version of IE are you looking at? Sticky footers are hard to do—and most advice on how to do them is faulty—so perhaps look at this FAQ first:

    http://www.sitepoint.com/forums/show...66#post1239966

    Check to make sure you've covered all your bases. If not, that should guide you to where the problems are.

  7. #7
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am using IE8


    Thanks for the suggestion. I have been trying things but not getting much luck. IE is till adding extra space.

    Can you explain why your suggestion of removing the height specifications worked?
    The heights did were not the same as the extra space that was added. It looked like there was some weird calculation happening.

    This is the sticky footer CSS that I am using

    Code CSS:
    body, html 
    { 
        height:100%; 
    }
    #wrapfooter  
    {
        margin-top:-130px;
    }
    #aspnetForm
    {
        min-height:100%;
    }

  8. #8
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The issue with extra spacing in IE turned out to be nested forms

    The asp .net form wrapped the entire site and the search form had been placed in the header. IE was adding the header layout elements to the page twice. I used the Developer Tools (F12) in IE to look through the DOM to see where the space was being added.

    The overly complicated layout definitely did not help us here. Thanks rapl.m for pointing us in the right direction!

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    You're welcome. I'm glad that was some use. It's nicer to find the solution yourself anyway.


Bookmarks

Posting Permissions

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