SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2006
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    ie6 not displaying correct image width

    At http://dickeyinteriordesign.com/ IE6 is not displaying the full width of the image in the "Featured Services" box and has a gap on the left side. The image displays as expected in FF and IE7. I've tried a number of changes with no results so far.

    Any suggestions appreciated.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,271
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    HI,

    When you use negative margins in IE more often than not you will need to add position:relative otherwise the negative margin portion hides under the background.

    e.g.
    Code:
    #home dd.featured_img {
      float: left;
      margin-left: -14px;
      margin-top: -20px;
      width:218px;height:95px;
    background-image: url(../images/home_featured.jpg);
    background-repeat: no-repeat;
    position:relative
    }

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2006
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot Paul. Maybe someday I'll understand how to fix the majority of bugs in IE6.

  4. #4
    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 btimms,


    You are still having the original problem in FF2 also but the gap is on the right

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,271
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    The gap on the right in FF2 is cause by the overflow:hidden on basicbox.

    Remove it and the whole image should show.

    Code:
    .basicbox {
      display: inline;
      float: left;
      height: 173px;
      margin: 0;
      /*overflow: hidden;*/
      padding: 7px 0 0 15px;
      width: auto;
    }
    This is the danger of trying to move elements around instead of placing them easily and correctly first time around.

    You should have left off the padding from the main container and applied it to the inner elements instead and then there would be no need for the negative margins and associated bugs

  6. #6
    SitePoint Enthusiast
    Join Date
    Nov 2006
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Good point Paul. I'm going to go back and do it that way.


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
  •