How to make min-width in percentage work in in IE7?
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

How to make {min-width:100%} work in in IE7? working fine in IE8+ and other browsers.

I'm using a dropdown menu where width of dropdown should depended on longest text in dropdown but not less then the parent's link width. so I added min-width:100% to dropdown. but it's working for other browsers but not for IE7

How i can make it work?

Demo is here to fork and play with it. Chek this in IE7

awarded to Wikimedia

Crowdsource coding tasks.

3 Solutions

max/min-width/height works fine in IE7. Just add "display: block" to element.

I'm thinking that it might be a problem with your doctype declaration. I believe changing the doctype to <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ""> might fix this. I don't think you can change doctype in codepen so trying with an external file might help. (I don't have IE7 so this is kinda hard to test).

can you modify it here
jitendravyas 7 years ago
@jitendravyas Sorry 'bout that. Here is a link:
alex 7 years ago
it's not working for me in IE7
jitendravyas 7 years ago
@jitendravyas Hm... That's odd.
alex 7 years ago

Anyway you can use expressions:

 width:expression(document.body.clientWidth > 995 ? "100%" : "995px");

Don't forget to use conditional comments

I already know this. I want to do in percentage not in px.
jitendravyas 7 years ago
width:expression( this.clientWidth < this.parentNode.clientWidth/10035 ? this.parentNode.clientWidth/10035 : '100%' ); where 35 is percentage
tm-minty 7 years ago
How to give {min-width:100%} to an element?
jitendravyas 7 years ago
.lt-ie8 .site-nav .flyout-content{ width:expression( this.clientWidth < this.parentNode.clientWidth ? this.parentNode.clientWidth : '100%' ); }
tm-minty 7 years ago
OK i will try at home. Thanks for your help
jitendravyas 7 years ago
Maybe you should set 'auto' instead '100%'
tm-minty 7 years ago
View Timeline