1

I have a list in my footer with few links, and when I click on my last listed element i.e "See more links" It replaces my list to new members using jQuery slideToggle().

But with this I see my footer bottom go a bit down and up again.

Thanks to user George and this issue was solved, using jQuery, by setting the height of #col on page load, here is my code:

$('#col').height(function(_,v){ return v; });

But with this solution, I'm getting a another issue that I am not able to understand

I have 5 versions of my design using media queries, above I have an image of my mobile version. As you can see my link "See more links" is almost completely hidden.

Also on Internet Explorer I have this issue almost in all media queries of my project...

enter image description here

Do you see why this can be happening?

I have here my full example: http://jsfiddle.net/jcak/4ma6es6h/8/

Sagar Awasthi
  • 538
  • 5
  • 10
OzzC
  • 815
  • 4
  • 20
  • 36
  • 2
    I am not completely sure what the problem is. Works fine for me in Chrome and in IE10. In which versions of IE do you have problems? Also, and I might be missing a lot of context here, the total of html, css & js seems overly verbose at some points, I believe that it could be made a lot simpler... You also mention media queries, but there aren't any in your code? – sg3s Aug 12 '14 at 14:54
  • Well, this is really strange. I had the code "$('# col.col4')height (function (_, v) {return v;});" because its not working well yet, but now I remove comments and I was looking better about what is happen. And is very strange, when I took off comments of my "$('# col.col4') height (function (_, v) {return v;});", I have always the same issue that I have in my question image, my last link item behind my footer in IE10 but also in google chrome.But when I do a lot of refreshs, I get my footer right without my last link item behind footer, and starts to look great in both browsers .... – OzzC Aug 12 '14 at 15:44
  • 2
    Seems fine to me as well, regardless of screen size. And I don't see any media queries either. However, older IE has issues with them (of course). This link has some more info: http://stackoverflow.com/questions/18205253/ie7-ie8-support-for-css3-media-query – deebs Aug 12 '14 at 20:34
  • Cannot reproduce this problem in IE11. – Sumurai8 Aug 18 '14 at 15:57

4 Answers4

1

If you set min-height instead of height, your div will never be too small and won't collapse below the min-height.

But this still doesn't solve why your height is too small.

You might want to look into your box size. Look at the schema here on what is count as height and what is not: http://api.jquery.com/innerheight/ and http://api.jquery.com/outerHeight/

maybe you have padding/margin/border that is not accounted for.

Laurens Kling
  • 2,221
  • 1
  • 21
  • 31
  • Thanks Laurens Kling, your solution seems to work, using min-height and also max-height in my .col4! – OzzC Aug 19 '14 at 16:49
  • it may work but it's still hacky. I like Aidans answer as well; like i mentioned take a look at the different ways of getting the Height. Also make sure the div is fully loaded before you set any heights. I dont know if you are inserting the content; otherwise make sure you check $(document).ready(...) – Laurens Kling Aug 20 '14 at 12:43
1

Use min-heightto avoid the hidden issue. In older IE, IE < 9, media queries are not supported, you can use Respond.js, it will add media queries to IE 6-8, it's recommended by twitter bootstrap.

If you have further problems with IE, check you js using linting for es3, check jshint and use some polyfills, like es5-shim if you need something from es5.

Nickydonna
  • 802
  • 1
  • 5
  • 18
1

I don't think this is to do with media queries, since you're having the same issue without them. The function 'function(_,v){ return v; }' is returning the height without margins or padding, which might be cutting off the link at the bottom. Perhaps try this instead:

var $col = $('.col4');
$col.height($col.outerHeight(true));

EDIT: I've just noticed your comment above, where you say that refreshing sometimes makes it work. This issue may be caused by the page not being fully rendered when your code is executed, so the wrong height is being called.

Also, you're using the same ID ('col') for multiple elements. IE will HATE this and will probably throw silent errors. IDs should be completely unique!

Aidan Jalali
  • 41
  • 4
  • Thanks your solution seems to work, Im just trying to find te reason for an issue using your code, becase Im getting different margins behind my last list item "See more links". – OzzC Aug 19 '14 at 16:52
0

Older versions of IE could cause this problem to occur, maybe you could try and restrict them or add a notice that it's not working properly because "you're using an older version of Internet Explorer" or so.

Works fine in Mozilla Firefox, Chrome and newest Internet Explorer.

Pepelius
  • 1,576
  • 20
  • 34