3 Replies Latest reply on Nov 10, 2010 1:22 PM by johngordon12

    CSS glitch with Image padding / margin in IE6/7/8

    johngordon12 Level 1

      I might be missing some wood for some trees, but I can't see what's going on here. Basically its the table with the photo of the girl, and the About Me details to the right of that.

       

      Its a bit crude as I was just working on the layout, so the borders are still visible.

       

      If you look at it in Firefox or safari its as it should be, but in IE the text is being pushed too far over to the right. Its fine when I take out the image, so it presumably has something to do with the image.

       

      I don't think there's any IMG padding / margin settings anywhere that would do that.

       

      The CSS for the table currently looks like this :

       

      [CODE]

      .stafftable {

      background-image:url(../images/stafftablebg.jpg);

      background-repeat:no-repeat;

      }

      .stafftable img{

      padding: 0 0 0 0;

      margin: 0 0 0 0;

      }

      .aboutcell {

      padding:5px 8px 5px 8px;

      color:#FFF;

      font-size:14px;

      border-bottom:1px solid #385233;

      }

      .titlecell {

      padding:2px 8px 2px 8px;

      color:#FFF;

      }

      [/CODE]

       

      And the page is here :

       

      http://www.haiji.jp/new/staff.htm

       

      if anyone can spot what's causing that to happen, and suggest a fix, I'd be most grateful.

       

      Thanks.