Hi,

I found a bug in IE (both 6 and 7 has the same bug), the padding is doubled.

the page is here: http://alfren24.uni.cc/others/bug.html

here's my css code:

#right-area {
    width:251px;
    float:right;
    top:-20px;
    position:relative;
}

.rounded-box-right .bg-top {
    background:url(images/right-box_bgtop.jpg) no-repeat;
    width:251px;
    height:10px;
    overflow:hidden;
}

.rounded-box-right .bg-middle {
    background:url(images/right-box_bgmiddle.jpg) repeat-y;
    width:251px;
    overflow:hidden;
    padding:10px 0 10px 0;
}


.rounded-box-right .bg-bottom {
    background:url(images/right-box_bgbottom.jpg) no-repeat;
    width:251px;
    height:10px;
    overflow:hidden;
}

#right-area .box {
    background:url(images/border-hori.jpg) repeat-x bottom;
    padding-bottom:20px;
    width:207px;
    margin:0 auto 10px auto;
}


#right-area .box .link a {
    background:url(images/button_read-more-black.gif) no-repeat;
    width:92px;
    height:25px;
    text-indent:-999em;
    overflow:hidden;
    float:right;
}

and my HTML code:

<div class="rounded-box-right">
      
        <div class="bg-top">&nbsp;</div>
        
        <div class="bg-middle">
        
          <div class="box">
        
            <h3>title</h3>
          
            <p>Lorem ipsum de amet dolor sit libero neque ut Aenean ligula dolor.</p>
          
            <div class="link">
          
              <a href="#">Read More</a>
          
            </div>
          
            <div class="clr"></div>
          
          </div><!--box end-->
        
        
        </div>
        
        <div class="bg-bottom">&nbsp;</div>
      
      
      </div><!--rounded-box-right-->

noticed the second box in the right side. the padding at the bottom is doubled in IE (bot 6 and 7).

although i can fix this using the IE css hack, i really want to know the cause of this problem.

if anyone knows or experienced this and if anyone know the fix for this one, I would appreciate it.

thanks!

Add

       display:inline-block;

To the offending element

Use a conditional comment to avoid other "side effects" in standards compliant browsers

Well I have already tried it and it doesn't work, that was the first thing i found when searching in google.

and by the way, the padding will only doubled if i add "float:right" on this one: "#right-area .box .link a", if i removed the float, the padding is not doubled. Although i can fix this by changing my css code, I just want to know why is the padding doubled in IE and if there's a fix for this it will be a appreciated.

Aha It's NOT the padding in that case.

It's the margin that is doubled

Originally Posted by chrishirst

Aha It's NOT the padding in that case.

It's the margin that is doubled

Nope its not the margin, i already know about that bug. it will only happen if my float div has a margin direction left or right. if you look at my css, there's no margin in the floated div.

there is no padding on the element either. And it is NOT a div you are referring to, it is a block display anchor element, and there is a -999 em text indent applied which would create some strange effects. I don't have IE6 or 7 on the machine I'm using so I may not actually see the problem you are experiencing.

IETester shows no difference at all between versions (apart from 5.5 of course) and it looks the same as it does in FF and Chrome.

i really want to know the cause of this problem

the cause - is MICROSOFT!!!!