SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Dec 2008
    Posts
    156
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Double margin on IE7 with UL

    Hello guys!
    Please, do someone can help me? I Don't know why on IE7, but not in standards compliant browsers, I get an extra margin/padding on the <ul class="tools"> lines (I mean, right after the "Pagine: 1" parts)

    http://ivanhalen.com/framework/

    Seems on IE7 the margin is doubled, but have no idea why, and I tried several things...
    Thanks!

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    I remember this bug, I ran into it just recently.

    The problem is that IE6/7 transfer the parents top padding to the last floated element.
    Code:
    .content { padding:8px 8px 0; background:#FFF; border:1px solid #C00; }
    That last floated element in your case is the .tools li { float:left;.....

    You can fix it by setting haslayout on the following element (#form2) and clearing the floats above.

    Code:
    #form2{width:100%;clear:both;}
    You have an extra 8px after the #form2 in IE7 also, I haven't looked into that yet.

  3. #3
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    You have an extra 8px after the #form2 in IE7 also, I haven't looked into that yet.
    You have the same thing going on after the floated <ul class="tools left"> in the form table. You will have to use a hard clearing div in the html since you have no other elements to hook clear:both; to.

    Code:
                    </tbody>
                  </table>
                  <ul class="tools left">
                    <li class="left first"><input name="btnToggle" id="btnToggle" value="Attiva/Disattiva selezionati" class="button" type="button"></li>
                    <li class="left"><input name="btnDelete" id="btnDelete" value="Elimina selezionati" class="button" type="button"></li>
                    <li class="right"><span class="spaced">Pagine:</span>
                    <ul class="pagination">
                    <li><strong>1</strong></li>
                    </ul>
                    </li>
                  </ul>
                  <div style="width:100&#37;;font-size:0;clear:both"></div>  
                </form>
            </div>
          </div>
          <!-- InstanceEndEditable --></div>
      </div>
      
    
    <hr class="print">

  4. #4
    SitePoint Zealot
    Join Date
    Dec 2008
    Posts
    156
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, Ray! I was not aware of this bug and you pointed me in the right direction!

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,565
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Here is some reading where me and Ray went into the works of hte bug. So yes Ray did recently come up with this bug..first hand experience .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •