Google Analytics İzleme

21 Kasım 2012

CSS - IE 7'de li içindeki a etiketinin yükseklik sorunu


 #sidebar li a
 {
   height:17px;
   line-height:17px;
   ...
 }


<div id="sidebar">
    <ul id="liAdminMenu">
      <li class="icn_tags"><a>Application Form List</a></li>

      <li class="icn_tags"><a href="javascript:void(0);">Term List</a></li>

      <li class="icn_tags"><a href="javascript:void(0);">Exchange Program Type List</a></li>
    </ul>
</div>

Yukarıda tanımlara göre "Exchange Program Type List" liste maddesinin düşük genişlikte alt satıra geçilmesi
istenmektedir. Bu durum ie 8 ve üstlerinde, firefox ve chrome'da çalışmaktadır. Ancak ie 7 ve alt sürüm
ie'lerde alt satıra geçen kısım üst üste binmiş şekilde görünmektedir. Bu sorunu düzeltmek için height
tanımını kaldırmak gerekmektedir.

Yükseklik değeri ie 7 ve altındaki internet explorer sürümleri için auto yapılarak yükseklik tanımı
kaldırılır:

<!--[if lte IE 7 ]>
    <style type="text/css">
        #sidebar li a {
            height: auto;
        }
    </style>
<![endif]-->


Kaynaklar:
Internet Explorer Conditional Comments
http://reference.sitepoint.com/css/conditionalcomments
How to Target CSS Styles to Internet Explorer 6 and IE7
http://www.reachcustomersonline.com/how-to-target-css-style-to-internet-explorer-6-and-ie7/?doing_wp_cron=1353485251.0010309219360351562500
View Your Web Pages in Multiple Versions of Internet Explorer Browsers
http://www.reachcustomersonline.com/view-your-web-pages-in-multiple-versions-of-internet-explorer-browsers/


Hiç yorum yok: