SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    Pointiest Petitions carrotflowers's Avatar
    Join Date
    Jul 2003
    Location
    Suburbs of DC (MD)
    Posts
    595
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    problem with floats?

    Hi guys,
    I have a problem, and I don't know the cause so I thought I'd post it here!

    Here are two pages:
    http://essenceofthemountains.com/temp/gallery_5x7.html
    http://essenceofthemountains.com/temp/gallery_8x10.html

    The difference between them is that the background image on the first page, which is creating that sort of framed look to the main content, does not show up in the second. I tried recreating the code for the second page to see where it breaks and I discovered that when there are an even number of floats (the images) the page breaks (like in the second link) and you can't see the background image. Actually I don't strictly mean even, I mean complete rows of 3. The background image shows up on the first page where the last row has only 1 item. The second link has complete rows of 3 and it breaks. If I delete one or 2, then it works. Any idea why this is so?

    Thanks for looking...

  2. #2
    Pointiest Petitions carrotflowers's Avatar
    Join Date
    Jul 2003
    Location
    Suburbs of DC (MD)
    Posts
    595
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    PS let me add that it is IE/PC problem, version 5 but I believe it also happens on 5.5 & 6. Netscape 7 is ok, I think Mozilla too.

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

    That's a bit weird isn't it?

    I think the main problem is that IE has a bug where it doubles the margin (that has been set) on floats that are nearest the edge of either side of the window.

    On the side that's closest to a windows edge that margin will be doubled in IE (ie left margin on left float next to left windows edge and right margin on right float nest to right windows edge). Other floats behave as normal.

    Therefore your margin left on every first first float in a row is approximately doubled. This makes the page expand and cover up your borders.

    You can see this if you line the page up with mozilla and see that the floats are more to the left in mozilla and that the page is wider in ie.

    There are two solutions I can think of. One is to give the first float in every row a specific margin for ie just to level the playing field (will need an extra class for every row).

    Or an easier solution is just to even out the margin for all floats (for ie only) to make it fit.
    Code:
    div.float {
     float: left;
     width: 135px;
     margin: 5px 31px 20px;
     height: 220px;
     }
    * html div.float {margin-left:20px}
    The above code makes ie more or less the same appearance as mozilla and the background frame image show through.

    I still don't know why adding an extra float cures the problem but even when there is and odd float at the end the arrangement is still out in ie so hopefully the solution above will work and we can forget about it

    I've only checked this in IE6 at present so hopefully ie5 will follow suit.

    Hope that helps.

    Paul

  4. #4
    Pointiest Petitions carrotflowers's Avatar
    Join Date
    Jul 2003
    Location
    Suburbs of DC (MD)
    Posts
    595
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul:
    Thank you so much! Yes, that is weird. I apologize if some fast research should have turned it up, I didn't even know what to be looking for, since I was thoroughly baffled by the rows of 3 breaking my page. But your solution worked and I'm thrilled.

    I modified it a little
    * html div.float {
    margin: 5px 15px 20px 31px;
    }
    so that the floats would be centered in IE as in other browsers. Also, tested & works in IE 5 and 5.5.

    Thanks again!!!


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
  •