IE float and margins

Discussion in 'CSS' started by jumpenjuhosaphat, May 12, 2007.

  1. #1
    I am floating 2 images in a div. On is floated left, the other floated right. In between is a repeated background and a simple form. In firefox, simply floating the images looks fine, but in IE, there is a small added space on the left side of the left float, and the right side of the right float where the repeated background image shows. How do I get rid of that added space?

    Here is the CSS:
    .search
    {
    position:absolute;
    right:0px;
    bottom:0px;
    width:250px;
    height:39px;
    background:url('site-images/search-bar-mid.gif') repeat-x;
    }
    
    .search-form
    {
    position:absolute;
    left:10px;
    top:10px;
    }
    Code (markup):
    And the HTML
    <div class="search">
     <img class="float-right" src="site-images/search-bar-right.gif" alt="gfx" />
     <img class="float-left" src="site-images/search-bar-left.gif" alt="gfx" />
     <form class="search-form">
      Search<input type="text">
      <input type="image" src="site-images/search-bar-arrow.gif">
     </form>
    </div>
    Code (markup):

     
    jumpenjuhosaphat, May 12, 2007 IP
  2. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #2
    It would help if you linked to a live page. I would need to see all of the CSS, not just the minimum.
     
    soulscratch, May 12, 2007 IP
  3. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #3
    Why would you ask about the floated images, yet not show us the css for those images?

    Now, I'm going to take a SWAG, and say that you have margins to the outside of those floats, and IE is doubling the margins, query?

    If that's it, add {display: inline;} to each class ruleset.

    cheers,

    gary
     
    kk5st, May 12, 2007 IP
  4. jumpenjuhosaphat

    jumpenjuhosaphat Peon

    Messages:
    229
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Sorry, I was working on this on my home computer, so there wasn't any live link.

    There actually was no other CSS except for:
    
    .float-left{float:left}
    .float-right{float:right}
    
    Code (markup):
    I should have added that. Sorry. I fixed it by adding a margin property for IE of -3 like:
    
    .float-left{float:left; margin-left:-3;}
    .float-right{float:right; margin-right:-3}
    html>body .float-left{margin-left:0}
    html>body .float-right{margin-right:0}
    
    Code (markup):
    That seemed to work perfectly, although, it's a bit more of a hack than I like.
     
    jumpenjuhosaphat, May 12, 2007 IP
  5. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Try posting the full HTML and CSS code. We can "proxy" images if we need to, but we'll need to know their full dimensions beforehand.
     
    Dan Schulz, May 13, 2007 IP