SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot
    Join Date
    Oct 2004
    Location
    Middlesbrough, UK
    Posts
    138
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Strange Margin Appearing in IE

    I am styling up a form, and each form element is in a div of its own. I have set all of these divs to have a margin-right: 15px; however IE is also adding this to the input tags within the divs, whilst select tags remain unaffected.

    Setting a style on the input's to have margin: 0px; does not work - it only works when I set a negative margin of 15px, which of course causes problems in Firefox.

    Any idea what the problem may be?

    Thanks.

  2. #2
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Are the divs floated to the right as well, as that may be causing a double-margin bug in IE (so the extra 15px isn't a margin on the inputs, it's a double-margin on the divs).

  3. #3
    SitePoint Zealot
    Join Date
    Oct 2004
    Location
    Middlesbrough, UK
    Posts
    138
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    They are floated left, not right. Could this still be the root of the problem?

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

    We'd need to see some code to give a full answer

    As buddy said ie has a double margin bug on floats and this will occur only on the edge of a float that is nearest its parents edge (or viewport if no parent). This will happen on left or right floated elements and only the element with the side closest to the parents edge is affected. Subsequent inner floats are not affected. (see the faq on floats for more info)

    The solution is to add display:inline to the float which cures ie and is ignored by everyone else because you can't make floats display:inline anyway.

    If that's not your problem thne post a working example for us to look at

  5. #5
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    ...you can't make floats display:inline anyway.
    I thought the reason was more that floats are displayed inline whatever the display value, so setting it doesn't change anything (apart from fixing IE's double-margin bug)?

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    thought the reason was more that floats are displayed inline
    No floating an element (any element) cause it to generate a block level box regardless of what type of element it originally was. This behavior cannot be changed and a float will always generate a block level box.

    That's what makes the display:inline hack safe because it has no effect on the float as UA's have been told to ignore it. The fact that it cures the double margin bug is just an anomaly and I don't think there's a reasonable explanation anywhere to say why, except to say that it does fix the bug


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
  •