CODEWITHSUNDEEP
htmlcssinternet-explorer-8
Ben Iskander
Ben Iskander

Reputation: 616

CSS height issues in IE8

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

Upvotes: 0

Views: 3101

Answers (3)

myajouri
myajouri

Reputation: 3124

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

Upvotes: 0

Vikas Sharma
Vikas Sharma

Reputation: 80

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;
}

Upvotes: 0

SushiiBalboha
SushiiBalboha

Reputation: 226

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.

Upvotes: 1

Related Questions