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.