css - Unwanted margin issue in Internet Explorer 7 -
i have weird problem in internet explorer 7 shows heading lot of distance top. problem not exists in other browsers or newer versions of ie.
what should make right?
chrome version:
ie 7 version:
html
<div class="box"> <header class="module-title"> <h2 class="title">گزارش و مصاحبه</h2> </header> <section class="module-content"> <ul class="sidebar-news"> <li> <div class="image-holder"> <img src="img.jpg" alt="test item"> </div> <h3><a class="moduleitemtitle" href="#">copy of مصاحبه با معاون صدا درباره راديو كتاب</a></h3> . . . </li> </ul> </section> </div>
css
.module-title h2 { margin-top: 0; font-size: 26px; line-height: 30px; } .sidebar-news { list-style: none; margin: 0; } .sidebar-news h3 { font-size: 20px; line-height: 26px; margin-top: 0; } .sidebar-news .image-holder { width: 140px; float: right; margin-left: 10px; }
update 1: fixed giving *margin: -20px;
.sidebar-news h3
don't solution! why happening? there adding gap?
you need apply float property achieve in ie7.
.module-title h2 { margin-top: 0; font-size: 26px; line-height: 30px; } .sidebar-news { list-style: none; margin: 0; border:1px solid red; float:left; } .sidebar-news .image-holder{ float:right;} .sidebar-news h3 { font-size: 20px; line-height: 26px; margin:0px; padding:0px; float:left; } .sidebar-news .image-holder { width: 140px; float: right; margin-left: 10px; }
Comments
Post a Comment