max-height issue

Forum Moderators: not2easy

Message Too Old, No Replies

max-height issue

max-height not working in ie8 using html5

caffinated

7:47 pm on Jul 22, 2012 (gmt 0)

Is there a known issue with max-height css attribute within HTML5 doctype on IE?

According to this document [msdn.microsoft.com ] max-height is implemented but only using the strict doctype. Have they really dumped this with their HTML5 spec or am I missing something?

birdbrain

8:29 pm on Jul 22, 2012 (gmt 0)

Hi there caffinated,

the "max-height" attribute works OK in my IE8 browser. ;)

I tested it with this code...

<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="utf-8">

<title>untitled document</title>

<style>
#box {
    width:486px;
    max-height:300px;
    border:1px solid #999;
    margin:auto;
    overflow:auto;
  }
</style>

</head>
<body>

<div id="box">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Proin massa. Nam vehicula. Morbi velit nisi, mollis id, 
ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus 
nisl ac enim. Maecenas vestibulum dolor ut velit. Maecenas 
condimentum pulvinar purus. Pellentesque ac ipsum. Curabitur 
sodales, elit vel molestie hendrerit, elit odio rhoncus tellus, 
nec gravida enim urna id velit. Donec nec tellus. Vestibulum 
nulla. Curabitur enim arcu, ornare id, placerat eget, nonummy 
vitae, mauris. Nulla rutrum semper odio. Duis vulputate ornare 
mauris. Praesent eget nibh sed ante ultricies scelerisque. Duis 
eget felis ut arcu porta bibendum. Mauris rutrum. Vivamus 
consectetuer purus sit amet mi. Suspendisse eu augue.
</p><p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Proin massa. Nam vehicula. Morbi velit nisi, mollis id, 
ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus 
nisl ac enim. Maecenas vestibulum dolor ut velit. Maecenas 
condimentum pulvinar purus. Pellentesque ac ipsum. Curabitur 
sodales, elit vel molestie hendrerit, elit odio rhoncus tellus, 
nec gravida enim urna id velit. Donec nec tellus. Vestibulum 
nulla. Curabitur enim arcu, ornare id, placerat eget, nonummy 
vitae, mauris. Nulla rutrum semper odio. Duis vulputate ornare 
mauris. Praesent eget nibh sed ante ultricies scelerisque. Duis 
eget felis ut arcu porta bibendum. Mauris rutrum. Vivamus 
consectetuer purus sit amet mi. Suspendisse eu augue.
</p>
</div>

</body>
</html>

birdbrain

Paul_o_b

9:00 pm on Jul 22, 2012 (gmt 0)

I thing the MSDN site meant "standards" as opposed to quirks mode rather than a strict doctype.

Its supported in IE7+ in "any" doctype that renders in standards mode.

caffinated

11:11 pm on Jul 22, 2012 (gmt 0)

Thanks for the replies. I need to look into this a bit more.

I have a <header> element which is 1000px x 400px holding a js slideshow of images of the same dimensions. Using cycleall (off the shelf slide rotator) so assuming all is ok with that.

I was sorting out the non-js bit and expected that if I max-height the header to 400px and set overflow to hidden, only the top image would show to non-js users.

The html is like:

<header>
<div id="slideshow">
<img src="assets/banners/banner1.png" width="1000" height="400" alt="whatever" title="">
<img src="assets/banners/banner2.png" width="1000" height="400" alt="whatever" title="">
<img src="assets/banners/banner3.png" width="1000" height="400" alt="whatever" title="">
<img src="assets/banners/banner4.png" width="1000" height="400" alt="whatever" title="">
<img src="assets/banners/banner4a.png" width="1000" height="400" alt="whatever" title="">
<img src="assets/banners/banner5.png" width="1000" height="400" alt="whatever" title="">
<img src="assets/banners/banner6.png" width="1000" height="400" alt="whatever" title="">
<img src="assets/banners/banner7.png" width="1000" height="400" alt="whatever" title="">
<img src="assets/banners/banner8.png" width="1000" height="400" alt="whatever" title="">
</div>
<a href="/" title="some title"><img id="logo" src="img/logo.png" width="155" height="186" alt="blah blah"></a>
<nav>
<ul id="menu">
<li><a class="current" href="http://whatever">home</a></li>
<li><a href="http://whateve"> beauty</a></li>
<li><a href="http://whateve"> hair</a></li>
<li><a href="http://whateve">offers</a></li>
</ul>
</nav>
</header>

On the basis that the logo and nav are positioned absolutely over the top of the slideshow, the wrapping <header> element is the same size as one single image:

header {width:1000px;height:400px;max-height:400px;margin-bottom:10px;overflow:hidden;}

That didn't work - hence the opened discussion.

However...

I just removed the max-height and overflow attributes from the <header> and applied it instead to the inner #slideshow and all is working.

It seems then that the semantic elements do not respond to css in the same way as, for example, divs.

The header element was relatively positioned and displayed as a block in the css reset, so that wasn't the issue.

rainborick

11:24 pm on Jul 22, 2012 (gmt 0)

Keep in mind that only IE9+ recognizes HTML 5-specific elements like <header>. If you're testing your code in older versions or need backwards compatibility, you'll want to include something like the "HTML5shiv" JavaScript on your page.

Paul_o_b

8:35 am on Jul 23, 2012 (gmt 0)

Hi,

As mentioned above you need the shiv for the new html5 elements for older IE but you also need to set the elements to display:block as the default will be inline and height or max-height doesn't apply to inline elements.

There is no need to say this though "height:400px;max-height:400px;"

All you get is height:400px so remove the max-height as it is redundant.

caffinated

2:31 pm on Jul 23, 2012 (gmt 0)

Thanks rainborick - the solution had to be added the css to the inner div. The idea here was to provide acceptable non-js degradation so the HTML5shiv was out of the question in this case. But I am testing in IE8 so you answered that part thanks.

Paul_o_b - I left both height and max-height in the css to illustrate that neither was working - but I now know why thanks. The HTML5boilerplate default css applies display:block to all of the following: article, aside, details, figcaption, figure, footer, header, hgroup, nav, section and I always apply a css reset which applies display:block to divs.

Paul_o_b

4:10 pm on Jul 23, 2012 (gmt 0)

nd I always apply a css reset which applies display:block to divs

Al browsers set divs to block by default so no need to specify it :)

It's the new html5 elements that old IE browsers don't know about which is why you need the shiv so that the new elements are recognised but you also need to set the new elements to display:block otherwise browsers treat them as inline elements - which as you found out is what the html5 boilerplate does rather extravagantly.

lucy24

4:27 pm on Jul 23, 2012 (gmt 0)

And when all else fails, there is always the

:: cough-cough ::

c***l c***t ;)

max-height issue

max-height not working in ie8 using html5

caffinated

birdbrain

Paul_o_b

caffinated

rainborick

Paul_o_b

caffinated

Paul_o_b

lucy24

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week