IE7 Debug Issue - Word Breaks in <li>
I am having a very basic problem 开发者_JS百科in IE7 that I cannot seem to fix. If you look at this page: http://vitaminjdesign.com/IAM/company/ you will notice that the vertical nav (ul id="leftcol") is displaying incorrectly in IE7. Each word appears on its own line. Here is my HTML /. CSS:
<ul id="leftcol">
<li><a class="active" href="#">Company Overview</a></li>
<li><a href="#">Why Choose Parker?</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Financing Promotions</a></li>
<li><a href="#">Licensing & Credentials</a></li>
</ul>
ul#leftcol{float:left; width:185px; position:relative; z-index:10;}
ul#leftcol li{float:right; clear:right; margin-bottom:14px; list-style:none; list-style-image:none; text-align:right; line-height:1.3; }
ul#leftcol li a{color:#505050; text-decoration:none; font-size:15px; float:right;}
ul#leftcol li a.active,ul#leftcol li a:hover{color:#89b060;}
Any ideas?
Remove clear:right;
from the following
ul#leftcol li{float:right;margin-bottom:14px; list-style:none; list-style-image:none; text-align:right; line-height:1.3; }
try adding
ul#leftcol li a {
white-space: nowrap;
}
You could also give you li elements a fixed width.
Or maybe some display property as well like display: inline;
精彩评论