CODEWITHSUNDEEP
csscross-browserinternet-explorer-7
Jitendra Vyas
Jitendra Vyas

Reputation: 152945

How to make min-width in percentage work in in IE7?

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 depend 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. Check this in IE7 http://codepen.io/jitendravyas/pen/AheDs

Upvotes: 3

Views: 1026

Answers (5)

Ravi_Parmar
Ravi_Parmar

Reputation: 12329

Please check This i think its exactly what you are looking for.

Upvotes: 5

Joe Cochran
Joe Cochran

Reputation: 76

ie9.js claims to add support for min-width, and you can add it to your source to test with:

<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->

You can read more about the ie7.js project (including ie9.js) at http://code.google.com/p/ie7-js/.

Please keep in mind, some other javascript libraries, such as css3 pie will not work with ie9.js.

Upvotes: 1

Dieter
Dieter

Reputation: 441

Try Modernizr, it makes a lot of things possible in older/less compatible browsers without a lot of trouble. Try the development version to see if it can help you and compose your own production version targeting your specific needs to minimize the size (and speed) of the javascript library.

Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.

Upvotes: 3

ScottS
ScottS

Reputation: 72281

IE7 does not function like the other browsers in this manner. It needs an explicit width on the parent element. Your current code gives it a width here:

.site-nav .flyout-content{
    border:1px solid #e4e4e3;
    /*  width:100%;*/
    height:100%;
    min-width:100%;
    *width:170px;  <-------------- THIS IS PICKED UP BY IE7
    box-shadow: 8px 6px 10px rgba(65, 65, 65, 0.45);
}

If you know the width of your widest element, you could change that number there to a wider amount, which "works" as this fiddle demonstrates (Note: the CodePen example was not working for me in IE7 mode, so I moved the code to jsfiddle.net). However, it may be better for you to implement some javascript workaround for IE7 similar to the solution in this question (which basically was asking the same thing as you are).

Upvotes: 2

NullPoiиteя
NullPoiиteя

Reputation: 57342

check CSS Compatibility and Internet Explorer. Make sure you have an appropriate doc type and toy are not in Quirks mode by looking in the developer tools at the Document Mode.

check IE7 and minWidth

Upvotes: 1

Related Questions