开发者

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;

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜