homepage Welcome to WebmasterWorld Guest from 54.242.200.172
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Website
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
max-height issue
max-height not working in ie8 using html5
caffinated




msg:4478035
 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




msg:4478046
 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




msg:4478055
 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




msg:4478076
 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




msg:4478077
 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




msg:4478130
 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




msg:4478178
 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




msg:4478208
 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




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

And when all else fails, there is always the

:: cough-cough ::

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved