Extra vertical space in IE

HTML & CSS
1

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

Hi t-min. Welcome to the forums. :slight_smile:

Hm, that layout is a bit contorted and needs some tidying up :frowning: . 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:

.sbq_header_wrapper {
  display: block;
  [COLOR="#FF0000"]height: 90px;[/COLOR]
  margin-bottom: 35px;
  position: relative;
  width: 100%;
}

.sbq_header {
  background-color: #FFFFFF;
  clear: both;
  display: block;
  position: relative;
  width: 100%;
  [COLOR="#FF0000"]height: 65px;[/COLOR]
}

This layout could be much neater and simpler, though, as it’s not complex.

3

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. :stuck_out_tongue:

4

Great, glad that helped. Please come back again if you have more questions. :slight_smile:

5

Back again, me on this forum and the extra vertical whitespace in IE. :slight_smile:

I have just added some CSS to give the site a sticky footer (adapted from http://www.cssstickyfooter.com/using-sticky-footer-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

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:

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

7

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

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

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! :slight_smile:

9

You’re welcome. I’m glad that was some use. It’s nicer to find the solution yourself anyway. :slight_smile: