Take the 2-minute tour ×

I'm using the bootstrap css framework and have built a horizontal menu. It works great in all browsers except IE7. I've narrowed it down to the use of the max-width property which prevents the background from showing under IE7. Example below (view in IE7).


What would be the best approach it fix this?

share|improve this question
can you explain why you are using the max-width property? –  ptriek Dec 7 '11 at 11:47
add comment

2 Answers

up vote 3 down vote accepted

What is the purpose of the menu-container div? It is this that is over-riding the colour in IE7.

Remove the menu-container div and it will work ( http://jsfiddle.net/dZRcS/4/ )

If you need to keep the menu-container div then remove the background-color from it as it is never seen ( http://jsfiddle.net/dZRcS/3/ )

share|improve this answer
to the point. Good answer :) –  Yisela Dec 7 '11 at 12:06
add comment

IE7 has issues working with max-width. If it's inevitable and you have to use it, there is a workaround:

IE supports its own expression attribute, which enables us to use JavaScript expressions to manipulate (X)HTML document properties such as max-width and max-height.

div {
   width: expression(333 + "px");

..Which is equivalent to this:

div {
   width: 333px;

max-width in IE

This method has been verified in IE6 and should also work in IE5. Simply change the values to suit your needs and include in your document via conditional comment. In this example, max-width is 777px 1 for IE and all standards-compliant browsers:

* html div#division { 
   width: expression( document.body.clientWidth > 776 ? "777px" : "auto" ); /* sets max-width for IE */
div#division { 
   max-width: 777px; /* this sets the max-width value for all standards-compliant browsers */


share|improve this answer
add comment

Your Answer


