CSS height issues in IE8

Question

I'm running a little main navigation test at http://tools.weddingideasmag.com/MainNavTest/

The trouble is, I can't get the drop menu height to work right in IE8.

This is what the page looks like on Chrome and is displaying fine…

enter image description here

here's the IE8 version…

enter image description here

Can anyone help please, it's almost sorted but I can't figure out this bug

Hi Mat - are you not able to see the code via the source? Is it not easier to do that than paste lots of code and css? — Ben Iskander
– Ben Iskander, Commented Dec 19, 2013 at 13:06
The easiest would be to narrow down the code to a small sample that reproduces the problem and post it here. If the question just asks about code on your site, how useful will it be to someone else in a year's time, when your site's code is completely different? — Matt Gibson
– Matt Gibson, Commented Dec 19, 2013 at 16:41

SushiiBalboha · Accepted Answer · 2013-12-19 11:58:44Z

1

Welcome to Internet Explorer. Enjoy your road!

I got the same problem, and I resolved it because my doctype wasn't valid.

If you got a bad doctype, IE will go on a different mode than expected.

Just put <!DOCTYPE html> and it will be fine and add <meta http-equiv="X-UA-Compatible" content="IE=edge" /> on the <head>.

Hope this can be a little bit helpful.

answered Dec 19, 2013 at 11:58

SushiiBalboha

2261 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

SushiiBalboha Over a year ago

Hum... I just checked on IE8 and it's working great for me... There is just the display of li that is not rly good in some case. Are you sure you're not in IE7 ?

Vikas Sharma · Accepted Answer · 2013-12-19 13:44:03Z

0

Hi Have gone through your css

found out that in you flatnavie.css

you have

.single-height {
/*height: 230px;*/
}

.double-height {
/*height: 400px;*/
}

Just uncomment that & it is working

UPDATED

OK, use this

.single-height {
height: 200px;
max-height: 800px;
}

edited Dec 19, 2013 at 13:44

answered Dec 19, 2013 at 12:50

Vikas Sharma

807 bronze badges

1 Comment

Ben Iskander Over a year ago

Hi Vikas, I've done that because I don't want to have to specify a fixed height. If I do that, all submenus have the same height, but all of them have different length content in them.

myajouri · Accepted Answer · 2013-12-19 18:28:56Z

The problem is actually coming from the JavaScript in flatnav.js. There's some code in that file that is intended to make all columns in a submenu the same height:

$(window).load(function(){
  $('.flat-nav>ul>li').mouseover(function() {           
    var x = 0;

    $(this).children('ul.column-based').children('li').each(function() {
      if(this.offsetHeight > x) {
        x = this.offsetHeight;
      }
    });

    $(this).children('ul.column-based').children('li').each(function() {
      $(this).css("height", x + "px");
    });

   // more code...

  });
});

It seems that x is being calculated too early in IE8, resulting in a very small height for the menus.

While there might be fixes for that JS. I'd prefer to do the 'equal column heights' in CSS since it works well in your case. Try commenting out/removing the JS above, then add the following to the bottom of flatnav.css:

div.flat-nav ul.column-based > li {
  display: inline-block;
  vertical-align: top;
  float: none;
  width: 145px;
}

Try it here: http://jsbin.com/OJiGiQoF/2

Collectives™ on Stack Overflow

CSS height issues in IE8

3 Answers 3

1 Comment

Just uncomment that & it is working

UPDATED

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Just uncomment that & it is working

UPDATED

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related