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 http://codepen.io/jitendravyas/pen/AheDs

awarded to Wikimedia
Tags
css

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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 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 http://codepen.io/jitendravyas/pen/AheDs
jitendravyas almost 7 years ago
@jitendravyas Sorry 'bout that. Here is a link: http://codepen.io/0x60/pen/gKfit
alex almost 7 years ago
it's not working for me in IE7 http://codepen.io/0x60/full/gKfit
jitendravyas almost 7 years ago
@jitendravyas Hm... That's odd.
alex almost 7 years ago

Anyway you can use expressions:

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