Learning
Reputation: 20001
CSS menu breaks in IE 7
I need to make this script work for IE 7 as this navigation menu is based on CSS3 it breaks completely in IE 7 after using modernizer.
Example on fiddle
Modernizer dint fix problem may be i did something wrong or do i need to make it work using jquery
CODE
<div class="main-wrapper">
<div class="menu-wrapper">
<nav class="nav-wrapper">
<ul class="nav">
<li><a href="#">Menu One</a>
<div class="dropdown">
<ul>
<li><a href="#">Sub menu one</a>
<div class="dd-panel">
<img class="media" src="http://lorempixel.com/200/160/animals/" alt="image" />
<p class="media-caption"><strong>Menu one - sub menu one</strong>Aliquam erat volutpat. Quisque porta varius tortor, ac luctus lorem condimentum vel. Mauris venenatis justo id fringilla tincidunt.</p>
</div>
</li>
<li><a href="#">Sub menu two</a>
<div class="dd-panel">
<img class="media" src="http://lorempixel.com/200/160/" alt="image" />
<p class="media-caption"><strong>Menu one - sub menu two</strong>Aliquam erat volutpat. Quisque porta varius tortor, ac luctus lorem condimentum vel. Mauris venenatis justo id fringilla tincidunt.</p>
</div>
</li>
<li><a href="#">Sub menu three</a>
<div class="dd-panel">
<img class="media" src="http://lorempixel.com/200/160/business/" alt="image" />
<p class="media-caption"><strong>Menu one - sub menu three</strong>Aliquam erat volutpat. Quisque porta varius tortor, ac luctus lorem condimentum vel. Mauris venenatis justo id fringilla tincidunt.</p>
</div>
</li>
<li><a href="#">Sub menu four</a>
<div class="dd-panel">
<img class="media" src="http://lorempixel.com/200/160/people/" alt="image" />
<p class="media-caption"><strong>Menu one - sub menu four</strong>Aliquam erat volutpat. Quisque porta varius tortor, ac luctus lorem condimentum vel. Mauris venenatis justo id fringilla tincidunt.</p>
</div>
</li>
</ul>
</div>
</li>
<li><a href="#">Menu Two</a>
</li>
<li><a href="#">Menu Three</a>
<div class="triangle"></div>
<div class="dropdown">
<ul>
<li><a href="#">sample link</a>
</li>
<li><a href="#">sample link</a>
</li>
<li><a href="#">sample link</a>
</li>
<li><a href="#">sample link</a>
</li>
</ul>
</div>
</li>
<li><a href="#">Menu Long Three</a>
</li>
<li><a href="#">Menu Four & Long</a>
<div class="triangle"></div>
<div class="dropdown">
<ul>
<li><a href="#">Sub menu inner</a>
<div class="dd-panel">
<img class="media" src="http://lorempixel.com/200/160/animals/" alt="image" />
<p class="media-caption"><strong>Menu Four & Long - sub menu inner </strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam turpis magna, condimentum sit amet interdum quis, gravida accumsan risus. Donec vulputate dolor in turpis ornare, sed dictum ligula pretium. Nullam sed dolor mollis magna auctor porttitor. Duis sem sem, pretium non lorem vitae, lacinia eleifend ligula. Aliquam ipsum erat, gravida eget hendrerit in, fermentum vel odio. Aliquam erat volutpat. Quisque porta varius tortor, ac luctus lorem condimentum vel. Mauris venenatis justo id fringilla tincidunt.</p>
</div>
</li>
<li><a href="#">Sub menu two</a>
<div class="dd-panel">
<img class="media" src="http://lorempixel.com/200/160/animals/" alt="image" />
<p class="media-caption"><strong>Menu one - sub menu one</strong>Aliquam erat volutpat. Quisque porta varius tortor, ac luctus lorem condimentum vel. Mauris venenatis justo id fringilla tincidunt.</p>
</div>
</li>
<li><a href="#">Sub menu three</a>
<div class="dd-panel">
<img class="media" src="http://lorempixel.com/200/160/animals/" alt="image" />
<p class="media-caption"><strong>Menu one - sub menu one</strong>Aliquam erat volutpat. Quisque porta varius tortor, ac luctus lorem condimentum vel. Mauris venenatis justo id fringilla tincidunt.</p>
</div>
</li>
<li><a href="#">Sub menu four</a>
</li>
<li><a href="#">Sub menu having long texxt</a>
<div class="dd-panel">
<img class="media" src="http://lorempixel.com/200/160/animals/" alt="image" />
<p class="media-caption"><strong>Menu one - sub menu one</strong>Aliquam erat volutpat. Quisque porta varius tortor, ac luctus lorem condimentum vel. Mauris venenatis justo id fringilla tincidunt.</p>
</div>
</li>
<li><a href="#">Sub menu lorem ipsum dolor sit amet</a>
</li>
<li><a href="#">Sub menu three consectqtero</a>
<div class="dd-panel">
<img class="media" src="http://lorempixel.com/200/160/animals/" alt="image" />
<p class="media-caption"><strong>Menu one - sub menu one</strong>Aliquam erat volutpat. Quisque porta varius tortor, ac luctus lorem condimentum vel. Mauris venenatis justo id fringilla tincidunt.</p>
</div>
</li>
<li><a href="#">Sub menu four</a>
</li>
</ul>
</div>
</li>
<li><a href="#">Menu </a>
<div class="dropdown">
<ul>
<li><a href="#">sample link</a>
</li>
<li><a href="#">sample link</a>
</li>
<li><a href="#">sample link</a>
</li>
<li><a href="#">sample link</a>
</li>
</ul>
</div>
</li>
</ul>
</nav>
</div>
<img width="1000px" src="http://photorepairshop.com/Pages/Panoramic_Photo3.jpg" alt="image">
</div>
Upvotes: 4
Views: 90
Answers (1)
Pravin W
Reputation: 2521
IE6 and IE7 supports inline-block property on inline elements for example span, anchor etc, so if we need to apply this to block elements like li then we need to trigger haslayout
step 1)
Apply lt-ie8 class only for browsers below IE 8 by using conditional comments, so that CSS will be only applied to those browsers
<!--[if lt IE 8]> <html class="lt-ie8"> <![endif]-->
step 2)
add down this css,
.lt-ie8 .nav > li {
*display:inline;
zoom:1;
}
similar questiona can be found here
IE7 does not understand display: inline-block
more resources
http://uncorkedstudios.com/blog/how-to-fix-the-ie7-and-inlineblock-css-bug
Upvotes: 3