CSS issue on IE7 - Navigation Menu?

This should be simple, clearfix, containing floats whatever.. but it's not This is a hasLayout error that compounds, it is one of the rare situations where you need to remove haslayout, but where it's not possible to do so.

This should be simple, clearfix, containing floats whatever.. but it's not This is a hasLayout error that compounds, it is one of the rare situations where you need to remove haslayout, but where it's not possible to do so. The way your code is written (nothing wrong with it by the way! ) means the #background div needs hasLayout to contain the floated children (even trying an extra clearing element doesn't work which shows the out and out IE error).

Your code has this with overflow : hidden;, but then because there's hasLayout on the . Nav-block due to the 50px height, that height, in IE7, is all that's being "contained" - this is of course wrong, as the floated lists are children of #background too.. however it's because of an error that hasLayout even works to contain floats so there's no use arguing the specs! I tried every hack I knew how and but the simplest way was to rewrite the code and avoid hasLayout where possible, and use margins and line-heights instead - so I reversed the coloring of the two containing blocks.

I made the background black and the . Nav-block grey & gave the background a top padding of 50px to make the black bar.. then I moved the menu which is inside the grey bit up by 43px with a negative top margin. It's 43px because in your example I measure the black bar @ 50px; and the top links @ 36px in height which meant to keep them looking vertically centered on the black bar they would have need 50px-36px = 14px / 2 = 7px top & bottom 'spacing'.

The . Nav-block div then needed to be the one that was made to contain the floated children, but overflow: hidden won't work now because of the negative top margin, it would hide the top links! So instead I floated it left and gave it a width of 100%; which is another way of creating a new block formatting context and giving IE the hasLayout it needs without clipping the content.

Then I pretty much followed what you had done to achieve the short top links and full width (130px) child links only floating the top links so they would "shinkwrap" - without the float on the child lists the child links could be made display: block so they take the full width of the ul. For the height on the top links IE needed both line-height and padding, but line-height on the child links was enough because of the display: block; Example Fiddle HTML is the same as yours above.. CSS: html, body {margin: 0; padding: 0;} #background { /* black bar */ background: #000; padding: 50px 0 0 0; } . Nav-block { background: #EBE9E1; float: left; width: 100%; padding-bottom: 3px; } #nav, #nav ul { margin: 0; padding: 0; list-style:none; } #nav { /* black bar = 50px, top links = 36px, difference = 14px, = 7px from top */ margin-top: -43px; } #nav ul { width:130px; border-right: 2px solid black; border-bottom: 2px solid black; border-left: 2px solid black; margin-left:-2px; } #nav > li { /* top links only */ float: left; margin: 0 0 0 30px; } #nav a { line-height: 36px; background-color:white; color:#C51721; padding: 10px; text-decoration: none; } #nav ul a { /* child list links */ display: block; padding: 0 10px; line-height: 24px; border-bottom:1px solid #DEDEDE; }.

Thank you very much, that was really helpful! I have learnt a lot from your code.. I hope it would help me in the future. :) – user791022 Jun 30 at 11:46.

Apparently you either have to comment out the spaces between or put all your elements on one line. E.g. : PHP HTMLCSS or PHP HTMLCSS.

This is a common problem in learning css. I reccomend using this example as your guideline: htmldog.com/articles/suckerfish/dropdowns/ The background for #background isn't appearing because it contains only floated elements. You can fix this bey giving it a set height in css, or by using the "clearfix" method ( perishablepress.com/press/2009/12/06/new... ).

Clearfix don't seem to fix the problem. – user791022 Jun 28 at 11:47.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.