SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,292
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    double margin in ie

    i know this is a standard well known problem. searched for it, thought i found a stated fix (put display:inline on the div) but it didn't fix it.

    a div followed by a heading. div has float:left put on it to make its border collapse/wrap round its contents. once float on the div margins making the gap between the box and the heading below it go wrong. so i use padding instead. this work on all but ie. in all it's fine, but in ie double the gap.

    how to fix it ie?

    thanks.

  2. #2
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,292
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    addition: don't want to add height nor width to the div as that defeats the point of a flexible box. thanks.

    another addition: the problem seems to be just in ie 7:


    in firefox:

  3. #3
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    without seeing the code it's difficult. I'd have initially suggested the double margin bug but it could also be the 3-pixel jog depending on the code.

    Do you have a link or some sample code that replicates this problem?

  4. #4
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,292
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    well yes but there's a lot of css which isn't applicable.

    here's the link www.coXol-teXch.org/after-care-services2 (remove the two X's -- sorry to be a pain)

    the box in question starts with this:
    <div style="border:2px solid #ccc; padding:5px; float:left; margin:0; display:inline;">

    as i say the excessive gap seems to be just in ie7 not other including ie5,5.5,6 amazingly. i don't have a pc just browsershots.org though so it's a bit tricky.

    thanks.

  5. #5
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, the double margin and 3px jog bug affect spacing to the sides whereas this is obviously a probably underneath.

    Therefore you won't need display: inline; unless you decide to use a left margin along with the float (the double margin bug is only present in IE6 and below anyway).

    However, I've not actually seen this bug before but it seems to be caused simply by the commented out code that follows the image.

    Removing the block that you have commented out seems to fix the problem

    There's obviously a problem in IE6 whereby it's allocating enough space for the comments to proceed after a floated element which is definitely odd behaviour and I'd personally fix this by just removing the comments.

    (comments can also cause problems in IE6 with the duplicate character bug so I don't tend to use them. If you mark up your HTML with semantic code and then use ID's and classes that are descriptive enough along with consistent indentation then you shouldn't really need comments within your HTML anyway).

    Hope that helps.

  6. #6
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,292
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    i haven't tried it yet but assuming you're right, excellent, yes of course it helps i'd certainly not come accross that before. that's great, thanks.


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
  •